Take a Practice Test CHAPTER 5 295 Customize a Web Page by Using Themes and User Profi les For this task, you should complete at least Practices 1 and 2. If you want in-depth knowledge of how themes affect controls, complete Practice 3 as well. n Practice 1 Using a copy of the last Web application you created, add a theme to confi gure all controls with consistent colors. n Practice 2 Add authenticated user profi les to the last Web application you created. For example, you might use the user profi le to track recent database queries and en- able the user to select from a list of recent requests. n Practice 3 Create a custom control and experiment with setting the attributes using themes. Implement Web Parts in a Web Application For this task, you should complete all three practices to gain experience using Web Parts. n Practice 1 Using the Web Parts page you created in the Lesson 3 exercises, open the Web page using a non-Microsoft browser. Notice how ASP.NET renders the Web Part controls differently. n Practice 2 Using the Web Parts page you created in Lesson 3, Exercise 3, expand the connected control capabilities so that the user’s name is stored persistently. n Practice 3 Using the Web Parts page you created in Lesson 3, Exercise 3, remove the static connections from Default.aspx. Then add a ConnectionsZone control to the page. View the page and use the ConnectionsZone control to manually establish the connec- tions among the GetName, GreetUser, and ShowNameBackwards controls. Take a Practice Test The practice tests on this book’s companion CD offer many options. For example, you can test yourself on just the content covered in this chapter, or you can test yourself on all the 70-562 certifi cation exam content. You can set up the test so it closely simulates the experience of taking a certifi cation exam, or you can set it up in study mode so you can look at the correct answers and explanations after you answer each question. MORE INFO PRACTICE TESTS For details about all the practice test options available, see the “How to Use the Practice Tests” section in this book’s Introduction. MORE INFO PRACTICE TESTS For details about all the practice test options available, see the “How to Use the Practice Tests” section in this book’s Introduction. CHAPTER 6 297 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting W eb applications are becoming more and more interactive and dynamic as the tech- nology used to create them evolves. The latest generation of Web applications, often loosely referred to as Web 2.0, involve user interface (UI) enhancements that include func- tionality that was previously reserved for applications running on the desktop. This includes things like modal dialog boxes and pop-ups, partial screen (or page) updates, dynamically collapsing or sizing controls on a page, indicating application progress, and more. As these paradigms are adopted by some major Web applications, users are now demanding this same level of functionality on many more sites. This means the tools need to catch up with the demand. The latest version of ASP.NET includes tools for building Web applications that provide this level of support. This includes controls for handling client-based interactivity, a rich library for working with client-side JavaScript, and a programming model for creating your own JavaScript-enabled controls. This chapter covers these scenarios and shows how you can enhance users’ experiences with your Web applications. Exam objectives in this chapter: n Working with ASP.NET AJAX and Client-Side Scripting n Implement Web Forms by using ASP.NET AJAX. n Interact with the ASP.NET AJAX client-side library. n Create and register client script. Lessons in this chapter: n Creating AJAX-Enabled Web Forms 299 n Creating Client Scripts with the AJAX Client-Side Library 316 2 9 8 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting Before You Begin To complete the lessons in the chapter, you should be familiar with developing applications with Microsoft Visual Studio using Microsoft Visual Basic or C#. In addition, you should be comfortable with all of the following: n The Visual Studio 2008 Integrated Development Environment (IDE). n The basics of the JavaScript programming language and Dynamic HTML (DHTML). n A basic understanding of Hypertext Markup Language (HTML) and client-side scripting with the JavaScript language. n How to create a new Web site. n Building a Web form by adding Web server controls to a Web page and programming against them on the server. REAL WORLD Mike Snell I am fortunate enough to have been around when building Web applications fi rst came into vogue. The early applications we built were nothing more than hyper- linked HTML and images. We quickly added server-side script and database connec- tivity to enable more meaningful scenarios. The power of having a server-based, near-zero deployment, ubiquitous, cross- platform application environment has been (and still is) the driving force that pushes us to build Web applications. There has always been, however, a major gap with respect to the richness of the UI between a fat and a thin client. We’ve seen many attempts at closing this gap including Java, ActiveX, ActiveX Documents, DHTML, and others. It remains to be seen if this gap will ever really be closed. However, AJAX does pro- vide a nice compromise between a rich client and a Web-only application. It extends what is capable on the client without breaking the paradigm of a Web application. AJAX is rooted in the Web and, like its counterparts such as HTML and DHTML, it is standards-driven, cross-platform, and ubiquitous. This makes it a great choice for adding client interactivity to applications that must remain true to the concept of a Web site. REAL WORLD Mike Snell I am fortunate enough to have been around when building Web applications fi rst came into vogue. The early applications we built were nothing more than hyper- linked HTML and images. We quickly added server-side script and database connec- tivity to enable more meaningful scenarios. The power of having a server-based, near-zero deployment, ubiquitous, cross- platform application environment has been (and still is) the driving force that pushes us to build Web applications. There has always been, however, a major gap with respect to the richness of the UI between a fat and a thin client. We’ve seen many attempts at closing this gap including Java, ActiveX, ActiveX Documents, DHTML, and others. It remains to be seen if this gap will ever really be closed. However, AJAX does pro- vide a nice compromise between a rich client and a Web-only application. It extends what is capable on the client without breaking the paradigm of a Web application. AJAX is rooted in the Web and, like its counterparts such as HTML and DHTML, it is standards-driven, cross-platform, and ubiquitous. This makes it a great choice for adding client interactivity to applications that must remain true to the concept of a Web site. Lesson 1: Creating AJAX-Enabled Web Forms CHAPTER 6 299 Lesson 1: Creating AJAX-Enabled Web Forms Much of the increased client interactivity of Web 2.0 applications is provided by Asynchro- nous JavaScript and XML (AJAX). AJAX is a platform-independent technology that works with Web applications running inside Microsoft Internet Explorer, Firefox, Safari, and more. It is an ECMAScript-compliant technology. Therefore, it makes a logical choice for providing a richer UI for browser-based, cross-platform Web applications. You can add AJAX to any Web application. Like other Web standards such as HTML, it is not specifi c to ASP.NET. However, ASP.NET does provide a number of items that make build- ing AJAX-enabled Web forms easier. This includes controls to manage partial-page updates, a code library that enables object-oriented development on the client with JavaScript, the ability to call Web services from client code, the ability to create your own AJAX-enabled controls, and more. This lesson covers building interactive Web forms using the AJAX controls built into ASP. NET. The JavaScript object library and building AJAX-enabled controls are covered in Lesson 2 of this chapter. After this lesson, you will be able to: n Understand and use the AJAX Extension controls built into ASP.NET. n Create a Web form that performs partial-page updates to the server (without a full-page refresh). n Display the progress of a request processing on the server. n Periodically update portions of a Web form based on a time interval. Estimated lesson time: 45 minutes Introducing ASP.NET AJAX There are many pieces that are part of (or related to) ASP.NET that are meant to enable AJAX features for developers. These items center on a common goal: improving user experiences by providing capabilities to create a more responsive Web application. These capabilities are many. Choosing the appropriate approach is dependent on your specifi c need. The following are the ASP.NET components related to AJAX capabilities: n Microsoft AJAX Library The Microsoft AJAX Library is a set of JavaScript fi les that make programming client-side JavaScript easier. It provides an object-oriented model to the AJAX scripting language. This includes support for classes, namespaces, event handling, data types, and more. The library also has support for error handling, debug- ging, and globalization. After this lesson, you will be able to: n Understand and use the AJAX Extension controls built into ASP.NET. n Create a Web form that performs partial-page updates to the server (without a full-page refresh). n Display the progress of a request processing on the server. n Periodically update portions of a Web form based on a time interval. Estimated lesson time: 45 minutes Estimated lesson time: 45 minutes 3 0 0 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting The library combines JavaScript features and DHTML. Like JavaScript, it works across browsers and across platforms. This library is used by ASP.NET and the AJAX Control Toolkit. However, you can also leverage this library to extend your own controls with AJAX behaviors. n ASP.NET AJAX server controls ASP.NET ships with a set of AJAX server controls that can be embedded in your Web pages to enable partial-page updates, communicate with a server process to indicate progress, and periodically update portions of a page. n AJAX Control Toolkit The AJAX Control Toolkit is a set of community-created and supported controls that show off the power of AJAX. These controls can be used in your Web pages to enable many client-side features typically reserved for applications running on the desktop, such as masked edit boxes, slider controls, fi ltered text boxes, modal pop-ups, and much more. NOTE AJAX CONTROL TOOLKIT The AJAX Control Toolkit is an extension to Visual Studio and ASP.NET. It is therefore not covered in this book or on the exam. You can learn more by visiting http://www.asp .net/ajax/. n Client-side web service support ASP.NET provides support for calling Web services asynchronously from the client using JavaScript Object Notation (JSON) serialization and XML. NOTE USING AJAX TO CALL A WEB SERVICE AJAX can be used to call a Web service from a client. This functionality is covered in Chapter 9, “Writing and Working with Services.” Uses and Benefi ts of ASP.NET AJAX The features built into ASP.NET AJAX provide a richer user experience than that of a standard, all server-side Web application. In addition, these features make programming AJAX a much easier task. As with any new technology, these benefi ts might not be readily apparent at fi rst glance. The following lists some of the key usage scenarios and related benefi ts of building Web applications with ASP.NET AJAX. n Partial-page updates This feature allows you to defi ne an area of a page that should PostBack and update by itself. The rest of the page does get refreshed when the re- quest fi nishes. This ensures the user stays in the context of the page and provides the user with the feeling he or she never left the application. n Client-side processing This interactivity provides immediate feedback and respon- siveness to users. With client script you can enable things like collapsible areas of a page, tabs on a Web page, sorting of data on the client, and much more. NOTE AJAX CONTROL TOOLKIT The AJAX Control Toolkit is an extension to Visual Studio and ASP.NET. It is therefore not covered in this book or on the exam. You can learn more by visiting http://www.asp .net/ajax/ .net/ajax/ net/ajax/ NOTE USING AJAX TO CALL A WEB SERVICE AJAX can be used to call a Web service from a client. This functionality is covered in Chapter 9, “Writing and Working with Services.” Lesson 1: Creating AJAX-Enabled Web Forms CHAPTER 6 301 n Desktop-like UI With AJAX, you can provide users with things like modal dialog boxes, progress indicators, masked edit boxes, ToolTips, and more. This helps blur the line between Web and rich desktop applications. n Progress indication This allows you to track the progress of a server-side process and continuously update the user. This gives users the feeling that they are in control and the application is still processing (much like a desktop application). n Improved performance and higher scale You get increased performance and scale by processing portions of a page on the client. You then leverage the user’s machine, which takes load off the server. This results in a real and perceived performance in- crease. n Web service calls from the client This allows you to call back to the server directly from client script running in a browser and then show the results. n Cross-browser cross-platform support This feature allows you to maintain the benefits of a Web site in terms of its ability to run in more client environments than the average desktop application. The AJAX Server Controls The controls that ship with ASP.NET are meant to provide two basic AJAX features: partial- page updates and client-to-server progress updates. You work with these controls in a similar manner as other ASP.NET controls. You can drag them onto your page from the Toolbox, manipulate their properties, and code against them. Figure 6-1 shows a model of the AJAX Extension controls in ASP.NET. FIGURE 6-1 The AJAX Extensions controls Each of these controls inherits from the System.Web.UI.Control class. This ensures they work in a similar manner as other ASP.NET Web controls. The sections that follow cover each of these controls in detail. 3 0 2 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting The ScriptManager and ScriptManagerProxy Controls Each page you write that leverages ASP.NET AJAX requires one (and only one) instance of a ScriptManager control. The ScriptManager control is responsible for pushing the Microsoft AJAX Library down to the client when your page is requested. It also manages partial-page updates, progress indicators, and more. You add the ScriptManager control to your page source. However, it does not have a visual representation. It is simply a control used to manage AJAX and other control processing. The basic page markup for a ScriptManager control in Source view looks as follows: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> By default, the ScriptManager control’s EnablePartialRending property is set to True. This indicates that the page supports partial-page updates. You can use this property to turn this feature off if needed. The ScriptManager is also used to register custom scripts with the Microsoft AJAX Library. In this way, if you write a script, it can be registered and managed with the Microsoft AJAX Library. This is covered in Lesson 2 of this chapter. Similarly, you can use the ScriptManager to register Web service method calls from the client. This is covered in Chapter 9. USING AJAX WITH MASTER PAGES AND USER CONTROLS You will often need to support AJAX inside a user control you write or directly in the master page of the site. This presents an issue, as a page can contain only a single ScriptManager control. Having one inside your user control and another inside the page that consumes the user control, for example, presents a problem. To overcome this issue, you can use the Script- ManagerProxy control. The ScriptManagerProxy control can be used either by child pages that use a master page that already defines a ScriptManager control or by user and custom controls you write. You use it much the same way you would a ScriptManager control. You can register scripts that are specific to the child page or control you are writing. ASP.NET takes care of the rest. The UpdatePanel Control The UpdatePanel control allows you define areas of a page that should PostBack to the server independent of the rest of the page. This allows a different experience between the client and the server. Rather than the entire page being requested and thus refreshed on return, with partial-page updates you can post portions of a page to the server and only receive updates to those portions. In this way, the user does not see a full-screen refresh and does not lose context where he or she is on the page. It is important to note that partial-page updates give the illusion of running client side. However, they do not run client side. Rather, they are smaller, asynchronous PostBacks to the server. The ScriptManager control manages the communication between this call and its return message. Lesson 1: Creating AJAX-Enabled Web Forms CHAPTER 6 303 The UpdatePanel control is a container for other controls. The controls you put inside the UpdatePanel control that cause a PostBack to the server will be managed as partial-page up- dates. As an example, consider a GridView control that allows users to page through data. By default, each time the user selects another page of data the entire Web page is refreshed and redisplayed. If you embed the GridView inside an UpdatePanel you can still process the data paging on the server. However, you now eliminate the full-page updates. The following shows the markup of an UpdatePanel that includes a GridView control: <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" Width="600" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSourceVendorDb" > <Columns> <asp:BoundField DataField="id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="id" /> <asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" /> <asp:BoundField DataField="location" HeaderText="Location" SortExpression="location" /> <asp:BoundField DataField="contact_name" HeaderText="Contact Name" SortExpression="contact_name" /> <asp:BoundField DataField="contact_phone" HeaderText="Contact Phone" SortExpression="contact_phone" /> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> CONTROLLING PARTIAL-PAGE UPDATES You can combine multiple UpdatePanel controls on the same page. Each can update portions of the page independently or otherwise. You might also have controls that cause standard PostBacks on the same page as those that cause asynchronous PostBacks. In each of these cases, you need to be able to control how and when the page elements update. The Up- datePanel exposes the UpdateMode and ChildrenAsTriggers properties for controlling when a PostBack should occur to trigger an update of content contained in an UpdatePanel. The first property, UpdateMode, has two possible settings: Always and Conditional. The Always value is used to indicate that the content of an UpdatePanel should be updated on every PostBack that originates from the page. This includes other, asynchronous updates that are the result of another UpdatePanel on the page as well as those that are simply standard PostBacks on the page. The Conditional value of the UpdatePanel.UpdateMode property is more complex. It indi- cates that an update to the given UpdatePanel is conditional on something else on the page. For example, consider the case of nested UpdatePanels. If you set the nested UpdatePanel 3 0 4 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting control’s UpdateMode property to Conditional, it will only be updated when the parent Up- datePanel causes a PostBack. Another way to trigger an update to an UpdatePanel with an UpdateMode set to Condi- tional is to explicitly call its Update method from server-side code. This might be done as the result of another asynchronous update on the page. If you set the UpdateMode to the Conditional value, by default nested UpdatePanel con- trols will not cause an update to their parent. You can change this behavior by setting the outer UpdatePanel control’s ChildrenAsTriggers property to True. In this case, any updates triggered by the nested UpdatePanel will also trigger an update to the parent UpdatePanel. You can also explicitly define the controls that you wish to trigger an update to an Up- datePanel. These controls can be inside or outside the UpdatePanel, and the update happens for both Conditional and the Always mode. Adding a trigger to the UpdatePanel indicates that if a user triggers a PostBack from the given trigger control, the UpdatePanel content should also PostBack and be refreshed. As an example, consider the GridView control discussed previously. This control is inside an UpdatePanel as shown in Figure 6-2. It updates itself when a user pages through the data. Now, consider that the page also supports a search function. In this case, the search is trig- gered based on a button named Search (also displayed in Figure 6-2). FIGURE 6-2 An .aspx page with a search button and GridView control You might want the search to also result in a partial-page update to GridView. To do so, you can add a trigger to the UpdatePanel that contains the GridView control. A trigger can be defined directly in markup (or through the property window in Design view or in your code). The following markup shows an example: [...]... You do not get Microsoft AJAX Library support without a ScriptManager on your page or through explicitly including these files 3 28 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting NOTE ajaX Library fiLes You can leverage the Microsoft AJAX Library outside of ASP.NET or examine the source code of the library The files can be found at www .asp.net/ ajax and include the file MicrosoftAjax.js... The preceding example does not leverage many ASP.NET controls Instead, it uses the standard HTML Input tag to define a button This tag’s onClick event is wired to a JavaScript method However, for an ASP.NET Button control, the onClick attribute is used to declaratively connect an ASP.NET Button control to its server-side event Therefore, to connect an ASP.NET Button control to a client-side JavaScript... the Timer control’s Interval attribute to 4, 000 milliseconds (4 seconds) 6 7 312 Add an event handler for the Timer control’s Tick event Inside this event add code to cycle between images (a simple if statement should suffice) Run the application and wait until the Timer event fires Your application should look similar to Figure 6-3 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting Figure... shown to the user Working with the ASP.NET AJAX Library As you have seen, you can create your own JavaScript and embed it in an ASP.NET page However, JavaScript can be challenging to program with, especially if you are used to developing in an object-oriented world, having a strong type system, working with a framework, or having error handling and debugging support The Microsoft AJAX Library helps solve... executes the JavaScript on the client Figure 6 -4 shows an example of what the page looks like in the browser 3 18 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting figure 6 -4 The JavaScript and HTML in the browser window NOTE a basic eXampLe This is a basic example This type of functionality is provided by the AJAX Control Toolkit and Web Parts in ASP.NET In this example the JavaScript code is... namespaces, classes, and more n a framework (or set of namespaces) The Microsoft AJAX Library includes a root namespace called Sys that contains classes and other namespaces that make programming AJAX applications easier Think of the Sys namespace as a client-side equivalent to System in the Microsoft NET Framework (although obviously not as rich) Other namespaces include Sys.Net, Sys.Services, Sys.UI, Sys.WebForms,... with an UpdatePanel that includes a Timer control Lesson Summary n n ASP.NET includes both a set of server controls for working with AJAX and a set of client-side JavaScript files called the Microsoft AJAX Library n The ScriptManager (or ScriptManagerProxy) control is required on all pages that work with the AJAX extensions for ASP.NET It manages the JavaScript files sent to the client and the communication... parameters 3 22 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting Figure 6-5  The dynamically added JavaScript running in a browser Registering Client Scripts with the ScriptManager Control The ScriptManager control, as discussed previously, is used by the ASP.NET AJAX Extension server controls It automatically registers the appropriate script files defined by the Microsoft AJAX Library If you are... own client callback code follows a standard set of steps First, you must define the server-side code To do so, you follow these steps: 3 24 CHAPTER 6 Working with ASP.NET AJAX and Client-Side Scripting n Implement the System.Web.UI.ICallbackEventHandler for your ASP.NET page This server-side interface is used to set up both the receive call from the client (RaiseCallbackEvent) and the method that returns... You reference them based on their rendering as HTML Their IDs are set to the same ID you set in your code The ASP.NET controls also have the ClientId property for changing the client ID from that of the server (by default it is set to match the server’s ID) Adding Script Dynamically to Your ASP.NET Page There are times that you might need to generate your JavaScript and add it to your page at run time . your Web applications. Exam objectives in this chapter: n Working with ASP .NET AJAX and Client-Side Scripting n Implement Web Forms by using ASP .NET AJAX. n Interact with the ASP .NET AJAX. browser-based, cross-platform Web applications. You can add AJAX to any Web application. Like other Web standards such as HTML, it is not specifi c to ASP .NET. However, ASP .NET does provide a number. is used by ASP .NET and the AJAX Control Toolkit. However, you can also leverage this library to extend your own controls with AJAX behaviors. n ASP .NET AJAX server controls ASP .NET ships with