MSDN Magazine - August 2008 - (Page 34)

Async Postbacks Figure 1 An ASP.NET AJAX Page with a Top-Level Menu development team writes fewer pages, but they’re richer. Such an approach may also reduce parallelism within the team. Navigation URLs When the menu takes users to a brand new page, you don’t really need a Menu control to implement the solution. In theory, a list of hyperlinks would suffice. There are dozens of DHTML and AJAX menu frameworks available out there, but, at the end of the day, they differ based on the animation, graphics, and predefined skins they offer. Functionally speaking, these menus are plain collections of hyperlinks, and hyperlinks are natively handled by browsers in a non-AJAX way. Generally, large Web sites that contain hundreds of total pages are likely designed around a few entry pages that then direct users to different subsites. The home page, therefore, just needs links to these subsites. In this case, navigation is the requirement and AJAX would not be necessary. But what if you need to bring content down to the currently displayed page? How would you organize this content to maximize performance of the application and productivity of the team? Figure 2 Menu of the Sample Page Last month I demonstrated how to use Windows® Communication Foundation (WCF) services to return either raw data or HTML to the client. Both solutions have pros and cons. Sending raw data optimizes the bandwidth but requires you have some DOM manipulation logic on the client implemented with JavaScript. Sending server-generated HTML increases the quantity of data that is moved around, but it allows you to maintain most of your rendering logic on the server. Both approaches fall into the category of the so-called “true” AJAX solutions, where the application is clearly designed according to a two-tier model—Web browser and service layer. Any state and logic that involves the user interface is maintained and controlled by the client; no view state or postbacks are needed. Server-generated HTML is most useful if you have read-only markup to return. It works well if you need to return a static grid of data or a panel with some information on the selected customer or invoice. It’s much less enticing if you need to bring up an interactive panel full of controls that fire events and require handlers. In a pure AJAX approach, the displayed markup—whether generated on the client or the server—must contain JavaScript function calls. Last month I used services to implement the HTML Message and Browser-Side Template patterns. But, as you may have noticed, my examples were not really interactive. It turns out that both approaches may work in some cases, but not in all. My sample services returned stock quotes, but the final grid was not pageable. To support paging, for example, I had to insert hyperlinks pointing to JavaScript functions and then make sure that I downloaded the referenced JavaScript. Figure 1 shows a sample page with a top-level menu that allows users to navigate in the set of application features. The menu has been created using the ASP.NET Menu control, as shown in Figure 2. As you can see, all menu items avoid specifying the NavigateUrl attribute, which would point each to a physical URL, possibly for a totally different page. Having specified the Value attribute, a postback occurs and the MenuItemClick event is fired to the page whenever the user selects any of the menu items: void Menu1_MenuItemClick(object sender, MenuEventArgs e) { LoadContent(e.Item.Value); } Menu and Partial Rendering The MenuEventArgs class features an Item property that represents the clicked menu item. The Value property on the MenuItem object informs the event handler about the identity of the clicked item. By using a local LoadContent function, the page can dynamically load the required content. But what about the postback? The ASP.NET Menu control fully supports partial rendering. To swallow the postback and load new content smoothly, all that you have to do is set up a ScriptManager control and insert an UpdatePanel control, as shown here: 34 msdn magazine Cutting Edge

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.