Friday, June 11, 2010

How to disable subsequent submit button clicks when a request is being processed in ASP.NET AJAX client side script code

During asynchronous postback e.g. a click of a button one may decide that until the current request completes user shall not be able to click the button.

In code snippet below I have displayed how we can achieve this. We have a Form on which we have Script Manager which contains the Update Panel. This Update Panel contains a Button and a UpdateProgress control. We need disable the subsequent clicks of this Button when a request is being processed in ASP.NET AJAX client script code.

In order to achieve the same

  1. I have used PageRequestManager and attached initializeRequest handler to CancelPostbackForSubsequentSubmitClicks
  2. In CancelPostbackForSubsequentSubmitClicks check if async postback is in progress using isInAsyncPostBack property of PageRequestManager and postback is generated by this Button then cancel this request
<%@ Page Title="Test Disable Subsequent Submit Clicks Page" Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="_Default" %>
<body>
<form id="Form1" runat="server" action="Default.aspx">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="AsynUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- Here on click is a long runnning operation e.g. 30 secs -->
<asp:Button ID="Submit" runat="server" OnClick="Submit_Click" Text="Submit" />
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="AsynUpdatePanel"
DynamicLayout="False">
<ProgressTemplate>
Update in Progress...</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</div>
 
<!-- Here we are blocking the subsequent requests using client side scripting -->
<!-- Also instead of alert one can customize the way he wants to handle -->
<script type="text/javascript" language="javascript">
var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_initializeRequest(CancelPostbackForSubsequentSubmitClicks);
 
function CancelPostbackForSubsequentSubmitClicks(sender, args) {
if (requestManager.get_isInAsyncPostBack() & args.get_postBackElement().id == 'Submit')
{
args.set_cancel(true);                
alert('A previous request is still in progress that was issued on clicking ' + args.get_postBackElement().id);
}
}
</script>
</form>
</body>
protected void Submit_Click(object sender, EventArgs e)
{
//A long running operation
System.Threading.Thread.Sleep(30000);
}

No comments:

Post a Comment