2

Estou criando alguns campos dinamicamente no asp.net core mvc para cadastrar um contato. Para isso, uso uma partialview.

Dentro de uma div eu vou adicionando cada row de fields, a medida que o usuário clica no botão Adicionar novo Contato.

Através de um FOR, controlo o índice de todos os contatos para que sejam gerados dentro da minha vid. Ex:

@for (int i = 0; i < Model.PessoasContatosViewModel.Count; i++)
{
    <div class="row align-items-center">
        <div class="col-md-2">
            @Html.HiddenFor(model => model.PessoasContatosViewModel[i].Id, new { @class = "hid-id" })
            <label asp-for="PessoasContatosViewModel[i].ContatoTipoId" class="control-label sel-contatoTipo">Tipo de Contato</label>
            <select asp-for="PessoasContatosViewModel[i].ContatoTipoId" asp-items="Model.ContatosTipos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contatoTipo"></select>
            <span asp-validation-for="PessoasContatosViewModel[i].ContatoTipoId" class="text-danger"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="PessoasContatosViewModel[i].Contato" class="control-label txt-contato">Contato</label>
            <input type="text" asp-for="PessoasContatosViewModel[i].Contato" class="form-control txt-contato" />
            <span asp-validation-for="PessoasContatosViewModel[i].Contato" class="text-danger"></span>
        </div>
        <div class="col-md-2">
            <label class="control-label">&nbsp;</label>
            <div class="checkbox-custom checkbox-default">
                <input type="checkbox" asp-for="PessoasContatosViewModel[i].ContatoPrincipal" class="ckb-contatoPrincipal" checked autocomplete="off" />
                <label asp-for="PessoasContatosViewModel[i].ContatoPrincipal" class=" ckb-contatoPrincipal">Contato Principal</label>
            </div>
        </div>
        <div class="col-md-3">
            <label asp-for="PessoasContatosViewModel[i].Detalhes" class="control-label txt-detalhes">Detalhes</label>
            <textarea asp-for="PessoasContatosViewModel[i].Detalhes" class="form-control txt-detalhes"></textarea>

        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-icon btn-default btn-outline btn-remover-contato" data-id="@Model.PessoasContatosViewModel[i].Id." style="margin-top: 30px;"><i class="icon wb-trash" aria-hidden="true"></i></button>
        </div>
    </div>
}

O Problema:

A minha PartialView está vinculada à viewModel PessoaContatoViewModel onde preciso indexar os fields para serem retornados à View principal junto com os demais. Para isso estou passando o número do índice através de um ViewBag, mas não sei como criar os índices. Seria algo parecido com isso:

<div class="col-md-4">
    <label asp-for="[indice]Contato" class="control-label txt-contato">Contato</label>
    <input type="text" asp-for="[indice]Contato" class="form-control txt-contato" />
    <span asp-validation-for="[indice]Contato" class="text-danger"></span>
</div>


@model Retaguarda.Application.ViewModels.Pessoa.PessoaContatoViewModel
@{
    int indice = ViewBag.indice;
}

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

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Como faço isso?

1 Resposta 1

0

Crie uma partial que vai ter sua estrutura para repetição e que vai receber o VM dos campos:

_PartialEstruturaCampos:

@model Retaguarda.Application.ViewModels.Pessoa.PessoaContatoViewModel

<div class="row align-items-center">
  <div class="col-md-2">
@Html.HiddenFor(model => model.PessoasContatosViewModel.Id, new { @class = "hid-id" })
<label asp-for="@Model.ContatoTipoId" class="control-label sel-contatoTipo">Tipo de Contato</label>
<select asp-for="@Model.ContatoTipoId" asp-items="Model.ContatosTipos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contatoTipo"></select>
<span asp-validation-for="@Model.ContatoTipoId" class="text-danger"></span>
  </div>
  <div class="col-md-4">
<label asp-for="@Model.Contato" class="control-label txt-contato">Contato</label>
<input type="text" asp-for="@Model.Contato" class="form-control txt-contato" />
<span asp-validation-for="@Model.Contato" class="text-danger"></span>
  </div>
  <div class="col-md-2">
<label class="control-label">&nbsp;</label>
<div class="checkbox-custom checkbox-default">
  <input type="checkbox" asp-for="@Model.ContatoPrincipal" class="ckb-contatoPrincipal" checked autocomplete="off" />
  <label asp-for="@Model.ContatoPrincipal" class=" ckb-contatoPrincipal">Contato Principal</label>
</div>
  </div>
  <div class="col-md-3">
<label asp-for="@Model.Detalhes" class="control-label txt-detalhes">Detalhes</label>
<textarea asp-for="@Model.Detalhes" class="form-control txt-detalhes"></textarea>

  </div>
  <div class="col-md-1">
<button type="button" class="btn btn-icon btn-default btn-outline btn-remover-contato" data-id="@Model.PessoaContatoViewModel.Id." style="margin-top: 30px;"><i class="icon wb-trash" aria-hidden="true"></i></button>
  </div>
</div>

Depois coloque sua estrutura de repetição for chamando sua partial para cada "Contato" que houver no seu view model enviando o mesmo para a partial:

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

1
  • Obrigado @Victor Laio :)
    – Master JR
    6/09/2018 às 12:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .