MSDN Magazine - June 2008 - (Page 25)

DINO ESPOSITO Cutting EdgE ASP .NET AJAX And Client-Side Templates What makes partial rendering particularly appealing for the development of ASP.NET AJAX applications is its inherent simplicity—lower impact on existing pages and fewer demands on developers’ skills. But partial rendering is merely a trick to bypass the browser in the execution of the postback request. Pages that use partial rendering are not truly AJAX pages because they still rely on the old postback method. But what does it mean to be a real AJAX application? Essentially, a true AJAX application uses the XMLHttpRequest object to bypass the browser and establish direct communication with the Web server and any hosted HTTP endpoints. The application is capable of asynchronously retrieving necessary data and independently refreshing blocks of the user interface. Based on this key behavior, a number of AJAX frameworks have been designed that have different doses of syntactic sugar, larger or smaller feature sets, and richer or simpler families of user interface widgets. ASP.NET AJAX is one of these frameworks. Designing and building true AJAX applications is not an easy task, and it is even more difficult if you lack the proper programming tools. Compared to other AJAX frameworks, ASP.NET AJAX excels in the support it provides for accessing server-side code. With ASP.NET AJAX, connecting to a scriptable Web or Windows® Communication Foundation (WCF) service is child’s play from a developer’s perspective. You reference the URL, and the framework generates a JavaScript proxy class for you. It’s free and effective. The proxy class hides all the details of XMLHttpRequest plumbing, serialization and deserialization, data formats, and HTTP packaging. You just call a method asynchronously and get a plain data-transfer object (DTO) back with its own set of properties. ASP.NET AJAX, however, doesn’t provide the same efficient mechanism for consuming downloaded data in the browser. No doubt this will improve soon, but for now ASP.NET AJAX doesn’t offer a client-side UI model as rich as the server-side service model. What can you do today to improve the UI model of ASP.NET AJAX pure Web applications? Last month, I introduced the concept of Single-Page Interface (SPI) and presented a couple of simple patterns that can be useful for building SPI pages. This month, I’ll discuss client-side templates and data binding. Figure 1 UI for a Real-Time Stock Quote Page non-AJAX Web sites that offer this feature today are using either meta-refresh tags or a plugin-based approach such as Flash, Silverlight™, or ActiveX® controls. Typically, the list of stock values to display is bound to a server-side grid control, and the grid is then refreshed with the rest of the page with the next postback or page request. A page like this can be quickly enhanced with a sprinkle of partial rendering. Let’s see how. The markup in Figure 1 wraps a grid control in an UpdatePanel control that is periodically refreshed by a Timer control. The grid control is bound to a collection of objects that feature at least three properties: Symbol, Quote, and Change. The content of the grid is refreshed every 10 minutes. The ASP.NET AJAX Timer control activates a client timer and fires a postback when the interval expires. Because it is wrapped by an UpdatePanel, the grid with stock quotes updates separately from the page. On the server, the timer’s tick runs the following code: Send your questions and comments for Dino to cutting@microsoft.com. Code download available at msdn2.microsoft.com/magazine/cc135911. June 2008 25 A Typical AJAX Function A canonical example to illustrate the power of the AJAX approach is an application that retrieves stock quotes in real time. The http://msdn2.microsoft.com/magazine/cc135911

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

MSDN Magazine - June 2008 Contents Toolbox CLR Inside Out Cutting Edge Patterns In Practice SAAS Concurrency Robotics Form Filler GUI Library Service Station Foundations Windows With C++ Concurrent Affairs Going Places { End Bracket }

MSDN Magazine - June 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.