Modal update while deleting table record - MVC

2

I have this modal, and I have the delete function, I need the data to be deleted and updated, without closing the modal. Here's how the code looks: 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 is 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 to be updated, without closing the modal, or refreshing the page?

This is the OpenModal () function

  function abreModal() {
    $('#myModal').modal('show');
}
    
asked by anonymous 07.08.2018 / 13:16

1 answer

2

I think I found the error.

You have this setting for tr repeating in 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 it has 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 are trying to get a id with the value #tr + id , but this id was not defined anywhere in your 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 do not know the syntax of ASP NET CORE, but the integer above is you set id of tr according to id of item .

Note : You have a typo in your role. Instead of ExluirItem , it should be ExcluirItem .

    
07.08.2018 / 14:39