使用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

請注意，同步請求可能會暫時鎖定瀏覽器，從而在請求處於活動狀態時禁用任何操作。