Question

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

Answer 1

您可以在页面中添加jQuery.blockUI插件，来自文档：

让您在使用AJAX时模拟同步行为锁定浏览器。激活后，它将阻止用户活动与页面（或页面的一部分），直到它被停用。 BlockUI 向DOM添加元素以赋予其外观和行为阻止用户交互。

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

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

并停用：

$.unblockUI();

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

第一

处理ms ajax beginRequest的{{1}}和endRequest事件，并在这些事件中使用blockUI。

示例代码：

PageRequestManager

第二个

您可以绑定并处理每个ajax调用启动时触发的ajax global events，完成

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();
}

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

单击按钮显示叠加/加载图像

1 个答案:

第一

第二个