Question

我有一个页面，点击一个按钮打开一个弹出窗口，确认删除该页面的一个元素。点击是，触发控制器中的方法并在数据库中删除元素，但是当再次加载页面时，灰色加载覆盖仍然保留，并且仍然可以看到应该消失的元素。以下是我的代码。

删除元素链接的CSHTML代码：

<div style="float: left; width: 40px; height: 10px; "> @Html.ActionLink
("-S", "DeleteSection", "Section", new { id = @Model.Id }, new { 
onclick = "ConfirmDeleteSection();", @class = "editLink", 
style = "width:30px" })</div>

Javascript：ConfirmDeleteSection（）函数：

<script type="text/javascript">
function ConfirmDeleteSection() {
    var x = confirm("Are you sure you want to delete this section?");
    if (x) 
        return true;
    else
        return false;
}
</script>

控制器：SupprimerSection方法：

    public ActionResult DeleteSection(int id)
    {
        try
        {
            //get section by id
            var section = _service.GetSection(id);

            DeleteSection(section);

            return RedirectToAction("Pages", "Section");
        }
        catch (Exception e)
        {
            //log e
            return base.Erreur();
        }
    }

控制器：页面方法：

     public ActionResult Pages()
    {
        try
        {
            var liste = _service.GetListeSection();
            return View(liste);
        }
        catch (Exception e)
        {
            //log e
            return base.Erreur();
        }

    }

正如您所看到的，在弹出窗口中单击“是”时，将触发DeleteSection方法，并在数据库中删除该部分。然后转到方法页面，该方法页面获取数据库中的所有部分以显示它们。但是，当页面加载时，它具有灰色加载覆盖，这阻止我单击页面中的任何元素，仍然可以看到刚刚删除的部分。但是，当我刷新页面时，看不到删除的元素。知道错误可能在哪里吗？

更新

当再次加载页面时，在浏览器的控制台中我有：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看http://xhr.spec.whatwg.org/。

整个Javascript：

 <script type="text/javascript">
    var linkObj;
    $(function () {
        $(".editLink").button();
        var x = "connecter";
        $('#updateDialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true,
            buttons: {
                "Login": function () {
                    $("#update-message").html(''); //make sure there is nothing on the message before we continue                         
                    $("#updateForm").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

        $($("button", $("#updateDialog").parent())[0]).text("Save");
        $($("button", $("#updateDialog").parent())[1]).text("Cancel");

        $(".editLink").click(function (e) {
            //change the title of the dialog
            linkObj = $(this);
            var dialogDiv = $('#updateDialog');
            var viewUrl = linkObj.attr('href');
            $.get(viewUrl, function (data) {
                dialogDiv.html(data);
                //validation
                var $form = $("#updateForm");
                // Unbind existing validation
                $form.unbind();
                $form.data("validator", null);
                //open dialog
                dialogDiv.dialog('open');
                e.preventDefault();
            });
            return false;
        });

    });

AJAX致电

@model Model.Models.CMS.Section

@using (Ajax.BeginForm("DeleteSection", "Section", new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace, 
            HttpMethod = "POST",
            OnSuccess = "updateSuccess"
        }, new { @id = "updateForm" }))
    {
    <div id="delete-message" class="error" ></div>
    <fieldset>
        <legend>Section</legend>
            @Html.HiddenFor(m => m.Id)
            <div>
                Êtes-vous sûr de vouloir supprimer cette section?
            </div>

    </fieldset>
}

Answer 1

我假设您的列表位于“页面”视图中。这意味着您要从同一页面删除和查看。

 [HttpPost]
 public JsonResult DeleteSection(int id)
    {
        try
        {
            //get section by id
            var section = _service.GetSection(id);

            DeleteSection(section);

            return Json("success",JsonRequestBehavior.AllowGet);
        }
        catch (Exception e)
        {
            //log e
            return Json("failed",JsonRequestBehavior.AllowGet);
        }
    }

您的观点可能是这样。

 <div style="float: left; width: 40px; height: 10px; ">
<a class="editLink" id="@Model.Id" style="width:30px" onclick="ConfirmDeleteSection('@Model.Id');">Delete Section</a>

您可以像这样更改您的JavaScript。

<script type="text/javascript">
    function ConfirmDeleteSection(id) {
        var confirmation = confirm("Are you sure you want to delete this section " +  id +" ?");
        if (confirmation) {
            $('#loading').fadeIn();
            var posting = $.post("/Home/DeleteSection", {id:id}, function () {
            });
            posting.done(function (data) {
                $('#loading').hide();
                if (data != null && data.toString().indexOf('success') > -1) {
                    location.reload();//reload your page. This is not good. Just remove the section using javascript ex: $('#'+id).hide();
                } else {
                    alert("Delete failed"); //you can get server message from json if you want
                }
            });
        }
    }

功能完成后隐藏加载覆盖

1 个答案: