MSDN Magazine - March 2009 - (Page 11) SCOTT MITCHELL TOOLBOX Rich AJAX Data Controls, Analyzing HTTP Traffic, And More Rich Data Web Controls for ClientCentric Ajax Development The ASP.NET AJAX framework offers two models for building Ajax-enabled Web applications: server-centric and client-centric. With the server-centric model, page developers continue to use the standard ASP.NET Web controls, but place them within an UpdatePanel control. When a control in an UpdatePanel causes a postback, the UpdatePanel replaces the typical postback with a JavaScript-induced partial page postback and seamlessly updates the controls within it with the server’s response. With the client-centric model, page developers are tasked with writing the JavaScript to initiate a partial-page postback and to update the page on response. Programming using the client-centric model requires that the page developer use the client-side ASP.NET AJAX libraries and write JavaScript and HTML themselves to initiate partial page postbacks and to update the page on response. ASP.NET developers new to Ajax development typically prefer the server-centric model, as it is easier to implement and uses the existing Web controls ASP.NET developers are already familiar with. However, the client-centric model offers more control over the page’s behavior and the information shuttled between the browser and the Web server, thereby enabling a more unique and responsive user experience. These two models force developers to make a tough decision: use ASP.NET’s existing Web controls to ease implementation, or forgo the familiar controls and write a lot of JavaScript and HTML in order to maximize performance. The good news is that there is a third option, thanks to the Ajax Data Controls Figure 1 Adding the GridView to an ASP .NET Page project version 1.0, which consuming less bandwidth is a collection of ASP.NET than the standard data controls for displaying data controls when used within an UpdatePanel. in an Ajax-enabled Web application. The Ajax Data For example, to disControls marry the ease play categories from the of server-centric developNorthwind database using ment with the performance the Ajax Data Control’s enhancements enjoyed by GridView, start by adding client-centric development. the GridView to an ASP.NET page. Next, create a script Adding an Ajax Data Control to a Web page and service that queries the dataconfiguring its appearance base and returns the data to and behavior is done much display. Finally, write a bit of in the same way as any other Figure 2 JavaScript in the page to bind Web control—from Visual The Data Displayed the GridView to the data. Studio, drag the control from the Toolbox Figure 1 shows the page’s declarative onto the page and configure its settings markup while Figure 2 shows the resultvia the Properties window. But unlike ing page when viewed through a browser. ASP.NET’s built-in data controls, the Ajax When the page is visited by a browser, the Data Controls retrieve their data from the client-side pageLoad function executes and server using client-side script, providing retrieves the data from the script service. a more responsive user experience and Once the server has returned the data, it Send your questions and comments for Scott to toolsmm@microsoft.com. All prices confirmed at press time and are subject to change. The opinions expressed in this column are solely those of the author and do not necessarily reflect the opinions at Microsoft. March 2009 11
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.