MSDN Magazine - August 2008 - (Page 33)

DINO ESPOSITO Cutting EdgE Programming AJAX With ASP .NET Partial Rendering The heart of AJAX is the XMLHttpRequest object. The user experience opportunities that AJAX offers are contingent on the availability of this object on a broad number of browsers over multiple platforms. A lot of things have happened since 2004, when component vendors first began showcasing AJAX applications, but at the core, AJAX would not be possible without the ability to execute an out-of-band call using the XMLHttpRequest object. As the complexity of AJAX applications has increased, developers have come to realize that plain script-driven, out-of-band calls are not enough to build a new generation of Web applications in a cost-effective way. Subsequently, the demand for a set of more powerful tools is growing. These tools are expected to add AJAX capabilities to pages and applications, while using the same development paradigm as classic ASP.NET. So, to make a long story short, developers need more in order to build AJAX sites than plain calls to the XMLHttpRequest object for fetching data and handcrafted JavaScript functions for manipulating the Document Object Model (DOM). In this month’s column, I’ll look at a pragmatic approach for AJAX that leverages the ASP.NET partial rendering engine. As you will see, AJAX involves trade-offs between application performance and developer productivity. Real-world AJAX sites are not built entirely with either partial rendering or manual scripting of the XMLHttpRequest object. They require a powerful mix of techniques that are often well synthesized by custom controls. handle user clicks. You may assign each menu item a URL or just post back to the same page. From an AJAX perspective, you choose between dismissing the current page and loading a brand new one, and asynchronously loading some new content from the server. Take a look at the following code snippet, which shows a fragment of the ASP.NET Menu control: The first MenuItem child element of the Products menu item features a NavigateUrl property. The property gets or sets the URL to navigate to when the menu item is clicked. The second MenuItem The single-page interface decreases the number of reloads and reduces flickering. element features a Value property. The Value property is used to store additional data about the menu item, and it is passed to the MenuItem’s postback event. Menu items at the same level must each have a unique value for the Value property. When no explicit navigation URL is specified, clicking a menu item results in a classic postback. On the server, you simply handle the MenuItemClick event and process the content of Value property. Obviously, if you choose an approach using the Value property, you can use AJAX techniques and avoid a full page reload. The overall model of this type of page is a single-page interface. The single-page interface reduces the burden on the user interface because it decreases the number of reloads and eliminates flickering. However, the single-page interface also means that your application uses less-distinct URLs, which results in diminished support from search engines. The single-page interface also means that the Send your questions and comments for Dino to cutting@microsoft.com. Code download available at msdn.microsoft.com/magazine/cc135911. August 2008 33 Pages with a Menu AJAX is mostly about minimizing the number of full page reloads. Both partial rendering and manual script-driven calls allow you to fetch server-side data and avoid a full page refresh. For many content types, back-end services and DOM manipulation may be enough. But what if you have to support navigation? Classic hyperlinks break the AJAX magic, telling the browser to place a request to another URL. As a result, the current page is frozen until the new chunk of HTML is downloaded. When the fresh data arrives, the page is dismissed and the browser’s client is then fully redrawn. Top-level links placed on a Master Page that point users to different areas of the site may really be implemented as traditional hyperlinks. Depending on your users’ expectations, a full page reload may be acceptable in this case. Whenever you build a menu, you make a choice about how to http://msdn.microsoft.com/magazine/cc135911

Table of Contents Feed for the Digital Edition of MSDN Magazine - August 2008

MSDN Magazine - August 2008 Toolbox CLR Inside Out Basic Instincts Cutting Edge Patterns in Practice Data 2.0 - Expose And Consume Data In A Web Services World Biztalk EDI - Build A Robust EDI Solution With BizTalk Server Silverlight - Create Animations With XAML And Expression Blend Write On! - Create Web Apps You Can Draw On With Silverlight 2 Wicked Code - Craft Custom Controls For Silverlight 2 Team System Foundations Windows With C++ Concurrent Affairs Going Places { End Bracket }

MSDN Magazine - August 2008

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.