AJAX Client –Side templating in ASP.NET 4.0

The AJAX in ASP.NET 4.0 introducing new client data rendering features to page and component developers. It allows the developers to render JSON data from server as HTML in a highly efficient way. This post discuss about one of the AJAX features in ASP.NET 4.0.

You need to download the AJAX scripts from following location to test the sample

download link


You can test the following feature in VS 2010 and IIS 7.0.

Client-Side Template Rendering

Using this feature we can create a UI from data in a more manageable fashion. ASP.NET 4.0 includes a new template engine for client development which having the following features

· You can use expression language

· It is XHTML compliance

· Conditional rendering and loop over markup

Template Example

The sample template that you can create in ASP.NET 4.0 as follows

<ul id="myTemplate" class="sys-template"
       <h3>{{ Name }}</h3>
       <div>{{ Description }}</div>

Template is rendered with data item context. Properties of the data item can be included in the markup by using {{ Name }}. Expression block can also contain JavaScript expression that can be evaluated as string.

Instantiating a Template using DataView Control

We can effectively use client templates in ASP.NET 4.0 through DataView Control.

Here the content of the dataview control is template. If you set the data property of DataView control to an array then the template is rendered once for each item in array.

The Dataview control is automatically updated when the data changes, without need rebind. This provides a dynamic data –driven UI in browser.

<body xmlns:sys="javascript:Sys"
<ul sys:attach="dataview" class="sys-template"
    dataview:data="{{  imagesArray }}"
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>

Share this post :

%d bloggers like this: