Update modal when deleting record from table - MVC

Question

I have this modal, and I have the function to exclude, I need the data to be deleted and updated, without closing the modal. Follow the code as follows: This is the modal:

 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Fornecedores Vinculados</h4>
            </div>
            <div class="modal-body">
                <table class="table table-responsive table-hover">
                    <thead>
                        <tr>
                            <th>Fornecedores</th>
                            <th style="text-align:right"><a data-toggle="modal" data-target="#myModalAdd" title="Adicionar Novo Fornecedor" class="btn btn-info"><i class="fa fa-plus"></i></a></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.ProdutosFornecedores)
                            {
                                <tr>
                                    <td>@item.FornecedorProduto.Nome</td>
                                    <td align="right">
                                        <a href="#" onclick="ExluirItem(@item.Id);" title="Excluir"><i class="fa fa-trash-o fa-lg"></i></a>&nbsp;
                                    </td>
                                </tr>
                            }
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Here is the delete function:

 function ExluirItem(idItem) {
    var url = "/Produto/ExcluirItens";
    $.ajax({
        url: url,
        data: { id: idItem },
        datatype: "json",
        type: "POST",
        success: function (data) {
            if (data.resultado) {
                var linha = "#tr" + idItem;
                $(linha).fadeOut(500);
                //location.reload();
                abreModal();
            }
        }
    })
}

And here the delete controller:

[HttpPost]
    public ActionResult ExcluirItens(int id)
    {
        var result = false;
        var item = db.ProdutosFornecedores.Find(id);

        if (item != null)
        {
            db.ProdutosFornecedores.Remove(item);
            db.SaveChanges();

            result = true;
        }

        return Json(new { Resultado = result });
    }

How can I make it updated, without closing the modal, or updating the page?

This is the function abreModal()

  function abreModal() {
    $('#myModal').modal('show');
}

Answer 1

I think I found the mistake.

You have that definition for the tr repeating in the foreach

<tbody>
    @foreach (var item in Model.ProdutosFornecedores)
        {
            <tr>
                <td>@item.FornecedorProduto.Nome</td>
                <td align="right">
                    <a href="#" onclick="ExluirItem(@item.Id);" title="Excluir"><i class="fa fa-trash-o fa-lg"></i></a>&nbsp;
                </td>
            </tr>
        }
</tbody>

And in jQuery there’s this:

$.ajax({
    url: url,
    data: { id: idItem },
    datatype: "json",
    type: "POST",
    success: function (data) {
        if (data.resultado) {
            var linha = "#tr" + idItem;
            $(linha).fadeOut(500);
            //location.reload();
            abreModal();
        }
    }
})

You’re trying to catch one id with the value #tr + id, however this id has not been defined anywhere in its tr.

Maybe something like this will solve:

<tbody>
    @foreach (var item in Model.ProdutosFornecedores)
        {
            <tr id="[email protected]">
                <td>@item.FornecedorProduto.Nome</td>
                <td align="right">
                    <a href="#" onclick="ExluirItem(@item.Id);" title="Excluir"><i class="fa fa-trash-o fa-lg"></i></a>&nbsp;
                </td>
            </tr>
        }
</tbody>

I don’t know the syntax of ASP NET CORE, but the above is you set the id of tr in accordance with the id of item.

Observing: Has a typo in its function. Instead of ExluirItem, should be ExcluirItem.