After you taste Data Templates in Silverlight and WPF, you won’t want to go back to your old way of building user interfaces. I mean seriously, do you like the idea of building a user interface by custom drawing a list box using various owner-drawn techniques like exist in Win32? I certainly don’t. Admittedly, there’s a certain amount of excitement and energy when the list box finally looks the way you wanted, after 20 hours of tweaking! :)

So, I was experimenting with some HTML and JavaScript the other day and really wanted something like a Data Template. Nothing as powerful — but just the concept that if I just bring up the data, why can’t I easily specify the look and feel with a reusable block of HTML-like syntax?

Now, certainly I could have used one of the many ASP.NET techniques for creating a user interface template on the server — building all of the HTML and sending it to the client. That’s so old school! I wanted the server to send just the framework/shell, and send the data independently — unformatted, so that it could be both programmatically accessed and converted to a user interface. I could have used XSLT I suppose, if I again wanted to learn it, and I was comfortable retrieving data from the web server as XML. However, I didn’t want to relearn XSLT and I wanted JSON objects from the web server.

My templates were born.

There are a few pieces to creating a working system. First, a template file is needed:

<div style=""font-size: 80%">
  <h1>
    <%{Path:"Name"} %>    
  </h1>
  <div style="margin-left:20px;">
    <%{Path:"Folders", Template:"Folder"} %>  
  </div>  
  <ol>
    <%{Path:"Files", Template:"File"} %>
  </ol>
</div>

Simple enough. The syntax should be roughly familiar to those of you with Silverlight or WPF data binding experience. Within the <% and %> a JSON object is constructed that maps to the property (name) and any sub-templates that should be applied to a property (for endless and potentially recursive fun!).

These files, by default are placed in the App_Data folder in ASP.NET and are named TEMPLATENAME.template. By setting the default file type handler for these files to HTML, you can even edit them with Intellisense!

Then, to power the template functionality, the templates must be downloaded and the JavaScript object must be downloaded:

<asp:ScriptManager ID="ScriptManager1" runat="server">   
    <Scripts>
        <asp:ScriptReference Path="~/DataTemplate.js" />
        <asp:ScriptReference Path="~/DataTemplateDefinition.ashx?ID=folder,file" />
    </Scripts>
</asp:ScriptManager>

The second ScriptReference automatically downloads a JavaScript file containing the code necessary to construct the data templates.  By default, they’re automatically set to be cached (you could change the code as needed).

Finally, to construct the HTML…

var templating = new WiredPrairie.Data.Template();                        
var output = templating.toHTML(sampleData, "Folder");

var dd = $get("dyndata");
dd.innerHTML = output;

The sample web page has an empty DIV element with an ID of dyndata — although it could be anything you want.

    <div id="dyndata">
    
    </div>

The code has been tested in Firefox 3.0 and IE 7. It requires the Microsoft ASP.NET Ajax JavaScript libraries.

Download here.