Question

我使用下面的代码在索引页面中显示表数据，目前我已经创建了删除内联，用户点击删除按钮，他弹出确认，点击删除是调用删除操作删除来自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>

Delete

    <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

原因是你删除条目后不刷新表，这个问题与ASP无关......你应该使用JS / Jquery。

为表格行提供ID。

<tr id="@item.ID">

然后在操作成功完成后删除已删除的行

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

}, });

更改/删除表内容时删除条目

1 个答案: