0

Usando o Asp.net MVC, estou criando um os inputs dinamicamente usando um loop com os dados di banco.

<div class="col-md-12" id="div-contatos">

    @if (Model.PessoasContatosViewModel != null)
    {
        @for (int i = 0; i < Model.PessoasContatosViewModel.Count; i++)
        {


            <div class="form-group 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-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-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-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>
        }

    }

</div>

Usando o JavaScript, quando clico no botão Adicionar contato, preciso saber quantos inputs tenho dentro da minha div-contatos. Para isso, estou usando o JS:

var itemIndex = $("#div-contatos input.iHidden").length;

O Problema é que não está funcionando. O Retorno está sendo 0. O que está errado?

5
  • Você já tentou da seguinte maneira? var count = $("body").find("div-contatos").length; Commented 17/09/2018 às 0:42
  • Testei com sua sujestão @VictorLaio, mas tb obtive 0 como retorno...estranho...
    – Master JR
    Commented 17/09/2018 às 0:52
  • Uma outra alternativa entao é a seguinte: document.getElementsByClassName('div-contatos').length Commented 17/09/2018 às 1:05
  • Mesma coisa... Estou com sérios problemas rssr
    – Master JR
    Commented 17/09/2018 às 1:14
  • Se eu deixar apenas $("#div-contatos").length; ele consegue retornar 1... Ele encontra a div... Será não é alguma coisa relacionada aos campos serem criados com asp.net razor no qual input.iHidden não esteja funcionando? @VictorLaio
    – Master JR
    Commented 17/09/2018 às 1:21

1 Resposta 1

0

Você está rendenizando o seguinte html:

<input type="text" asp-for="PessoasContatosViewModel[i].Contato" class="form-control txt-contato" />

Seu input possui duas classes: form-control e txt-contato. Porém, em seu javascript, está contando a quantidade de elementos com a classe iHidden.

Tente dessa forma:

var itemIndex = $("#div-contatos input.txt-contato").length;
2
  • Publiquei um exemplo aqui: jsfiddle.net/f8xah39m/1 Commented 17/09/2018 às 1:22
  • Funcionou @Bruno Soares!!!! Agora entendi a ídeia... Muito obrigado!!! :)
    – Master JR
    Commented 17/09/2018 às 1:24

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 .