Add one script inside body tag like below....
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'YourButtonID') {
$("#loadingImage").css('display', 'block');
$('#totalTable').css('opacity', '0.20');
$('#totalTable').css('filter', 'alpha(opacity=20)');
$('#totalTable').css('filter', '"alpha(opacity=20)"');
}
}
function EndRequest(sender, args) {
if (postBackElement.id == 'btnEdit') {
$("#loadingImage").css('display', 'none');
$('#totalTable').css('opacity', '1');
$('#totalTable').css('filter', 'alpha(opacity=100)');
$('#totalTable').css('filter', '"alpha(opacity=100)"');
}
}
</script>
Just replace "totalTable" with your table/div id which contains all page controls and "loadingImage" with the id of the image you have for loading.
Don't forget to replace "YourButtonID" with the id of the button causing the postback..
I have implemented this recently and it works also.
Refer link -
http://msdn.microsoft.com/en-us/library/bb386518.aspx[
^]