0

我正在处理 asp.net 页面。此页面在 ajax 更新面板内有一个搜索按钮和网格视图。Gridview 在每一行都有一个按钮，它会导致回发。我想在加载/重新加载gridview之前单击搜索按钮时在页面顶部显示覆盖/加载图像，以便用户可以看到数据正在加载并且用户不能再次单击搜索按钮。我尝试使用 ajax updateprogress ，但是当单击 gridview 行按钮时触发。我希望叠加图像仅在单击搜索按钮时出现。是否有任何可用于此功能的 Jquery 插件，或者我们可以自定义 ajax 更新进度控制？

4

1 回答 1

1

您可以在页面中包含jQuery.blockUI插件，它来自文档：

允许您在使用 AJAX 时模拟同步行为，而无需锁定浏览器。激活后，它将阻止用户对页面（或页面的一部分）进行活动，直到它被停用。BlockUI 将元素添加到 DOM 以使其具有阻止用户交互的外观和行为。

您可以使用以下方式激活它：

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

并通过以下方式停用：

$.unblockUI();

您可以通过两种方式使用它：

第一的

处理ms ajax的beginRequest和事件，并在这些事件中使用 blockUI。endRequestPageRequestManager

示例代码：

Sys.WebForms.PageRequestManager.instance.add_beginRequest(beginRequestHandler);
Sys.WebForms.PageRequestManager.instance.add_endRequest(endRequestHandler);

function beginRequestHandler(sender, args){
    $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
}

function endRequestHandler(sender, args){
    $.unblockUI();
}

第二

您可以在每个 ajax 调用开始时绑定和处理ajax global events触发，完成

$(document).bind("ajaxStart", function() {
    $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
}).bind("ajaxStop", function() {
    $.unblockUI();
});

我成功地使用了第二种解决方案，但在您使用更新面板的情况下，您也可以先尝试一下。

于 2013-06-07T06:49:58.590 回答