在等待ajax请求时显示微调器并禁用页面

问题描述：

我有一个项目，其中我使用MVC C＃，使用Bootstrap和FontAwesome。

I have a project in which I use MVC C#, with Bootstrap and FontAwesome.

我的目标是显示一个微调器并在等待ajax时禁用页面请求。

My objective is to show a spinner and disable the page while waiting for an ajax request.

到目前为止，我已使用以下代码成功完成了这一目标：

So far, I have successfully acomplished this goal with the following code:

HTML：

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="~/Images/ajax-loader.gif">
</div>

JS：

function blablabla() {
            //show spinner, disable page
            var modal = $('<div>').dialog({ modal: true });
            modal.dialog('widget').hide();
            $('#ajax_loader').show();

            $.ajax({
                type: "Get",
                url: url,
                success: function (result) {
                   alert("success! " + result);
                },
                error: function(result) {
                    alert("error!" + result);
                },
                complete: function () {
                    //back to normal!
                    $('#ajax_loader').hide();
                    modal.dialog('close');
                }
            });
        }

现在，此代码有效，我有页面禁用，我显示一个微调器。
然而，这个微调器也变灰了，我不希望这种情况发生。

Now, this code works, I have the page disabled and I show a spinner. However, this spinner is also grayed out, and I do not want that to happen.

如何防止此错误？

答

所以，之后长时间的搜索，我提出了自己的解决方案：

So, after a long search, I came up with my own solution:

这是带有旋转轮，进度条或任何你想要的模态。它位于名为_WaitModal的部分文件中

This is the modal with the spinning wheel, or progress bar, or anything you want to. It is in a partial file called "_WaitModal"

<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-header">
        <h1>Please Wait</h1>
    </div>
    <div class="modal-body">
        <div id="ajax_loader">
            <img src="~/Images/ajax-loader.gif" style="display: block; margin-left: auto; margin-right: auto;">
        </div>
    </div>
</div>

我使用 @ Html.Partial（_ WaitModal）在视图中集成它（但不显示它）。

I use @Html.Partial("_WaitModal") in the view to integrate it (but not show it).

然后，当我想要显示它时，我使用：

Then, when I want to show it, I use:

$('#pleaseWaitDialog').modal();

并隐藏它：

$('#pleaseWaitDialog').modal('hide');

我希望这对其他人也有帮助！

I hope this helps other people as well!

在等待ajax请求时显示微调器并禁用页面

相关推荐