CHAPTER 11 MICROSOFT AJAX LIBRARY 256 Controls Now Exposed as jQuery Plug-ins In this release, all the ASP.NET AJAX controls are exposed as jQuery plug-ins. So you can instantiate them using jQuery syntax, even making use of jQuery’s chaining capabilities. The following code attaches an ASP.NET AJAX watermark control to a text box and an ASP.NET AJAX color picker: Sys.require([Sys.scripts.jQuery, Sys.components.watermark, Sys.components.colorPicker]); Sys.onReady(function () { $("#txtChooseColor").watermark("Choose a color", "watermarked").colorPicker(); }); DataView One of the coolest controls in this release is the new DataView control. DataView allows you to easily define a template that can be bound to various types of data or services. WPF/Silverlight developers might notice some similarity with the binding syntax. XHTML-Compliant? Microsoft wants you to know that it has made great efforts to ensure that declarative binding is XHTML- compliant. I’m not sure this is strictly true, but you will see a very clean way of performing it. Sebastian Lambla has a lengthy post on this subject (note that Sebastian would have been using a previous version of the AJAX libraries when this post was written): http://serialseb.blogspot.com/2009/06/in-how-many- ways-can-microsoft-ajax-4.html. Hello, Microsoft AJAX It’s time to look at the new DataView functionality, so let’s create a new empty ASP.NET web project called Chapter11.HelloAjax. 1. Create a directory called Scripts within your project. 2. Download the latest AJAX libraries from http://ajax.codeplex.com/. 3. Unzip the downloaded file and copy the contents of the Scripts directory to the new project’s root directory. 4. You don’t want any of the master page stuff, so delete the Default.aspx file. 5. To show the libraries are platform-independent, add a new HTML file called dataviewDeclarative.htm. 6. Drag Start.js to the default.htm head HTML section to create the following script reference to the client script loader: <script src="Scripts/start.js" type="text/javascript"></script> CHAPTER 11 MICROSOFT AJAX LIBRARY 257 sys-template CSS rule When you retrieve data from a remote source, you don’t want to display anything to the user until you have the results back because otherwise the template could flicker, which would look poor. You will thus create a new CSS rule to hide the element until you have finished retrieving data and binding it. Because you are being lazy, simply add an inline style rule to the header as follows (obviously, external CSS files are a better way to go): <style> .sys-template { display: none; } </style> The name of the class selector (.sys-template) is a convention suggested by Microsoft for this purpose, which doesn’t seem a bad idea so you might want to stick with it. Let’s also add a couple of other styles to make the examples clearer: .dataItem { font-family:Arial; font-size:20px; } #staticBind { width:700px; } OK, you have everything set up now. It’s time for some client-side–binding fun. DataView Binding DataView binding can be carried out declaratively, programmatically, or a mixture of the two. Let’s look at declarative binding first of all. Declarative Binding In the first example, you will create an array of people consisting of a person’s name and age, and then bind it declaratively. 1. Add the following script block in the header of your page: <script type="text/javascript"> Sys.require(Sys.components.dataView); var people = [ { Name: "Alex Mackey", Age: "28" }, { Name: "Sharyn Mackey", Age: "35" }, { Name: "Brett Chaney", Age: "33" }, { Name: "Jenny Chai", Age: "24"}]; </script> CHAPTER 11 MICROSOFT AJAX LIBRARY 258 2. Now replace the body tag with the following HTML: <body xmlns:dataview="javascript:Sys.UI.DataView"> <div id="peopleView" class="sys-template" sys:attach="dataview" dataview:data="{{people}}" > <div class="dataItem"> {{ $index }}, {{ Name }}, aged: {{ Age }} <hr /> </div> </div> </body> 3. Press F5 to run your application and you should see a screen similar to Figure 11-1. Figure 11-1. Programatic data binding The preceding example created an array called people, imported the namespaces that DataView uses in the document's body tag, and then bound the items in the peopleView with dataview:data="{{people}}" and specified where items should appear with the {{Property}} syntax. This approach is very open to corruption by meddling designers. It certainly isn’t XHTML- compliant and is a bit fiddly to debug. A better, more flexible approach is to use programmatic binding. CHAPTER 11 MICROSOFT AJAX LIBRARY 259 Programmatic Binding You will now see how to produce the same result programmatically: 1. Copy the dataviewDeclarative.htm file and rename the new copy as dataviewProgrammatic.htm. 2. Replace the script tag with the following: <script type="text/javascript"> Sys.require([Sys.components.dataView], function() { var people = [ { Name: "Alex Mackey", Age: "28" }, { Name: "Sharyn Mackey", Age: "35" }, { Name: "Brett Chaney", Age: "33" }, { Name: "Jenny Chai", Age: "24" } ]; Sys.create.dataView('#peopleView', { data: people }); }); </script> 3. Now replace the body tag with the following: <body> <div id="peopleView" class="sys-template"> <div class="dataItem"> {{ $index }}, {{ Name }}, aged: {{ Age }} <hr /> </div> </div> </body> Simple, huh? First, you told the AJAX libraries that you will need the DataView scripts with the Sys.Require call. You then created an array of people. You then used the new functionality in the AJAX libraries to create a DataView and set the people array to the data property. Finally in the HTML you defined where data items should be bound to. A Cleaner Programmatic Binding The previous example still utilizes custom tags to perform the binding. The AJAX libraries offer an even better method by handling the itemRendered event that allows no binding tags at all. To accomplish this task, you will intercept the itemRendered event and then target the spans you want to change with the innerHTML property: 1. Copy the file dataviewProgrammatic.htm and rename it as dataviewOnRendered.htm. 2. Replace the existing script block with the following: CHAPTER 11 MICROSOFT AJAX LIBRARY 260 <script type="text/javascript"> Sys.require([Sys.components.dataView], function() { var people = [ { Name: "Alex Mackey", Age: "28" }, { Name: "Sharyn Mackey", Age: "35" }, { Name: "Brett Chaney", Age: "33" }, { Name: "Mark Clugston", Age: "28" } ]; Sys.create.dataView('#peopleView', { data: people, itemRendered: onRendered }); }); function onRendered(dataview, ctx) { Sys.bind(Sys.get(".name", ctx), "innerHTML", ctx.dataItem, "Name"); Sys.bind(Sys.get(".age", ctx), "innerHTML", ctx.dataItem, "Age"); } </script> 3. Now replace the body tag with the following HTML, noting the lack of binding attributes and just nice good ol’ HTML: <body> <div id="peopleView" class="sys-template"> <div class="dataItem"> <span class="name"></span> aged: <span class="age"></span> <hr /> </div> </div> </body> This code creates a DataView, setting the newly created people array to the data property. Because you don’t want to meddle with the HTML, you create a function called onRendered()() to handle the itemRendered event. In this function, you then access the HTML elements with class name and age and set their innerHTML property to the bound item’s name and age properties. Master Detail Binding A common scenario in line of business applications is the need to create master detail forms. The DataView control makes this very easy; let’s see how: CHAPTER 11 MICROSOFT AJAX LIBRARY 261 1. Copy the existing dataviewProgrammatic.htm and rename the new file as dataviewMasterDetail.htm. 2. Replace the existing script block with the following: <script type="text/javascript"> Sys.require([Sys.components.dataView], function() { var people = [ { Name: "Alex Mackey", Age: "28", Address: "20 Tree road", Telephone: "888888" }, { Name: "Sharyn Mackey", Age: "35", Address: "10 Oak ave", Telephone: "777777" }, { Name: "Brett Chaney", Age: "33", Address: "5 Riversadale Road", Telephone: "6666666" }, { Name: "Jenny Chai", Age: "24", Address: "88 Burleigh Gardens", Telephone: "5555555" } ]; var master = Sys.create.dataView('#peoplesNames', { data: people }); var detail = Sys.create.dataView("#peopleDetail"); Sys.bind(detail, "data", master, "selectedData"); }); </script> 3. Now replace the body section with the following code: <body> <div id="peoplesNames" class="sys-template"> <div class="dataItem" sys:command="select"> {{ Name }} <hr /> </div> </div> <! Detail View > <div id="peopleDetail" class="sys-template"> <span class="nameddetailitem"> Age: {{ Age }} <br /> Address: {{ Address }} <br /> Telephone: {{ Telephone }} </span> </div> </body> 4. That’s it. Run the code up, click a name, and see that the individual’s details are retrieved. Note the line Sys.bind(detail, "data", master, "selectedData") that links the master and detail DataViews together. . http://serialseb.blogspot.com/ 200 9 /06 /in-how-many- ways-can-microsoft-ajax -4. html. Hello, Microsoft AJAX It’s time to look at the new DataView functionality, so let’s create a new empty ASP .NET web project. make the examples clearer: .dataItem { font-family:Arial; font-size:20px; } #staticBind { width: 700 px; } OK, you have everything set up now. It’s time for some client-side–binding. ASP .NET AJAX controls are exposed as jQuery plug-ins. So you can instantiate them using jQuery syntax, even making use of jQuery’s chaining capabilities. The following code attaches an ASP.NET