I have a 1: N relationship between the Person and Contacts classes. In my view edit, I get a viewmodel containing a list of contacts. In my View, I made a 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 I saw, teaches to do using traditional asp.net as 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 by red 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"> </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 for must be conformed to the image, with information coming from ViewModel.
Does anyone know how to do this?
Thank you:)