函数完成后隐藏加载覆盖

本文关键字：加载 覆盖 隐藏 函数 | 更新日期: 2023-09-27 18:21:59

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

要删除元素的链接的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();
        }
    }

控制器：Pages方法：

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

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

更新：

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

主线程上的同步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>
}

函数完成后隐藏加载覆盖

我假设您的列表在"Pages"视图中。这意味着您正在从同一页面进行删除和查看。

 [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
                }
            });
        }
    }
相关文章：