MSDN Magazine - June 2008 - (Page 28)

ods. In the code snippet, the Update method ultimately fetches an array of JavaScript Document Types Definitions (DTDs) and passes it to the callback function ultimately responsible for updating the user interface. The variable named results in the code contains the response from the service—just the data you need to bind to the grid. Unfortunately, there’s no client-side GridView control as there is in the server-based ASP.NET approach. You need a form of client-side data binding, preferably with some templating support. Currently, ASP.NET AJAX is not of much help here. For further explanation on this topic, straight from the Microsoft ASP.NET team, see the sidebar, “Insights: ASP.NET AJAX.” Some major ASP.NET control vendors recently began offering server controls with an equivalent client-side object model. If you’re using any of these libraries, you may end up having a JavaScript object that mimics the server-side control, armed with a client Data source property and a DataBind method. ASP.NET AJAX provides you with the scaffolding required to invoke a Web service from the client, but it doesn’t provide an entire UI framework designed with AJAX in mind, nor does it include client data binding and templating. An interesting resource on various AJAX approaches from the UI perspective is the post by Miljan Braticevic at go.microsoft.com/fwlink/?LinkID=116054. Client-Side Templating in ASP.NET AJAX Do you remember “Atlas”? In early builds of what later become ASP.NET AJAX Extensions, there was an attempt to provide client-side data binding and templates. And it was a pretty good one indeed. For some reason, however, it didn’t make its way into the final release of ASP.NET and was then pushed to the ASP.NET Futures library. Basically, the old Atlas binding model was based on HTML templates and a declarative syntax for expressing bindings between markup elements and data fields. Templates and binding are then tied together in a client control—the List view control. Configured through XML, the Atlas List view control does a lot of parsing work with all of the information it receives and attaches behaviors, controls, and bindings to various parts of the markup. Let’s start from this last point to explore the ways in which you can build your own small but effective data binding and templating framework. Note that the final output has to be a string of HTML markup. The initial input is a collection of objects with a few pub- Insights: ASP.NET AJAX Template-driven rendering has long been one of the major strengths of ASP.NET server controls. Templates offer a number of advantages over older techniques of looping around markup using and blocks. One could cite two-way binding and general cleanliness of the model. On the client, without a framework, even simple blocks are not available, so a good template engine represents a major improvement. It also enables lots of optimizations that are easy to achieve on the client but a lot more difficult on the server, such as only re-rendering the changed items in a list instead of re-rendering the whole list. On the other hand, rendering performance on the client leaves a lot to be desired, so a template engine needs to be especially well optimized for performance. Dino describes here a simple approach to client-side template rendering that is both easy to set up and works today. The ASP.NET team of course recognizes the power of templates. In fact, when we shipped the first previews of ASP.NET AJAX, we introduced a very elaborate declarative syntax, called xml-script, which among other things enabled template-driven rendering. Unfortunately, it was perceived as too complex and verbose; also, the performance wasn’t as good as we and our users would have liked. Moreover, it lacked tooling support. It’s important to note that there is a lot more to templates than just inserting data into placeholders in an HTML string. First, a template engine must have some sort of expression language to go beyond the simple field insertion. Second, it should enable scenarios of conditional rendering. And most importantly, it should be simple to add rich behavior to the rendered markup. In other words, the engine must make it simple to instantiate components that attach to the markup it created. In the next version of ASP.NET AJAX, we’re going to revisit tem28 msdn magazine plates and reintroduce them into the AJAX framework, along with a simple declarative component syntax. Here’s what a simple list view could look like: {{name}} {{description}} There are a few things to notice here. Expressions are embedded into the markup using {{ }} delimiters. These expressions can be direct references to current data item fields (name, description, and so on) or can be complex JavaScript expressions (‘products/’ + id). On the body tag, we define a “dv” namespace that maps to a DataView JavaScript component. Later, we set sys:type on the “dataview1” div to “dv”, indicating that we want to instantiate a DataView control and attach it to that element. On the same tag, dv:data=”{{someArray}}” sets the data property of the DataView control to the someArray global variable. The same declarative syntax can be used inside of the template to instantiate and attach arbitrary controls and behaviors. The template itself here is the markup inside the dataview1 div, but it could be built from external contents. Finally, the engine supports arbitrary code to be embedded in the template markup using blocks, which we use here to conditionally render a paragraph containing the description data column. —Bertrand Le Roy Program Manager, ASP .NET Microsoft Cutting Edge http://go.microsoft.com/fwlink/?LinkID=116054

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.