使用javascript进行ajax调用时阻止用户交互

Question

我有一个带有按钮的表单来生成文档。 在异步生成文档时，我想停止任何用户交互（单击按钮、输入文本等），直到该过程完成。

我曾经用过 BlockUI，但这一次，我想知道另一种没有 BlockUI 的方法。

如何使用 javascript 或 jquery 完成此操作？ 我正在使用 ASP.NET MVC 创建此表单。

看法

@using (Ajax.BeginForm("Generate", new AjaxOptions 
    {
        LoadingElementId = "progress",
        UpdateTargetId = "result"
    }))
{
        @Html.DropDownListFor(model => model.ID, new SelectList(Model.Employees, "Value", "Text"), htmlAttributes: new { @class = "form-control" })
        @Html.DropDownListFor(model => model.Template, new SelectList(Model.Templates, "Value", "Text"), htmlAttributes: new { @class = "form-control" })
        <button type="submit" class="btn btn-success">Generate</button>

        <span id="progress" style="display:none;">
            <img src="@Url.Content("~/Content/Images/busy.gif") ">
        </span>

        <span id="result"></span>
}

Answer 1

您可以为微调容器添加一些 CSS。 像这样

html, body {
    height: 100%;
    z-index: 1;
}

#progress {
    background: rgba(0, 0, 0, .7);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10000;
}

它将在整个网页上拉伸带有微调图像的容器并阻止用户点击。

Answer 2

您可以使用 ajaxStart 并显示一个加载栏，使后面的所有内容都无法访问。

$(document).ajaxStart(function () {
    $('#ajaxContainer').show();
});
$(document).ajaxComplete(function () {
    $('#ajaxContainer').hide();
});

这是我在_Layout.cshtml中使用的代码，其中#ajaxContainer是一个包含img loading-bar的div

我不知道它是否适用于@Ajax.BeginForm，但它适用于 jQuery $.ajax。 如果它不适用于 @Ajax.BeginForm 你总是可以使用 jQuery $.ajax

编辑：#ajaxContainer 看起来像这样：

<div id="ajaxContainer" style="display: none">
    <div class="loaderdiv">
        <div class="loader">
            <img src="~/Images/ajax-loader.gif" alt="" />
            <br />
            <span class="loader-text">Loading...</span>
        </div>
    </div>
</div>

Answer 3

您可能需要同步 ajax 调用。

$.ajax({
    …
    async: false,
    …
});

更多关于 $.ajax

请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。