It has become a standard to disable a user to start another postback while the current is still running. I believe that you already know about Ajax loading indicators and that you use them to notify users that the postback is in the progress. But there are a few more options you could use.
First let's see the most common way to notify a user that the request is being processed, and that is to display Ajax loading indicator during postback.
1. Show Ajax loading indicator using UpdateProgress
At least what you can do is to visually notify users that the postback is being processed. To accomplish this you can use the UpdateProgress Ajax control. UpdateProgress will show its content during Ajax postback and hide it upon returning from server.
<asp:UpdateProgress ID="updProgress" runat="server" DynamicLayout="true" DisplayAfter="0">
<ProgressTemplate>
<asp:Image ID="imgIndicator" runat="server" ImageUrl="indicator.gif" />
</ProgressTemplate>
</asp:UpdateProgress> You can see the working example in the demo code.
2. Allow only one request at a time
However, users can initiate another postback even if you notify them that the current is in the process. So, somehow, you have to disable them to initiate another postback. One of the options you have is to cancel all other postback while other is in the progress. To do so, you'll have to hook on initializeRequest and to cancel the postback if another asynchronous postback is in the progress. Additionally you can show a message to a user, as in the example below.
function pageLoad()
{
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_initializeRequest(OnInitializeRequest);
manager.add_endRequest(OnEndRequest);
} function OnInitializeRequest(sender, args)
{
var manager = sender;
if (manager.get_isInAsyncPostBack() &&
args.get_postBackElement().id == "btnGo")
{
$get("notification").style.display = "inline";
args.set_cancel(true);
}
}
function OnEndRequest(sender, args)
{
$get("notification").style.display = "none";
}
For the full example, please download the source code.
3. Disable UI elements during Ajax postback
One more option that you can use is to disable element on forms during Ajax postback. This way you are sure no other postback can be initiated during an original postback. In the example below, we are disabling the element that caused a postback.
function pageLoad()
{
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_beginRequest(OnBeginRequest);
manager.add_endRequest(OnEndRequest);
}
var lcPostbackElementID;
function OnBeginRequest(sender, args)
{
lcPostbackElementID = args.get_postBackElement().id.toLowerCase();
if (lcPostbackElementID === "btngo")
{
$get("btnGo").disabled = true;
}
} function OnEndRequest(sender, args)
{
if (lcPostbackElementID === "btngo")
{
$get("btnGo").disabled = false;
}
}
The code above is quite simple. We disable the button in the BeginRequest handler and enable it again in EndRequest.
Conclusion
Personally, I prefer to disable an element that caused a postback (and even other elements on the web form that could start another request). This way I am sure that no action can be initiated and that users understand they can't click on disabled element. Beside this, I always show a loading indicator that visually notifies users that a request is in the progress. In order to see the examples, please download the source code.
There are few links where you can find very useful and customizable Ajax loading indicators and one article explaining how to create Gmail-like indicator:
Also be sure to check out the article Why my ASP.NET AJAX forms are never submitted twice by Dave Ward.