ASP.NET AJAX 4.0 Client Template Rendering

vcsjones — Sun, 07 Jun 2009 06:24:00 GMT

Recently I have been dabbling with the ASP.NET 4.0 Framework. There were two things that immediately got my interest:

An actual new version of the CLR. More of come on that later…
AJAX 4.0

Now, I didn’t mean to say I was pumped an excited about it, but a certain element caught my attention, and that is Client Rendering. This basically, allows you to bind simple HTML to JSON or a simple JavaScript array. The idea is interesting, but I wasn’t sure how well it’d play.

To get started, I looked here: http://www.asp.net/learn/whitepapers/aspnet40/. This is a brief overview of the application. Not entirely informative, but it got me started. I fired up Visual Studio 2010 and began to tinker.

To start off, I wanted to build something simple. No JSON or Web Service calls, basics! I’m a slow learner. So, what exactly am I doing with this? Given the scenario where I have a JSON object with some information on it, I want to display it on the page. Now, there have been a few ways of doing this in the past. jQuery makes UI component for adapting JSON objects to tables, ordered elements, etc. The Microsoft implementation isn’t too different. It defines a binding for some sort of repeatable HTML element. Tables have repeating rows, unordered lists have repeating list items, etc. Unordered lists are pretty simple, so lets start there. Let’s say we are given a JSON object similar to this:

        1: var descriptions = [{ Name: "Foo", Description: "Foo is a great product." }, { Name: "Bar", Description: "Bar is OK, but not great."}];

Pretty simple. We have 2 objects in a collection with a Name and Description property. Now we want to show them in in an unordered list.

First, to get started, we need a ScriptManager in our page. This wires in all of Microsoft’s AJAX scripts for us.

       1: <asp:ScriptManager ID="MyScriptManager" runat="server">

       2:     <Scripts>

       3:         <asp:ScriptReference  Name="MicrosoftAjaxTemplates.js" />

       4:     </Scripts>

       5: </asp:ScriptManager>

I just plopped this right after the <body> tag. Notice the script reference is simply working on name. One of the new features of AJAX 4.0 is Microsoft broke apart the AJAX Framework JavaScript into different libraries. This allows you to selectively use the libraries you need and avoid large chunks of script you don’t need. In this case, we need the AJAX Templates script.

The AJAX functionality we will be using is an attached DataView. The scripting library works by attaching itself it an HTML element. In our case, it’s a unordered list. The attachment is done with a simple attribute on the element, sys:attach and then specify what you want to attach. Before we can go there, we need to tell our browser certain things, mainly namespaces. The body tag will contain certain namespace imports, similar to how WPF XAML imports namespaces. We want the DataView and the Sys namespace, so we’ll throw those in there:

       1: <body xmlns:sys="BLOCKED SCRIPTSys"

       2:     xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"

       3:     sys:activate="*">

There is one additional attribute, sys:activate that is in there. We’ll touch on that in a bit. So now we want to build our unordered list and attach a dataview to it. Let’s put together our unordered list and go through it.

       1: <ul id="descriptionsList" sys:attach="dataview" class="sys-template" dataview:data="{{ descriptions }}"> 

       2:     <li>    

       3:         <h3>{{ Name }}</h3>

       4:         <div>{{ Description }}</div>

       5:         <hr />

       6:     </li>

       7: </ul>

Notice the sys:attach attribute, and we are attaching a dataview to our unordered list. The other important attribute is the dataview:data. This is basically what data you want to bind to. Finally, we have a list item that is our “template” for what AJAX should use for all of the items. We denote a binding using double curly braces {{ }}. So {{ Name }} binds to the Name attribute in our JSON, etc. The dataview:data attribute is bound to our descriptions JSON object we declared.

There is one little piece left, and that is the class of sys-template. This is just a minor styling that sets display: none. This hides the entire element and the AJAX Framework will set the display properly once it has done fully loading all of the data and rendered it.

All together, it renders something like this:

All together, this was all of my source:

       1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientTemplates.aspx.cs" Inherits="DataControls.ClientTemplates" %>

       2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       3: <html xmlns="http://www.w3.org/1999/xhtml" >

       4: <head runat="server">

       5:     <style type="text/css">

       6:     .sys-template

       7:     {

       8:         display: none;

       9:     }

    </style>

    <script type="text/javascript">   1:     2:         var descriptions = [{ Name: "Foo", Description: "Foo is a great product." }, { Name: "Bar", Description: "Bar is OK, but not great."}];   3:     </script>

</head>

<body xmlns:sys="BLOCKED SCRIPTSys"

    xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"

    sys:activate="*">

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="MyScriptManager" runat="server">

                <Scripts>

                    <asp:ScriptReference  Name="MicrosoftAjaxTemplates.js" />

                </Scripts>

            </asp:ScriptManager>

            <ul id="descriptionsList" sys:attach="dataview" class="sys-template" dataview:data="{{ descriptions }}"> 

                <li>    

                    <h3>{{ Name }}</h3>

                    <div>{{ Description }}</div>

                    <hr />

                </li>

            </ul>

        </div>

    </form>

</body>

</html>

And I didn’t write a single line in the code-behind, either.

This demonstrates the basic functionality of the binding. Next we’ll look at how to actually bind to dynamic data from a web service call, and manipulating the data.

Update: If you want to download a Visual Studio 2010 project, I’ve uploaded it here: http://bit.ly/VCWFd. It looks like Community Server is blocking some of the code snippets thinking it is XSS.

vcsjones : ASP.NET 4.0

ASP.NET AJAX 4.0 Client Template Rendering