TechBubbles Microsoft Technology BLOG

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 :

About the author

Kalyan Bandarupalli

My name is kalyan, I am a software architect and builds the applications using Microsoft .NET technologies. Here I am trying to share what I feel and what I think with whoever comes along wandering to Internet home of mine.I hope that this page and its contents will speak for me and that is the reason I am not going to say anything specially about my self here.

Add Comment

TechBubbles Microsoft Technology BLOG

Follow me


Tag Cloud