asp.net: cancel ajax.net request

In terms of usability, it was always considered good to give the user the opportunity to cancel his action if he does not intend to wait for a response that lasts longer. Ajax requests are no exception. In this short article I will show one of the options for how easy it is to give the user the opportunity to cancel a request in ajax.net, if it takes a long time to execute, or hangs for some reason.

AjaxControlToolkit. ajax- UpdatePanel.


First of all, using the AjaxControlToolkit components, we will declare the following code:

< asp: UpdateProgress ID = "upg1" runat = "server" AssociatedUpdatePanelID = "up1" DisplayAfter = "100" >
< ProgressTemplate >
< table style = "padding: 5px; border: solid 1px gray; background: yellow; font-size: 10px;
font-family: Verdana; " >
< tr >
< td >
< asp: Image ID = "Image1" runat = "server" ImageUrl = "~ / img / ctrls / p.gif" > </ asp: Image >
</ td >
< td >
Update, please wait ...   < input type = "button" id = "resetButton" onclick = "resetPostBack ()"
value = Cancel />
</ td >
</ tr >
</ table >
</ ProgressTemplate >
</ asp: UpdateProgress >
< cc1: AlwaysVisibleControlExtender ID = "UpdateProgress1_AlwaysVisibleControlExtender"
runat = "server" Enabled = "True" TargetControlID = "upg1" >
</ cc1: AlwaysVisibleControlExtender >
* This source code was highlighted with Source Code Highlighter .

Here, UpdatePanel up1 is declared extender, which serves to output information during an ajax request to the server. In turn, for the extender, another extender is declared, which displays the html code on top of the entire content. Please note that through the DisplayAfter property it is indicated how long it will take to render the html block.

. div, table , , , css. , , css-.


For the cancel button, we define the javascript-next function, which will perform the main work of canceling the request:




This code block can be placed on the page or put into an external file.

PageRequestManager.isInAsyncPostBack() MSDN : « , , PageRequestManager postback."


Now, with a long request, the user will be able to cancel the request with a simple and understandable action.