Implement Web Forms by using ASP.NET AJAX

Using ASP.NET AJAX provides the following benefits:

  • Improved efficiency, since a massive amount of processing occurs in the browser
  • Familiar UI elements
  • Partial-page rendering
  • Client integration of ASP.NET services, such as authentication, roles, profiles
  • Auto-generated proxy classes for web services called from client script
  • Extendible controls with client functionality
  • Browser compatibility

 

ScriptManager

The very first step of enabling ASP.NET AJAX for your web page is to create a ScriptManager class on it. With a ScriptManager instance on your page, you will be able to gain the benefits mentioned above. There are four main scenarios when you want to include the ScriptManager control to your page:

  • Calling web services from client script
  • Use the ASP.NET profile, authentication and roles services from client code
  • Enable partial-page rendering
  • Use the Microsoft AJAX Library

 

The most common use of a ScriptManager is to enable partial-page rendering. This process is easy: you add a ScriptManager control to your page, and then an UpdatePanel which handles then rendering for the controls inside it. You can turn off partial-page rendering by setting the ScriptManager control’s EnablePartialRendering property to false.

When an error occurs during partial posbacks, you should use the ScriptManager control’s AsyncPostbackError event. The error message lives within the AsyncPostbackErrorMessage property.

Another benefit of the ScriptManager control is the ability to register client scripts to participate in partial-page postbacks. You can add your scripts inside the Scripts element of the ScriptManager, each script to a ScriptReference object.

ScriptManagerProxy

 

Each web page can have exactly one ScriptManager. However, there might be cases when you have a ScriptManager control on your page, but can’t reach it (because it is in a master page for example), and you need to define custom scripts or services for your given page. Simply add a ScriptManagerProxy control to your page to solve these issues.

Partial-Page Rendering and the UpdatePanel

To use partial-page rendering, you should place a ScriptManager on your form, and an UpdatePanel too. Within the UpdatePanel lives ContentTemplate in which you can declare your controls you want to update independently from your page. The default behavior is that postbacks originating from controls inside an UpdatePanel trigger asynchronous postbacks for the panel. You can override this behavior by setting the ChildrenAsTriggers or the UpdateMode property, or by defining triggers.

  • ChildrenAsTriggers: set it to true if you’d like that immediate controls of your UpdatePanel perform asynchronous postbacks when they trigger a postback. The default is true. Note that controls in nested UpdatePanels won’t trigger a postback for the (main) parent UpdatePanel.
  • If an UpdatePanel control is inside an other UpdatePanel, it will be updated when the parent UpdatePanel posts back. If it isn’t, the updates occur as set in the ChildrenAsTriggers and the UpdateMode. UpdateMode has the following values:
    • Always: as the name implies, the UpdatePanel’s content will be updated if a postback occur anywhere on the page.
    • Conditional: this leaves three options. You call the Update methode programmatically for the panel. Or you define triggers for it. Lastly, you set the ChildrenAsTriggers property to true.
  • Define triggers if you’d like to define that on exactly which control’s which event should trigger an update in your UpdatePanel. You must set the control property. If you won’t set the event, the control’s default event will be used. There are two types of triggers you can set:
    • AsyncPostbackTrigger is used in three scenarios: first, when the control is outside the UpdatePanel. Second, when the control is inside the panel, but the ChildernAsTriggers property is set to false. And third, when the control is inside a nested UpdatePanel.
    • PostbackTriggers are used to enable a control which is inside an UpdatePanel to perform a full postback instead of an asynchronous one.

 

UpdateProgress

With the using of UpdateProgress you can display information during a partial-page updating. This increases the responsiveness of your application (and with it the UX). For example, you can include a loading gif image to indicate that there is work in progress.

UpdateProgress is a template controls, you can define anything inside it. To use an UpdateProgress with a specific UpdatePanel, you should associate them. To do so, set the UpdateProgress’ AssociatedUpdatePanelID property to the ID of the panel. If you won’t do so, your progress will be shown for every asynchronous update in your page. You can also place your UpdateProgress control inside of an UpdatePanel. It will always display the progress when the parent UpdatePanel updates. You can set up a delay with the DisplayAfter property of the progress before showing it.

UpdateProgress can even abort the asynchronous postbacks. To do so, use the PageRequestManager’s isInAsyncProgress property and the abortPostback method. For example:

<UpdateProgress runat=”server” ID=”Progress1”>
    <ProgressTemplate>
         Update in progress
         <input type=”button” value=”Abort” onclick=”AbortPostback()”/>
    </ProgressTemplate>
</UpdateProgress>

And the javascript code:

function AbortPostback()
{
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if(prm.get_isInAsyncPostback()) {
       prm.abortPostback();
    }
}

Timer

 

The Timer control lets you specify an interval for updating UpdatePanels. The Timer raises a Tick event which you can handle programmatically. To associate a Timer with an UpdatePanel simply place the Timer inside of it.

Further Readings

ScriptManager Control

ScriptManager Proxy

UpdateProgress

ASP.NET AJAX Overview

Timer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s