32.6. Rich Client-Side Development
In the last couple of years the software industry has seen a fundamental shift toward emphasizing the importance of the end-user experience in application development. Nowhere has that been more apparent than in the development of web applications. Fueled by technologies such as AJAX and an increased appreciation of JavaScript, we are now expected to provide web applications that approach the richness of their desktop equivalents.
Microsoft has certainly recognized this and has released a range of tools and enhancements in Visual Studio 2008 that support the creation of rich client-side interactions. There is now integrated debugging and IntelliSense support for JavaScript. ASP.NET AJAX, previously available only as a separate download, is shipped with Visual Studio 2008, and there is support in the IDE for AJAX Control Extenders. These tools make it much easier for you to design, build, and debug client-side code that provides a much richer user experience.
32.6.1. Developing with JavaScript
Writing JavaScript client code has long had a reputation for being difficult, even though the language itself is quite simple. Because JavaScript is a dynamic, loosely-typed programming language — very different from the strong typing enforced by Visual Basic and C# — JavaScript's reputation is even worse in some .NET developer circles.
Thus, one of the most anticipated new features of Visual Studio 2008 is IntelliSense support for JavaScript. You will notice the IntelliSense beginning immediately as you start typing, with prompts for native JavaScript functions and keywords such as var, alert, and eval.
Furthermore, the JavaScript IntelliSense in Visual Studio 2008 automatically evaluates and infers variable types to provide more accurate IntelliSense prompts. For example, in Figure 32-36 you can see that IntelliSense has determined that optSelected is an HTML object, as a call to the document.getElementByID function will return that type.
Figure 32.36. Figure 32-36
In addition to displaying IntelliSense within web forms, Visual Studio also supports IntelliSense in external JavaScript files. It will also provide IntelliSense help for referenced script files and libraries, such as the Microsoft AJAX library.
Microsoft has extended the XML commenting system in Visual Studio to recognize comments on JavaScript functions. IntelliSense will detect these XML code comments and display the summary, parameters, and return type information for the function.
A couple of limitations could prevent the JavaScript IntelliSense from displaying information in certain circumstances, including:
A syntax or other error in an external referenced script file
Invoking a browser-specific function or object. Most web browsers provide a set of objects that is proprietary to that browser. You can still use these objects, and in fact many popular JavaScript frameworks do; however, you won't get IntelliSense support for them.
Referencing files that are outside the current project
XML comments in the current document. Only XML comment data from external referenced script files will be displayed.
Visual Studio will constantly monitor changes to files in the project and update the IntelliSense as they happen. If for some reason you find that Visual Studio isn't displaying the latest information, you can force it to update the IntelliSense by selecting Edit 
IntelliSense 
Update JScript IntelliSense.
The new JavaScript IntelliSense, combined with the improved client-side debugging support, will significantly reduce the difficulty of developing JavaScript code with Visual Studio 2008.
32.6.2. Working with ASP.NET AJAX
Microsoft ASP.NET AJAX, which was previously available only as a separate download, now ships with Visual Studio 2008. The ASP.NET AJAX framework provides web developers with a familiar server-control programming approach for building rich client-side AJAX interactions.
ASP.NET AJAX includes both server-side and client-side components. A set of server controls, including the popular UpdatePanel and UpdateProgess controls, can be added to web forms to enable asynchronous partial-page updates without your needing to make changes to any existing code on the page. The client-side Microsoft AJAX Library is a JavaScript framework that can be used in any web application, such as PHP on Apache, and not just ASP.NET or IIS.
The following walkthrough will demonstrate how to enhance an existing web page by adding the ASP.NET AJAX UpdatePanel control to perform a partial-page update. In this scenario we have a very simple web form with a DropDownList server control, which has an AutoPostBack to the server enabled. The web form handles the DropDownList.SelectedIndexChanged event and saves the value that was selected in the DropDownList to a TextBox server control on the page. The code listing for this page is as follows:
AjaxSampleForm.aspx <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="AjaxSampleForm.aspx.vb" Inherits="ASPNetWebApp.AjaxSampleForm" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ASP.NET AJAX Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Select an option:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem Text="Option 1" Value="Option 1" />
<asp:ListItem Text="Option 2" Value="Option 2" />
<asp:ListItem Text="Option 3" Value="Option 3" />
</asp:DropDownList>
<br />
Option selected:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
AjaxSampleForm.aspx.vb
Public Partial Class AjaxSampleForm
Inherits System.Web.UI.Page
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, _
ByVal e As EventArgs) _
Handles DropDownList1.SelectedIndexChanged
System.Threading.Thread.Sleep(2000);
Me.TextBox1.Text = Me.DropDownList1.SelectedValue
End Sub
End ClassNotice that in the DropDownList1_SelectedIndexChanged method we have added a statement to sleep for two seconds. This will exaggerate the server processing time, thereby making it easier to see the effect of the changes we will make. When you run this page and change an option in the drop-down list, the whole page will be refreshed in the browser.
The first AJAX control that you need to add to your web page is a ScriptManager. This is a nonvisual control that's central to ASP.NET AJAX and is responsible for tasks such as sending script libraries and files to the client and generating any required client proxy classes. You can have only one ScriptManager control per ASP.NET web page, which can pose a problem when you're using master pages and user controls. In that case, you should add the ScriptManager to the topmost parent page, and a ScriptManagerProxy control to all child pages.
After you add the ScriptManager control, you can add any other ASP.NET AJAX controls. In this case add an UpdatePanel control to the web page, as shown in the following listing. Notice that TextBox1 is now contained within the new UpdatePanel control.
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="AjaxSampleForm.aspx.vb"
Inherits="ASPNetWebApp.AjaxSampleForm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ASP.NET AJAX Sample</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server"></asp:ScriptManager>
<div>
Select an option:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem Text="Option 1" Value="Option 1" />
<asp:ListItem Text="Option 2" Value="Option 2" />
<asp:ListItem Text="Option 3" Value="Option 3" />
</asp:DropDownList>
<br />
Option selected:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>The web page now uses AJAX to provide a partial-page update. When you now run this page and change an option in the drop-down list, the whole page is no longer refreshed. Instead just the text within the textbox is updated. In fact, if you run this page you will notice that AJAX is too good at just updating part of the page. There is no feedback and if you didn't know any better you would think that nothing is happening. This is where the UpdateProgress control becomes useful. You can place an UpdateProgress control on the page, and when an AJAX request is invoked the HTML within the ProgressTemplate section of the control is rendered. The following listing shows an example of an UpdateProgress control for our web form.
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>The final server control in ASP.NET AJAX that hasn't been mentioned is the Timer control, which enables you to perform asynchronous or synchronous client-side postbacks at a defined interval. This can be useful for scenarios such as checking with the server to see if a value has changed.
Once you have added some basic AJAX functionality to your web application, you can further improve the client user experience by adding one or more elements from the AJAX Control Toolkit, which is discussed in the following section.
32.6.3. Using AJAX Control Extenders
AJAX Control Extenders provide a way to add AJAX functionality to a standard ASP.NET server control. The best-known set of control extenders is the AJAX Control Toolkit, a free open-source library of client behaviors that includes almost 40 control extenders. These either provide enhancements to existing ASP.NET web controls or provide completely new rich client UI elements. Figure 32-37 shows a Calendar Extender that has been attached to a TextBox control.
Figure 32.37. Figure 32-37
The ASP.NET AJAX Control Toolkit is available for download via a link from http://www.asp.net/ajax/ajaxcontroltoolkit. The download includes a sample web site that demonstrates the controls. Within the /bin directory of the sample web site is an assembly called AjaxControlToolkit.dll. Copy this to a directory where you won't accidentally delete it.
The download includes a Visual Studio Installer (VSI) file that contains templates for creating new AJAX Server Controls and AJAX Server Control Extenders. These templates are included by default in Visual Studio 2008 Professional Edition.
To add the controls to the Visual Studio Control Toolbox, you should first create a new tab to house them. Right-click anywhere in the Toolbox window, choose Add Tab, and then rename the new tab something meaningful, such as AJAX Control Toolkit. Next, drag and drop AjaxControlToolkit.dll onto the new Control Toolbox tab. After a few moments the tab will be populated with all the controls in the AJAX Control Toolkit.
Visual Studio 2008 provides designer support for any AJAX Control Extenders, including the AJAX Control Toolkit. Once you have added the controls to the Toolbox, Visual Studio will add an entry to the smart-tag Tasks list of any web controls with extenders, as shown in Figure 32-38.
Figure 32.38. Figure 32-38
When you select the Add Extender task it will launch the Extender Wizard, shown in Figure 32-39. Choose an extender from the list and click "OK" to add it to your web form. In most cases the Extender Wizard will also automatically add a reference to the AJAX Control Toolkit library. However, if it does not you can manually add a binary reference to the AjaxControlToolkit.dll assembly.
As the Extender Controls are built on top of ASP.NET AJAX, you will need to ensure that a ScriptManager control is on your web form.
Figure 32.39. Figure 32-39
As shown in Figure 32-40, Visual Studio 2008 includes all the properties for the control extender in the property grid, under the control to which the extender is attached.
Figure 32.40. Figure 32-40
Since the AJAX Control Toolkit is open-source, you can customize or further enhance any of the control extenders it includes. Visual Studio 2008 also ships with Visual Basic and C# project templates to create your own AJAX Control Extenders and ASP.NET AJAX Controls. This makes it easy to build rich web applications with UI functionality that can be easily reused across your web pages and projects.