In this tutorial, we will be looking at how to use AJAX to make Asynchronous calls, and also how to manage those calls by disabling our button until the call completes. Often, if a user doesn't see near-immediate results when they make a request (click a button for example), that user will try to make the call again. This can cause problems, especially when using AJAX as the last call made will take precendence over any that are currently in progress. A good way to deal with this is to give the user visual feedback that their request is processing. This can be done with an UpdateProgress control, for example. But another way to do it is to disable the button whilst an Asynchronous request is being processed.
To demonstrate how to do this, we will create a small form with an UpdatePanel and a Button. The button will get the current time on the server, which will take only milliseconds to complete - too fast for us to demonstrate the button being disabled. For this example, we will slow the request down by making it sleep for 2 seconds before processing.
We start by building out our ASPX page. Let's add a ScriptManager and an UpdatePanel:
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<br /> |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
In our UpdatePanel, we are going to output the current Date and Time, and also include a Button to allow the user to update it:
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime" runat="server" Text="Get Current Time" OnClick="btn_GetTime_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<br /> |
Notice we have a handler for the Button's click event. This is where we are going to slow the process down. In the code-behind, we will add the following:
using System.Threading;
..
protected void btn_GetTime_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
} |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
All that is left to do is to disable the button during the Async PostBack. We will do this using JavaScript, as it will be executed in the browser and will be effective immediately. At the bottom of the page, we add the following script:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
function startRequest(sender, e) {
//disable button during the AJAX call
document.getElementById('<%=btn_GetTime.ClientID%>').disabled = true;
document.getElementById('<%=btn_GetTime.ClientID%>').value = 'Getting time..';
}
function endRequest(sender, e) {
//re-enable button once the AJAX call has completed
document.getElementById('<%=btn_GetTime.ClientID%>').disabled = false;
document.getElementById('<%=btn_GetTime.ClientID%>').value = 'Get Current Time';
} |
Here, we are calling a function on the start of an Async Request, and then another method on the end of the Request. These functions change the disabled value of the button, and also the text. Now when we run this application, we will be able to click the button to retrieve the current date and time, and display it to the page. We are also pausing the request for two seconds, so that we can see during the request that the button is disabled and the text is temporarily changed. When the request is complete, however, we re-enable the button and change the text back.
<script type="text/javascript">
var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest);
function instance_initializeRequest(sender, args) {
if (instance.get_isInAsyncPostBack()) {
alert('Still processing request. Please wait..');
args.set_cancel(true);
}
} |
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
The ASPX will look something like this:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime" runat="server" Text="Get Current Time" OnClick="btn_GetTime_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
</body>
</html>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
function startRequest(sender, e) {
//disable button during the AJAX call
document.getElementById('<%=btn_GetTime.ClientID%>').disabled = true;
document.getElementById('<%=btn_GetTime.ClientID%>').value = 'Getting time..';
}
function endRequest(sender, e) {
//re-enable button once the AJAX call has completed
document.getElementById('<%=btn_GetTime.ClientID%>').disabled = false;
document.getElementById('<%=btn_GetTime.ClientID%>').value = 'Get Current Time';
} |
