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,
    …
});

More about $.ajax

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

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

3 个答案: