Question

我使用以下代码在索引页面中显示表数据，目前我已经创建删除内联，用户点击删除按钮，他弹出确认，点击删除调用删除行为从DB删除条目。问题是，我从DB删除后，我仍然看到它模态关闭后的UI，刚刷新页面后，条目被删除，在ajax调用成功后，如何从UI中删除条目？

  @model IEnumerable<TestropDownCreate.Models.TestModel>

    @{
        ViewBag.Title = "Index";
    }

    <h2>Index</h2>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="deleteModalLabel">Delete Item</h4>
                </div>
                <div id="deleteModalBody" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

删除

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SelectedGender)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SelectedGender)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                    <a href="#" class="deleteLink" id="@item.ID">delete</a>

                </td>
            </tr>
        }

    </table>


    <script>
        $(function () {
            $("#deleteModal").modal("hide");  // initially hides the modal pop-up until needed

            $(".deleteLink").on("click", function () {

                $.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
                    $("#deleteModalBody").html(data);

                    $("#deleteModal").modal("show");  // shows the modal pop-up now that we have our partial view
                });

            });
        });
 $("#deleteBtn").on("click", function () {
                $.ajax({
                    type:'POST',
                    url: "/User/DeleteConfirmed",
                    dataType: "json",
                    data:  {id: Id} ,
                    success: function (result) {
                        var id = result;

                    },


                });

            });

        });
    </script>

Answer 1

只需在表格中的'tr'上添加一个ID，例如

<tr id="@item.ID">

然后删除tr，例如

$('#' + id).remove();

从DB中删除后从视图中删除条目

1 个答案: