MSDN Magazine - July 2008 - (Page 53)

expression. This means that by inserting a #xxx placeholder in a template tag you can have the callback invoked and inject HTML code virtually anywhere. Here’s an example: #Symbol #Quote #Change The #Style1 expression is interpreted as a placeholder to process through the callback. The callback invocation is accompanied by the name of the pseudo-member (in this case, Style1) and the current data item. Based on the provided information, the callback can, say, change the background of the host tag to light yellow if the cell is used to render a stock whose price is on the rise: function applyFormatting(memberName, dataItem) { if (memberName == "Style1") { if (dataItem["Change"].charAt(0) == "+") return "style='background-color:lightyellow;'"; else return ""; } } Figure 4 Customized Data Binding in the Browser In ASP.NET, most template-based controls don’t apply data binding rules to header and footer regions. The Samples.MarkupBuilder component is no exception. However, there might be situations in which you want to display in the footer information that is derived from displayed data. A quick trick to do so consists of defining a scriptable element in the footer (or header) template: provided by The content of the TD tag includes a tag with a unique ID. This is sufficient to make that element further scriptable. It should be noted that the content of the XML data island is merged with raw data collected from a remote WCF service and then, when ready, inserted into the page object model via the innerHTML property of HTML browser elements. When this happens, the browser automatically parses the contents of the HTML and updates the Document Object Model (DOM). In this way, any literal element that contains a unique ID string becomes scriptable. The following sample function is the callback associated with the call to the remote WCF service that provides stock quotes: function onDataAvailable(results) { // Bind data and update the UI var temp = builder.bind(results, applyFormatting); $get("grid").innerHTML = temp; } $get("lblProvider").innerHTML = results[0].ProviderName; The BST pattern forces you to generate any HTML you need in the browser using JavaScript. In general, this is a good thing as it allows you to isolate all presentation logic in the one tier, as you can see in Figure 1. In addition, by using templates and JavaScript callbacks you can keep up with the inherently dynamic nature of HTML and manage to accommodate characteristics of the data and user’s expectations. Templates help you a lot in wedding code flexibility and ease of maintenance. A general-purpose class like the MarkupBuilder presented here completes the offering and closes the circle. You can’t reasonably rely on JavaScript alone to generate HTML and mix generation with sprinkles of presentation logic. Code will soon get too complex, hard to read, and inevitably full of errors. Helper classes, developed with the help of the Microsoft® Client AJAX library, come to the rescue. InnerHTML and DOM Before I invoke the HTML Message pattern—the opposite way to generate HTML markup in an AJAX application—I want to discuss innerHTML. The DOM is a standard API through which the browser programmatically exposes the contents of the currently displayed page. The DOM represents the page as a tree of elements. Each node in the logical tree corresponds to a live object with a known behavior and its own identity. There are three fundamental operations you can accomplish on DOM nodes: find a node, create a node, and manipulate a node. Identifying a particular node is easy as long as you know the ID of the corresponding element. The API offers a handy function: var node = document.getElementById(id); Once the innerHTML property of a page element has been updated to include an element with a given ID (say, lblProvider), you can start scripting that element. msdnmagazine.com In ASP.NET AJAX, the getElementById function is wrapped by the $get function. If there are multiple elements with the same ID, the function returns the first that appears in the collection. To upJuly 2008 53 http://msdnmagazine.com

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

MSDN Magazine - July 2008 Contents Toolbox CLR Inside Out Flex Your Data Data Points Advanced Basics Office Space Cutting Edge Data Services ADO.NET Data and WPF Transactions WCF P2P Test Run Security Briefs Foundations .NET Matters {End Bracket}

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