Javascript Templating within ASP.NET

ASP.NET has rich support for calling AJAX web services, but is usually ignored in preference for a simpler UpdatePanel implementation.

The UpdatePanel is great because it enables developers to slice up their existing pages, and introduce AJAX functionality without significantly changing their post-back logic.  It does however send back all the form variables + ViewState for that page.  It the receives HTML content blocks from the server which is dynamically renders on the client.

But when rendering a data list of objects on a page, you could consider web services:

[WebService(Namespace = "ns")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class ArticleWebService : System.Web.Services.WebService
public List<ArticleDto> GetByName(string name) {
    return null; // TODO: Return list

This web service is referenced in the script manager on an ASP.NET client page.

<asp:ScriptManager ID="scriptManager" runat="server" >
    <asp:ServiceReference path="~/services/ArticleWebService.asmx" />

Over the wire the web service call formats objects using JSON format, which ensures a compact and efficient delivery of information.  A list of client-side javascript objects can then be passed onto a templating library which when combined with an in-line template can render HTML to the browser.  I evaluated the following:

  1. JSONT – Transform JSON into text using XSLT style nested rules.
  2. ZPARSE – Lightweight and extensible similar to TrimPath.
  3. FOO Framework – Like ZParse from Rizqi, but Depends on Prototype (1.5+).

They all have their strengths and weakness.  I prefer to minimize the number of AJAX frameworks, and prefer flexible syntax of ZParse (you can customize your parser).  Rich Strahl in his recent What’s Ailing ASP.NET Web Forms post consider’s prototype to be a more well-rounded library, but it requires some tweaks and doesn’t handle character escaping the same way as AJAX does.

The FOO framework is neat in-so-far it annotates in-line HTML but it is much slower (as it iterates over every node with the DOM every time it renders a page).  The alternative approach with JSONT or ZPARSE is to place the template within a hidden textarea control eg:

<!-- Declare the template inside a text area, so we can interegate the .value -->
<textarea id="zparseTemplate" style="display:none">
<!--:foreach a in articles:-->
<div class="wof special-wof">
<a href="#" title="{$a.Headline}">{$a.Headline}</a>
<p class="cfix">{$a.Abstract}</p>

The using ZParse the template could be loaded up with a series of ‘articles’ that were loaded from the web service callback.

var parser = new ZParse(Implementation);
var template = $get('zparseTemplate').value;
var content = parser.process(articles);
$get('zparseBlock').innerHTML = content; 

A number of factors need to be considered when option for AJAX+Templating for rendering content like this.

  • Content won’t be visible for SEO purposes.
  • Best for dynamic content, where a page would otherwise be cached.
  • Performance test: 2 small hits may prove less scaleable then 1 bigger hit.

I will be following up with an article on Caching.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: