ASP.NET and AJAX

In this tutorial, we'll take a look at some of the things you can do with ASP.NET and AJAX in your web applications. It's more than just wrapping an UpdatePanel around some buttons, textboxes and grids!

Asynchronous JavaScript and XML

There are many caveats with arbitrarily dropping UpdatePanels onto webforms and hoping for the best.

Though this tutorial will focus primarily on other components besides the UpdatePanel, it might be useful to take a look at postback triggers as well. Wrapping some controls on a webform in an UpdatePanel is a cheap and cheerful way of implementing Ajax.

Postbacks caused by the web controls in the UpdatePanel should happen asynchronously and not cause an entire page postback. There are, however, many caveats with arbitrarily dropping UpdatePanels onto webforms and hoping for the best.

There are also situations in which one may want to conditionally cause a postback of the entire page, or perhaps just make one method call to a backend method or web service to update some small part of the page.

UpdatePanel

An UpdatePanel control specifies what regions of a page can be updated asynchronously.

Let's start by looking at a simple UpdatePanel control and some of the things it can do out of the box. The control specifies what regions of a page can be updated asynchronously, and thus not require an entire postback of the page.

Create a new ASP.NET Web Application project. To your default.aspx page, add a ScriptManager control, a TextBox control called txtOutsideUpdatePanel, and an UpdatePanel. Add a ContentTemplate to the UpdatePanel, and, within it, add a Button control called btnInsideUpdatePanel, and a TextBox control called txtInsideUpdatePanel. Below are the salient lines from the source view:

View the page in your web browser, and you should see two textboxes on the webform. The first textbox should have a date and time in it. If you refresh the page, the first textbox should update its date and time. Press the button, and only the second textbox should refresh its date and time. Thus the button is causing an asynchronous postbox, because it's within the UpdatePanel.

What we've done so far is the easy way of Ajax'ifying a webform. We could easily put an entire grid with paging support within the UpdatePanel for flicker-less paging.

Let's look at all this in a little more detail.

Controlling UpdatePanel Updates

We can control when the UpdatePanel control posts back based on events that occur to controls both inside and outside the panel itself. Here is the properties window:

There are three properties of interest to us at present:

UpdateMode: Always (default) or Conditional

ChildrenAsTriggers: True (default) or False

Triggers: A collection of controls - discussed further below

There are three valid combinations of UpdateMode and ChildrenAsTriggers:

Always =True UpdatePanel will refresh when the whole page refreshes, or when a child control posts back.

Always = False (invalid)

Conditional = True UpdatePanel will refresh when the whole page refreshes, or when a child control posts back, or a trigger from outside of the UpdatePanel causes a refresh.

Conditional = False UpdatePanel will refresh when the whole page refreshes, or a trigger outside of the UpdatePanel causes a refresh. A child control will not cause a refresh.

The next property we're interested in is the Triggers property, which comes in two flavours:

AsyncPostBackTrigger: Causes an asynchronous refresh of the UpdatePanel

PostBackTrigger: Causes a page postback by a child control of the UpdatePanel

Let's take a look at how these affect the functionality of the UpdatePanel. Paste the following code into a webform, and then the VB.Net code below that into the code-behind.

We have two buttons inside the panel and two buttons outside. We have wired up the triggers such that a button inside will cause a full page postback, and a button will cause an asynchronous refresh.

Clicking the Inner Time button will cause an asynchronous postback. This is expected, as the button is within the UpdatePanel. Clicking the Outer Time button will cause a full page postback. Again, this is expected, as the Outer Time button is outside the panel.

The two interesting cases are the PostBack trigger and Async Trigger buttons, to which we make reference in the triggers section of the UpdatePanel. When defining triggers, we need to specify the ControlID of the control acting as a trigger, and optionally the event for which the trigger should fire. If we omit the event, it will fire on the default event for that control.

Conditional UpdatePanel Updates

By setting the UpdateMode property of the UpdatePanel to Conditional, and ChildrenAsTriggers to False we can control when updates will be performed. An asynchronous postback will still be performed, but we can decide when to send the updated HTML content for that region of a page to the browser.

Clicking on the Inside UpdatePanel 1 button will cause an asynchronous postback to occur, but the UpdatePanelwon't be updated.

Clicking on the Inside UpdatePanel 2 button will cause an asynchronous postback to occur, and we are explicitly updating the panel.

Clicking on the Outside UpdatePanel will cause a normal full page postback.

Timers

We can cause postbacks to occur periodically by using an ASP.NET timer control. This is useful for any regions of a webform that needs live/current data to be visible, such as news feeds or live stock numbers. The Timer.Tick event is fired at an interval defined by the Interval property, which is in milliseconds. It is the Tick event that we can use to cause asynchronous or full page postbacks.

The way in which the timer control influences the panel can be controlled using the Triggers collection.

As a child control of the UpdatePanel, with no triggers defined: refreshes asynchronously on Timer.Tick

Outside, with no triggers defined: Entire page posts back on Timer.Tick

As a child control, with a PostBackTrigger defined: Entire page posts back on Timer.Tick

Outside, with an AsyncPostBackTrigger defined: UpdatePanel refreshes asynchronously on Timer.Tick

ASP.NET Ajax Client Library

When you add a ScriptManager control to a webform, it makes the ASP.NET Client Library JavaScript files available to the user's browser.

The JavaScript files are taken from the System.Web.Extensions assembly. Visual Studio's Intellisense will also pick up the functionality exposed by the client library at design time.

Add a ScriptManager to a webform, add a new <script> tag, type Sys. and you should see a whole host of new bits and pieces to play with. We'll look at some of the namespaces exposed below.

The examples consist mostly of JavaScript code, which belongs in a <script> tag.

Ajax Client Library Namespaces

Global Namespace

Sys

Sys.Net

Sys.Serialization

Sys.Services

Sys.UI

Sys.WebForms

Global Namespace

The client library provides us with some extensions to existing JavaScript objects. The extensions should make working with JavaScript objects feel a little more like working with managed code. We can also very easily extend existing JavaScript objects ourselves. In addition to extending the functionality of JavaScript objects, the client library also automatically wires up a number of events that we can very easily hook into.

Sys.Debug

We can use the Sys.Debug.trace() method to display messages in the debugger. This is useful if you want to avoid using alert() calls all over your pages. The debugger messages appear in the Output window in Visual Studio during a debugging session. So this means that you need to "run" the web project and visit the page, or attach to an existing w3p process.

In the piece of code below, we have a simple loop which causes a divide by zero, which might cause issues in subsequent calculations. By using trace(), we can print out the current value of the counter variable as the loop is running:

Remote Method Calls

If the user has a particularly large ViewState, this will cause a lot of extra overhead for both them and the webserver. The remote aspx page will go through nearly its complete lifecycle from loading through to unloading.

Now we'll take a look at making calls to specific remote methods. These exist entirely separate to the UpdatePanelcontrol, but they'll probably be used in conjunction in order to display the result of some method call.

When an asynchronous postback occurs within the control, a full postback of the page's ViewState is sent to the webserver. So if the user has a particularly large ViewState, this will cause a lot of extra overhead for both them and the webserver. In addition to the ViewState, the remote aspx page will go through nearly its complete lifecycle from loading through to unloading. We can interface with .NET 2.0 ASP.NET Web Services, .Net 4.0 WCF Services (which act like .Net 2.0 ASP.NET Web Services when using HTTP Transport anyway) and with ASP.NET WebForms PageMethods. We'll take a look at using PageMethods.

ASPX Page Methods

A Page Method is a public shared (static in C#) method defined in a webform decorated with System.Web.Services.WebMethod(). In addition to decorating your methods appropriately, your ScriptManager must have its EnablePageMethods property set to True. From there you should see the method available through the PageMethods proxy class in JavaScript.

Here is a very simple example of a call to managed code to perform a calculation. Paste the following into the source view of a webform:

You can see it's a very simple call to the Math.Log() method, but it's executed asynchronously without requiring a postback, and without the use of an UpdatePanel. Observe the PageMethods.CalculateLog() method call. It takes the two parameters required by the method in the code-behind. In the example above, the next parameter is the callback to execute upon successful completion of the method call, and the last parameter is the callback to execute when an error occurs.

A caveat on PageMethods however: If the class does not appear for you in the JavaScript, you can try a few things:

I'm a software developer from Ireland working with .Net (both VB.Net and C# with ASP.Net), Microsoft SQL Server I received the Microsoft MVP award in VB in 2005, am a published author on Visual Studio 2008 for McGraw Hill Professional, and regularly teach networking and software development