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

Question

I am working on asp.net page. This page has a search button and grid view inside an ajax update panel. Gridview has a button in each row which causes a post back. I want to show an overlay /loading image at the top of page when a search button is clicked before gridview is loaded/reloaded so that user can see that data is loading and user can not click search button again. I tried using ajax updateprogress but that is triggered when gridview row buttons are clicked. I want the overlay image to appear only on click of search button. Is there any Jquery plugin available for this functionality or we can customize ajax update progress control ?

Answer 1

You can include in your page the jQuery.blockUI plugin, it from the docs:

Lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

You activate it using:

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

and deactivate with:

$.unblockUI();

You can use it in two ways:

FIRST

Handle the beginRequest and endRequest events of the ms ajax PageRequestManager and use blockUI in these events.

Example code:

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

SECOND

You can bind and handle ajax global events fired when every ajax call starts, complete

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

I successfully used the second solution, but in your case using update panels you can give a try at first too.