I have a contact list that is loaded dynamically using razor and Javascript to remove the rows and reorder the positions of the fields. The problem occurs when I click the delete record button and delete all the contacts (I send an ajax request to the database and delete all), on the screen they disappear, but the List on which the Binding was still loaded with zeroed and zero records .
IfIsaveandpost,thelistcomesloadedwiththeitemszeroedandzero.
WhyarenottherecordsintheListdeleted?Isitaproblemwiththeorderofthefields'indexes?Isthereawaytoresolvethis?
//CONTROLLER(EXCLUSIONUSINGAJAX)
[HttpPost][Route("pessoa-contato/remover-pessoa-contato/{id:int}")]
public void DeletePessoaContato(int id)
{
_pessoaContatoAppService.Remove(id);
}
COMPLETE SOURCE:
@model Retaguarda.Application.ViewModels.Pessoa.PessoaViewModel
@{
ViewData["Title"] = "_PessoaContato";
}
<div class="form-horizontal">
<div class="form-group row">
<div class="col-md-12">
<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" })
@Html.HiddenFor(model => model.PessoasContatosViewModel[i].PessoaId, new { @class = "hid-pessoaId" })
<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 sel-contatoTipo"></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 txt-contato"></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>
<span asp-validation-for="PessoasContatosViewModel[i].Detalhes" class="text-danger txt-detalhes"></span>
</div>
<div class="col-md-2">
<div class="checkbox-custom checkbox-default">
<input type="checkbox" asp-for="PessoasContatosViewModel[i].ContatoPrincipal" class="ckb-contatoPrincipal" 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>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="col-md-2">
<button id="btn-add-contato" type="button" class="btn btn-icon btn-default btn-outline"><i class="icon wb-plus" aria-hidden="true"></i> Novo Contato</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
var qtdContatos = $("#div-contatos input.txt-contato").length;
$("#btn-add-contato").click(function (e) {
var novoIndice = qtdContatos;
e.preventDefault();
$.get("/pessoa-contato-gerenciar/getPessoaContato/" + novoIndice, function (data) {
$("#div-contatos").append(data);
qtdContatos++;
});
});
$("#div-contatos").on("click", ".btn-remover-contato", function (e) {
e.preventDefault();
var id = $(this).attr("data-id");
if (id)
$.post("/pessoa-contato/remover-pessoa-contato/" + id);
$(this).parent().parent().remove(); //Para remover o Panel e não dar problema, tem que add mais um Parent()
qtdContatos--;
$("#div-contatos .row").each(function (indice, elemento) {
$(elemento).find(".sel-contatoTipo").attr("name", "PessoasContatosViewModel[" + indice + "].ContatoTipoId");
$(elemento).find(".txt-contato").attr("name", "PessoasContatosViewModel[" + indice + "].Contato");
$(elemento).find(".ckb-contatoPrincipal").attr("name", "PessoasContatosViewModel[" + indice + "].ContatoPrincipal");
$(elemento).find(".txt-detalhes").attr("name", "PessoasContatosViewModel[" + indice + "].Detalhes");
$(elemento).find(".hid-id").attr("name", "PessoasContatosViewModel[" + indice + "].Id");
$(elemento).find(".hid-pessoaId").attr("name", "PessoasContatosViewModel[" + indice + "].PessoaId");
});
});
});
</script>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}