The underlying architecture of web applications has always posed a problem with usability. Whenever a user performs an action on a page that requires a post back to the web server, data from all form fields is sent over the network, the page goes blank, and the browser sits in limbo waiting for the web server to send the response. In a typical ASP.NET scenario where a post back reloads the same page after the server processes the data, the speed of the application can be sacrificed because the entire page must reload each time it’s posted back.
Ajax is well-suited to providing a user experience that doesn’t suffer from such problems. When a page uses Ajax to post back to the server, only the applicable form data is sent to the server in a process known as a partial post back. After the server processes that data, it responds with data that the page uses to dynamically update the page as necessary. During this process, the page remains visible in the browser. The result is a user experience very much like a Windows application instead of a typical browser-based experience.
The technology that Ajax uses is called XMLHttp. XMLHttp is a standardized method of exchanging data between an application and a web server. Almost all browsers support XMLHttp, and the latest Opera mobile browser allows for support of Ajax functionality from mobile devices and smart phones.
Microsoft’s implementation of Ajax is called ASP.NET AJAX Framework. It includes the client-side AJAX (client-side libraries), server-side ASP.NET AJAX (the server-side controls that are available in the Expression Web 3 toolbox), and the ASP.NET AJAX Control Toolkit (a collection of Ajax controls complete with source code that you can use in any way).
Ajax is an acronym for Asynchronous JavaScript and XML.
The Microsoft client-side AJAX consists of client scripts and libraries that can be used to add Ajax functionality to any page. The client-side AJAX is the perfect choice, for example, for PHP developers who want to add Ajax functionality to a PHP application using Microsoft’s implementation. In fact, one of Microsoft’s employees has developed PHP for Microsoft client-side AJAX that does just that, and you can download it from codeplex.com/phpmsajax.
We’ll use the client-side AJAX in the “Using Client-side AJAX” section of this chapter, but I won’t go into great detail on it in this book. If you’re interested in reading more about it, read ASP.NET Ajax in Action from Manning. It’s an excellent book on Ajax.
The server-side AJAX consists of a series of .NET Framework assemblies (DLL files) that include not only server-side functionality, but also ASP.NET controls that make using Ajax in an ASP.NET page a drag-and-drop endeavor. The following Ajax controls are included with Expression Web 3:
• ScriptManager
—The ScriptManager
control is required on any web form that uses the AJAX Extensions. It provides the capability to dynamically include client-side scripts used in Ajax functionality.
Any web form that uses Ajax must have exactly one ScriptManager
control and it must appear above any control that uses Ajax; otherwise, an error will occur.
• ScriptManagerProxy
—The ScriptManagerProxy
control is used most often in content pages that use ASP.NET master pages. We’ll look at this control in more detail in the “Using Client-side AJAX” section later in this chapter.
The MediaPlayer
and Silverlight
controls are actually part of the Microsoft Silverlight 2.0 Software Developer’s Kit (SDK) and are not shipped with ASP.NET.
• Timer
—The Timer
control enables you to easily perform post backs of a page (both synchronous and asynchronous) at a regular interval.
• UpdatePanel
—The UpdatePanel
control is a container for any control on a web form that takes part in an Ajax partial post back. We’ll use an UpdatePanel
later in this chapter.
• UpdateProgress
—The UpdateProgress
control is designed to display a message or some other indicator when an UpdatePanel
is performing a partial post back.
• MediaPlayer
—The MediaPlayer
control lets you easily use Microsoft Silverlight to display video and audio in your site.
• Silverlight
—The Silverlight
control enables the insertion of Microsoft Silverlight.
The AJAX Control Toolkit (which can be viewed and downloaded from http://asp.net/ajax/ajaxcontroltoolkit/) is a set of Ajax controls Microsoft developed that include full source code. Microsoft released these controls to encourage developers to create their own Ajax controls using Microsoft’s server-side AJAX, and some of the coolest Ajax controls are included in the Toolkit.
Unfortunately, you cannot add controls from the AJAX Control Toolkit to the toolbox in Expression Web 3.
Developing new Ajax controls and extenders is an advanced programming topic, and Microsoft has provided plenty of excellent documentation on the AJAX Control Toolkit site.
Adding Ajax functionality to your ASP.NET page is much easier than you might think. Let’s create a simple ASP.NET page, and then we’ll modify the page to add Ajax functionality to it.
Let’s create a new site and page, and then add Ajax functionality to the page using the Microsoft AJAX Extensions:
1. Create a new one-page site at a file location on the local computer so you can preview pages using the Microsoft Expression Development Server.
2. Select File, New, Page and select ASPX from the list of page types.
3. Select C# as the language and click OK to create the page.
4. Make sure you are in Design View.
5. Add about 15 lines of text. Any text will suffice, such as text generated by the Lorem Ipsum generator at www.lipsum.com.
6. From the ASP.NET section of the toolbox, add a DropDownList
control under the text you added previously. Change the ID property of the DropDownList
control to drpMusicGroup
.
7. Change the AutoPostBack
property of the DropDownList
control to True
.
8. Add a new line under the DropDownList
control and add an ASP.NET Label
control. Change the ID property of the Label
control to lblDisplayGroup
.
9. Add a new line and add a new Label
control. Change the ID of the new Label
control to lblTime
.
10. Add 20 or so new lines so the text and controls scroll off the design surface.
Your page should now look like the one shown in Figure 31.1. Save the page as ajax.aspx
.
Next, you need to add some items to the DropDownList
control. Click the arrow button at the top of the DropDownList
control to display the DropDownList Tasks dialog; then click the Edit Items link as shown in Figure 31.2.
Click Add and add a few of your favorite music groups, as shown in Figure 31.3; then click OK to add the items.
Now that you’ve created a simple page, you need to add some server-side code to process the page when a new item is selected in the DropDownList
control. Switch to Code View and enter the code in Listing 31.1 directly above the opening <html>
tag.
We haven’t begun adding Ajax capability to this page. The purpose of this exercise is to show you how easily you can build a page and then add Ajax functionality to it.
This code is very simple. When the page loads, it displays the current date and time in the lblTime Label
control. It also includes code that will run when a new value is selected in the drpMusicGroup DropDownList
control. That code will change the lblDisplayGroup Label
control so that it displays the group name you’ve selected.
To make this page work, you’ll need to change the code for the drpMusicGroup
control to hook it up to the code you added to the page. To do that, be sure you’re in Code View and add the following to the opening <asp:DropDownList>
tag on the page:
OnSelectedIndexChanged="drpMusicGroup_SelectedIndexChanged"
After you’ve added that, the opening <asp:DropDownList>
tag should look like this:
You’re now ready to test the page without Ajax functionality. Save the page and preview it in your browser. When the page loads, scroll down so the drop-down is at the top of the page; then select a new group. When you do, you’ll notice a couple of things happening. First, the page will scroll back to the top when you select a new group; then, the date and time change in the lblTime Label
control. The reason for this is that the entire page is redrawn every time you select a different group.
Ajax is the perfect solution for a situation like this. By adding Ajax functionality to this page, you can update the lblDisplayGroup Label
control when a new group is selected without changing anything else on the page.
Only two steps are involved in making this page Ajax-enabled:
1. Add a ScriptManager
control to the page.
2. Add an UpdatePanel
control to the page and place the controls you want Ajax-enabled into the UpdatePanel
.
ScriptManager
ControlAs I mentioned earlier, any page that uses Microsoft’s server-side AJAX must have exactly one ScriptManager
control on the page. The ScriptManager
control also must be added to the page above any control that uses server-side AJAX; otherwise, an error will occur.
You can add your own scripts to the ScriptManager
control as well. We’ll cover the concept of adding scripts to the ScriptManager
in the “Using Client-side AJAX” section of this chapter.
AJAX uses the ScriptManager
control to load the necessary client scripts to support partial post backs, the process of posting only certain data back to the web server.
Let’s add a ScriptManager
control to the ajax.aspx
page:
1. Open the ajax.aspx
page if it’s not already open.
2. Add a new ScriptManager
control on the page directly above the drpMusicGroup
control. The ScriptManager
control will likely show a warning icon as shown in Figure 31.4. If you don’t already have a web.config
file that contains configuration information for the 3.5 .NET Framework, you’ll need to add one before you can use ASP.NET AJAX.
3. To add the necessary configuration information, click the asp:scriptmanager
link on the ScriptManager
control shown previously in Figure 31.4. Expression Web 3 will display a message informing you that you need to update or add a web.config
file to support the .NET Framework 3.5, as shown in Figure 31.5. Click Yes to add the necessary information to your site.
If you don’t have the .NET Framework 3.5 installed, Expression Web 3 will display a message with a link allowing you to download the 3.5 Framework.
4. Save the page.
Your page should now look similar to the one shown in Figure 31.6.
UpdatePanel
ControlThe UpdatePanel
control is an extremely powerful control. Any control placed within an UpdatePanel
control will automatically become an Ajax-enabled control. In the case of the ajax.aspx
page, we want the drpMusicGroup
and lblDisplayGroup
controls to be Ajax enabled so that when an item is selected in the drop-down, the label is updated to reflect the selected item via Ajax. Accomplishing this is going to be a lot easier than you might think.
You need to add a new UpdatePanel
control that contains both controls. To do that, add the UpdatePanel
; then cut and paste the controls into it:
1. Click to the right of the ScriptManager
control, and press Enter to insert a new line above the drpMusicGroup
control.
2. Add a new UpdatePanel
control from the AJAX Extensions section of the ASP.NET Toolbox.
If you don’t see the UpdatePanel control after inserting it, select View, Visual Aids, Show to turn on Visual Aids.
3. Select the drpMusicGroup
and the lblDisplayGroup
controls and select Edit, Cut to remove them and place them on the Windows Clipboard.
4. Click inside the new UpdatePanel
control and select Edit, Paste to paste the controls inside the UpdatePanel
control.
Believe it or not, you have just finished Ajax-enabling the page. If you preview the page in your browser and select an item in the drpMusicGroup
drop-down, the lblDisplayGroup
label will be populated with the appropriate group using ASP.NET AJAX. When that happens, you’ll notice that the page will no longer scroll to the top and the time that appears in the lblTime Label
control will reflect the time that the page was first loaded and not when you selected the group in the drop-down.
Client-side AJAX enables you to write client-side scripts that interact with your ASP.NET application. Suppose the code that runs when a new group is selected in the drpMusicGroup
drop-down might take several seconds to run and return a value. In such a scenario, displaying a message to the user is a good practice, and client-side AJAX lets you easily do that.
In this section, we’ll use client-side AJAX to display a status message while the Ajax request is executing.
You can use the UpdateProgress
control to display a message, but it’s a good idea to know how to take advantage of client-side AJAX in case you want a more customized solution.
<div>
to the Web FormYou’ll need to add a <div>
to the ajax.aspx
page. The <div>
will be used to display the status message.
Follow these steps to add the <div>
:
1. Open the ajax.aspx
page if it’s not already open.
2. Click to the right of the drpMusicGroup DropDownList
control, and press Enter to add a new line.
3. Add a new <div>
control to the new line from the Tags section in the HTML section of the Toolbox.
4. In the Tag Properties panel, change the id
property of the <div>
to WaitIndicator
.
The client library is a JavaScript file used to interact with the page during an Ajax partial post back. Follow these steps to create the client library:
1. Select File, New, Page to add a new file to the site.
2. Select JavaScript from the list of file types and click OK.
3. Select File, Save and save the JavaScript file as ClientLibrary.js
.
Now you must add the JavaScript that will update the <div>
you added earlier with a status message. Add the following JavaScript code to the ClientLibrary.js
file:
The first few lines of code add the event handlers that will fire when the Ajax request begins (the invokingRequest
event) and ends (the completedRequest
event). These lines use the Sys.Net.WebRequestManager
object, which is provided by client-side AJAX.
A detailed discussion of client-side AJAX is outside the scope of this book. For detailed information on using client-side AJAX, see www.asp.net/ajax/documentation/.
The App_InvokeRequest
and App_CompletedRequest
functions set the innerHTML
property of the <div>
you added earlier using the $get
method the client-side AJAX provides. The $get
method will return a reference to the control whose ID is passed to it.
After you’ve added the code to the ClientLibrary.js
file, save the file.
ScriptManager
ControlThe final step is to add the ClientLibrary.js
file to the ScriptManager
’s Scripts collection. As I mentioned earlier in this chapter, you can add your own client scripts to the ScriptManager
control. When you do, ASP.NET AJAX will load your scripts dynamically.
Follow these steps to add the ClientLibrary.js
script to the ScriptManager
’s Scripts collection:
1. Select the ScriptManager
control you added to the ajax.aspx
page earlier.
2. Click the ellipse button for the Scripts
property in the Tag Properties panel as shown in Figure 31.7.
3. Click the Add button in the ScriptReference Collection Editor.
4. Change the Path property of the new ScriptReference
to ClientLibrary.js
(see Figure 31.8).
5. Click OK and save the page.
When the ajax.aspx
page is browsed, the ScriptManager
will load the ClientLibrary.js
script.
If you browse to the page right now, the script we added will display a message that says Please wait...
while the Ajax request is being processed. However, because the Ajax request is almost instantaneous in our test page, we need to build in a delay so we can see the effect.
Open the ajax.aspx
page and add the following code to the Page_Load
event you added earlier:
if (IsPostBack) System.Threading.Thread.Sleep(7000);
After you add that code, the Page_Load
event will look like the following code:
This code will make the page wait seven seconds when the AJAX partial post back takes place, enabling you to see the Please wait... message. You can now save the page and preview it to see the status indicator displayed.
18.225.95.245