Name property does not work using Razor Hiddenfor

Question

I am creating several fields dynamically using Asp.net Razor and for this I am passing the index to a partial view and setting the name property of each field. Everything is working fine with all fields except Id and Personal that are built using @Html.Hiddenfor and are hidden.

If I set the name property as the example below and pass the index, it works:

<label asp-for="Contato" name="PessoasContatosViewModel[@indice].Contato" class="control-label txt-contato">Contato</label>

If I try to use Razor @Html.Hiddenfor, the name property is not getting the index correctly (I don’t know if it’s because I’m using @name) and the Fields are set to 0:

@Html.HiddenFor(model => model.Id, new { @class = "hid-id", @name = "PessoasContatosViewModel["+@indice+"].Id"})
@Html.HiddenFor(model => model.PessoaId, new { @class = "hid-pessoaId", @name = "PessoasContatosViewModel["+@indice+"].PessoaId"})

What’s going wrong? Is there any way to set the name of these two Fields for the index to be passed correctly.

Full code of the view:

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

<div class="form-horizontal">
    <div class="form-group row align-items-center">
        <div class="col-md-2">
            @Html.HiddenFor(model => model.Id, new { @class = "hid-id", @name = "PessoasContatosViewModel["+@indice+"].Id"})
            @Html.HiddenFor(model => model.PessoaId, new { @class = "hid-pessoaId", @name = "PessoasContatosViewModel["+@indice+"].PessoaId"})
            <label asp-for="ContatoTipoId" name="PessoasContatosViewModel[@indice].ContatoTipoId" class="control-label sel-contatoTipo">Tipo de Contato</label>
            <select asp-for="ContatoTipoId" asp-items="Model.ContatosTipos" name="PessoasContatosViewModel[@indice].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contatoTipo"></select>
            <span asp-validation-for="ContatoTipoId" name="PessoasContatosViewModel[@indice].ContatoTipoId" class="text-danger sel-contatoTipo"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="Contato" name="PessoasContatosViewModel[@indice].Contato" class="control-label txt-contato">Contato</label>
            <input type="text" asp-for="Contato" name="PessoasContatosViewModel[@indice].Contato" class="form-control txt-contato" />
            <span asp-validation-for="Contato" name="PessoasContatosViewModel[@indice].Contato" class="text-danger txt-contato"></span>
        </div>
        <div class="col-md-3">
            <label asp-for="Detalhes" name="PessoasContatosViewModel[@indice].Detalhes" class="control-label txt-detalhes">Detalhes</label>
            <textarea asp-for="Detalhes" name="PessoasContatosViewModel[@indice].Detalhes" class="form-control txt-detalhes"></textarea>
            <span asp-validation-for="Detalhes" name="PessoasContatosViewModel[@indice].Detalhes" class="text-danger txt-detalhes"></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" name="PessoasContatosViewModel[@indice].ContatoPrincipal" class="ckb-contatoPrincipal" checked autocomplete="off" />
                <label asp-for="ContatoPrincipal" name="PessoasContatosViewModel[@indice].ContatoPrincipal" class="ckb-contatoPrincipal">Contato Principal</label>
            </div>
        </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>
</div>

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

Answer 1

Try it like this:

<input type="hidden" asp-for="Id" name="PessoasContatosViewModel[@indice].Id" />