Evjen c19.tex V2 - 01/28/2008 3:08pm Page 928 Chapter 19: ASP.NET AJAX < asp:Button ID="Button1" runat="server" Text="Click to initiate async request" OnClick="Button1_Click" / > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "Label1 was populated on " + DateTime.Now; Label2.Text = "Label2 was populated on " + DateTime.Now; } < /script > Now that both of the UpdatePanel controls are set to have an UpdateMode of Conditional , when running this page, you will see the results presented in Figure 19-15. Figure 19-15 In this case, only the right Label control, Label1 , was updated with the asynchronous request even though the Button1_Click() event tries to change the values of both Label1 and Label2 .Thereasonfor this is that the UpdatePanel2 control had no trigger that was met. Summary ASP.NET AJAX, although it is in its infancy, is an outstanding technology and will fundamentally change the way Web application development is approached. No longer do you need to completely tear down a page and rebuild it for each and every request. Instead, you are able to rebuild the pages slowly in sections as the end user requests them. The line between the thin-client world and the thick-client world just got a lot more opaque. This chapter took a look at the core foundation of ASP.NET AJAX that is available with the default install of Visual Studio 2008. Beyond that, there is much more. A big addition is the ASP.NET AJAX Control Toolkit, the focus of the next chapter. 928 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 929 ASP.NET AJAX Control Toolkit ASP.NET AJAX applications were introduced in the previous chapter. With the install of the .NET Framework 3.5 and through using Visual Studio 2008, you will find a few controls available that allow you to b uild ASP.NET applications w ith AJAX capabilities. This is the framework to take your applications to the next level because there is so much that can be accomplished with it, including adding specific AJAX capabilities to your user and custom server controls. Every AJAX enhance- ment added to your application will make your application seem more fluid and responsive to the end user. You might be wondering where the big new AJAX-enabled server controls are for this edition of Visual Studio 2008 if this is indeed a new world for building controls. The reason you do not see a new section of AJAX server controls is that Microsoft’s has treated them as an open-source project instead of just blending them into Visual Studio 2008. Developers at Microsoft and in the community have been working on a series of AJAX-capable server controls that you can use in your ASP.NET applications. These controls are collectively called the ASP.NET AJAX Control Toolkit. You will find a link to the control toolkit for download at www.asp.net/AJAX . When you choose to download the control toolkit from this page, you will be directed to the ASP.NET AJAX Control Toolkit’s page on CodePlex at www.codeplex.com/Release/ ProjectReleases.aspx?ProjectName=AtlasControlToolkit . This page is shown in Figure 20-1. Downloading and Installing Since the ASP.NET AJAX Control Toolkit is not part of the default install of Visual Studio 2008, you have to set up the controls yourself. Again, the control toolkit’s site on CodePlex offers a couple of options to you. First off, you are able to download a control toolkit that is specifically targeted at Visual Studio 2008 or Visual Studio 2005. This chapter focuses on using the control toolkit with Visual Studio 2008. Evjen c20.tex V2 - 01/28/2008 3:13pm Page 930 Chapter 20: ASP.NET AJAX Control Toolkit The CodePlex page for this project offers two ways to get what you are after. The ASP.NET AJAX Control Toolkit can be downloaded as source code or as a compiled DLL. Figure 20-1 The source control option allows you to take the code for the controls and ASP.NET AJAX extenders and change the behavior of the controls or extenders yourself. The DLL option is a single Visual Studio installer file and a sample application. There are a couple of parts to the install. One part provides a series of new controls that were built with AJAX capabilities in mind. Another part is a series of control extenders (extensions upon pre-existing controls). You will also find some new template additions for your Visual Studio 2008 instance. To get set up, download the .zip file from the CodePlex site and unzip it where you want on your machine. The following sections show you how to work with the various parts provided from the Control Toolkit. 930 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 931 Chapter 20: ASP.NET AJAX Control Toolkit New Visual Studio Templates Included in the download is a .vsi file (Visual Studio Installer) called AJAXControlExtender.vsi .This installer will install four new Visual Studio projects for your future use. The installer options are shown in Figure 20-2. Figure 20-2 After installing these options, you have access to the new project types this provides as illustrated in Figure 20-3. 931 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 932 Chapter 20: ASP.NET AJAX Control Toolkit Figure 20-3 Adding the New Controls to the VS2008 Toolbox In addition to new project types, you can also add the new controls to your Visual Studio 2008 Toolbox. To accomplish this task, right-click in the Toolbox and select Add Tab from the provided menu. Name the tab as you wish, though, for this example the tab was named AJAX Controls. With the new tab in your Toolbox, right-click the tab and select Choose Items from the provided menu. This action is illustrated in Figure 20-4. Select Choose Items from the menu to open the Choose Toolbox Items dialog. From here, you want to select AjaxControlToolkit.dll from the sample application’s Bin folder. Remember that the SampleWebSite is a component that was downloaded and unzipped as part of the Control Toolkit. When you find the DLL and click Open. The Choose Toolbox Items dialog changes to include the controls that are contained within this DLL. The controls are highlighted in the dialog and are already selected for you (as shown in Figure 20-5). From here, click OK and the ASP.NET AJAX Co ntrol Toolkit’s new controls will be added to your Visual Studio Toolbox. The end result is presented in Figure 20-6. You will find that there are more than 35 new controls and extenders added to the Toolbox for you to utilize in your ASP.NET applications. 932 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 933 Chapter 20: ASP.NET AJAX Control Toolkit Figure 20-4 Figure 20-5 933 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 934 Chapter 20: ASP.NET AJAX Control Toolkit Figure 20-6 The ASP.NET AJAX Controls The number of controls and extenders available from the Control Toolkit is large. As stated, there are more than 35 controls and extenders at your disposal. This section will look at these new items and how you can use them in your ASP.NET applications. When you add an ASP.NET AJAX server control to your page, one thing you will notice is that a number of DLLs focused on localization into a number o f languages have been added to the Bin folder of your 934 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 935 Chapter 20: ASP.NET AJAX Control Toolkit solution. All the resource files have been organized into language folders within the folder. An example of what you will find is presented in Figure 20-7. Figure 20-7 Looking at one of the DLLs with Lutz Roeder’s .NET Reflector tool ( www.aisto.com/roeder/dotnet/ ), you will notice that they are focused on the client-side localization required by many applications. As an example, the AjaxControlToolkit.resources.dll for the Russian language within Reflector is shown in Figure 20-8. In addition to the localization DLLs added to your project, the ASP.NET AJAX control is added just as any other custom server control in ASP.NET. Listing 20-1 shows what your ASP.NET page looks like after the addition of a single ASP.NET AJAX control to it. Listing 20-1: Changes to the ASP.NET page after adding an ASP.NET AJAX control < %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > Continued 935 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 936 Chapter 20: ASP.NET AJAX Control Toolkit < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > Untitled Page < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" / > < cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="TextBox1" > < /cc1:AlwaysVisibleControlExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < /div > < /form > < /body > < /html > Figure 20-8 In this example, you can see that the ASP.NET AJAX control is registered on the page using the @Register directive. This directive points to the AJAXControlToolkit assembly and gives all controls that use this assembly reference a tag prefix of cc1 , which is why you see the AlwaysVisibleControl- Extender control prefixed with a < cc1:[control name] >. 936 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 937 Chapter 20: ASP.NET AJAX Control Toolkit ASP.NET AJAX Control Toolkit Extenders The first set of items you look at includes the new extenders that are part of the ASP.NET AJAX Control Toolkit. Extenders are basically controls that reach out and extend other controls. For an example of this, you can think of the ASP.NET Validation Controls (covered in Chapter 4 of this book) as extender controls themselves. For instance, you can add a RequiredFieldValidator server control to a page and associate it to a TextBox control. This extends the TextBox control and changes its behavior. Normally it would just accept text. Now, if nothing is entered into the control, then the control will trigger an event back to the RequiredFieldValidator control whose client-side behavior is controlled by JavaScript. The ASP.NET AJAX Control T oolkit’s extenders pretty much accomplish the same thing. The controls extend the behavior of the ASP.NET server controls with additional JavaScript on the client as well as some server-side communications. The ASP.NET AJAX extender controls are built using the ASP.NET AJAX extensions framework. The next few pages focus on using these new extenders within your ASP.NET applications. AlwaysVisibleControlExtender The AlwaysVisibleControlExtender allows you to specify controls that will always be present on a long page that requires scrolling. With this control, you can specify a location of the page where the con- trol will always be present, no matter how the end user scrolls the page. Your options are to assign the vertical or horizontal alignment of the control that will always be visible. An example of using the AlwaysVisibleControlExtender is presented in Listing 20-2. Listing 20-2: Using the AlwaysVisibleControlExtender VB < %@ Page Language="VB" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Response.Write("The page has been submitted!") End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > AlwaysVisibleControlExtender < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" / > < cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" Continued 937 . 01/28/2008 3: 13pm Page 929 ASP. NET AJAX Control Toolkit ASP. NET AJAX applications were introduced in the previous chapter. With the install of the .NET Framework 3. 5 and through using Visual Studio. 3: 13pm Page 933 Chapter 20: ASP. NET AJAX Control Toolkit Figure 20-4 Figure 20 -5 933 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page 934 Chapter 20: ASP. NET AJAX Control Toolkit Figure 20-6 The ASP. NET. ASP. NET page looks like after the addition of a single ASP. NET AJAX control to it. Listing 20-1: Changes to the ASP. NET page after adding an ASP. NET AJAX control < %@ Page Language=" ;C#& quot;