How to load viewmodel fields dynamically into Asp.net core mvc

Question

I have a 1:N relationship between the Person and Contacts classes. In my Edit view, I receive a viewmodel containing a contact list. In my View, I’ve made a single for which you should scroll through the contact list and load a contact Row dynamically. The problem is that I do not know how to do this in ASP.NET CORE MVC, because the tutorial on the net that I saw, teaches how to do using traditional Asp.net as an example:

@for (int i = 0; i < Model.Telefones.Count; i++)
 {
    <div class="row">
    <div class="col-md-2">
        @Html.HiddenFor(model => model.Telefones[i].Id, new { @class = "hid-id" })
        @Html.EditorFor(model => model.Telefones[i].DDD, new { htmlAttributes = new { @class = "form-control txt-ddd" } })
    </div>
    <div class="col-md-6">
        @Html.EditorFor(model => model.Telefones[i].Numero, new { htmlAttributes = new { @class = "form-control txt-numero" } })
    </div>
    <div class="col-md-3">
        @Html.EnumDropDownListFor(model => model.Telefones[i].Tipo, new { @class = "form-control sel-tipo" })
    </div>
    <div class="col-md-1">
        <button class="btn btn-danger btn-remover-telefone" data-id="@Model.Telefones[i].Id">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </div>
</div>

}

I tried to adapt my project in Asp.net core, but the name of the view that is in the Asp-for marker is underlined red by breaking the compilation.

@for (int i = 0; i < Model.PessoasContatosViewModel.Count(); i++)
{
   <div class="row align-items-center">
    <div class="col-md-2">
        <label asp-for="PessoaContatoViewModel[i].ContatoTipoId" class="control-label sel-contatoTipo">Tipo de Contato</label>
        <select asp-for="PessoaContatoViewModel[i].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contatoTipo"></select>
    </div>
    <div class="col-md-4">
        <label asp-for="PessoaContatoViewModel[i].Contato" class="control-label txt-contato">Contato</label>
        <input type="text" asp-for="PessoaContatoViewModel[i].Contato" class="form-control txt-contato" />
    </div>
    <div class="col-md-2">
        <label class="control-label">&nbsp;</label>
        <div class="checkbox-custom checkbox-default">
            <input type="checkbox" asp-for="PessoaContatoViewModel[i].ContatoPrincipal" class="ckb-contatoPrincipal" checked autocomplete="off" />
            <label asp-for="PessoaContatoViewModel[i].ContatoPrincipal class=" ckb-contatoPrincipal">Contato Principal</label>
        </div>
    </div>
    <div class="col-md-3">
        <label asp-for="PessoaContatoViewModel[i].Detalhes" class="control-label txt-detalhes">Detalhes</label>
        <textarea asp-for="PessoaContatoViewModel[i].Detalhes" class="form-control txt-detalhes" />
    </div>
    <div class="col-md-1">
        <button type="button" class="btn btn-icon btn-default btn-outline btn-remover-contato" style="margin-top: 30px;"><i class="icon wb-trash" aria-hidden="true"></i></button>
    </div>
</div>

}

The result of the for must be in the image, with the information coming from Viewmodel.

Someone knows how to do it?

Thank you :)

Answer 1

I saw there in the comments that your for works in the View and not in the right Partial?

Why don’t you run a for out of partial then and let it just as an item that the for will add?

@for (int i = 0; i < Model.Telefones.Count; i++)
{
      Html.Partial("_SuaPartial", Model.Telefones[i])
}