asp.net Ajax Primer Series (7): Programming UpdateProgress with Client script

In this article, we will use JavaScript to extend the UpdateProgress control using client-side behavior, and the client code will use the PageRequestManager in the ASP.net AJAX library, In the UpdateProgress control, a button is added to allow the user to cancel the asynchronous update and use client script to display or hide progress information.

A To cancel an asynchronous update with client script

1. Create a Web page and switch to Design view.

2. Double-click the ScriptManager, UpdatePanel, UpdateProgress control in the toolbox to add to the page. The following pages are added:

3. Add a Label control to the UpdatePanel control and set its Text property value to "Panel Rendered".

4. Add a button control and set its Text property value to "Refresh".

5. Add text processing to the UpdateProgress control ... and add a HtmlButton control and set its Text property to Cancle.

6. Double-click the Refresh control to add the Click event.

7. Add the following code in Buttond Click event Handling to artificially create a 3-second delay and display the current server's time.

protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}

8. Add the following script, get an instance of the current PageRequestManager class, and create a function call abortPostBack method to stop the asynchronous update.

<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
// -->
</script>

9. Set the HtmlButton click Attribute to Cancelasyncpostback.