In this tutorial, you will learn how to cancel an Asynchronous PostBack that is currently in progress. This is useful when a user has submitted a request to a web page that uses AJAX, and they can see that their request is pending - through the use of an UpdateProgress, for example - and they decide they want to cancel that request for whatever reason. We can make this a reality for users with a little JavaScript.
For this example, we will create one main UpdatePanel and then a nested UpdatePanel and an UpdateProgress. We should have something like this:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<asp:UpdatePanel ID="UP2" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UPr1" runat="server" AssociatedUpdatePanelID="UP2">
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel> |
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.
Now we will place a Literal in the second UpdatePanel, and also a Button:
<asp:UpdatePanel ID="UP2" runat="server">
<ContentTemplate>
<asp:Literal ID="lit_DateTime" runat="server" />
<br />
<asp:Button ID="btn_GetTime" runat="server" Text="Get Current Time" OnClick="btn_GetTime_Click" />
</ContentTemplate> |
Notice here that we add a handler to the Button Click event. We will also set the Date and Time on Page_Load, but only the first time it loads - not on PostBacks. The code-behind will look something like this:
using System;
using System.Threading;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
lit_DateTime.Text = DateTime.Now.ToString();
}
}
protected void btn_GetTime_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
lit_DateTime.Text = DateTime.Now.ToString();
} |
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!
On load and on button click we are simply displaying the current date and time in the Literal control. Also on the button click, we are putting it to sleep first, for 3 seconds, which will give us a chance to cancel the process before it's complete.
<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';
} |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
Now all that is left to do is to add the JavaScript to handle the cancellation of the Async PostBack. It is important to note that this method will not actually stop the Server from processing the request; it will only cause the Page Request Manager to ignore the response from the Server. With this in mind, if the Server is performing a lengthy process, it may be worth making a new Async call to explicitly halt that activity.
Add the following script to the bottom of the page. This will check to see if the Cancel button is the one making the call, and if so, will abort the pending PostBack.
<script type="text/javascript">
var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest);
function instance_initializeRequest(sender, args) {
if (args.get_postBackElement().id == 'btn_Cancel') {
instance.abortPostBack();
alert('Postback has been cancelled. Time will not be updated.');
}
} |
