jTemplate is a template engine plug-in for jQuery and is commonly used to display tabular data by binding objects to the template. Before using jTemplate, we must know how to use the jTemplate syntax. The following tags are supported in jTemplate and you can see an example here
· if..elseif..else../if
· foreach..else../for
· for..else../for
· continue, break
jTemplates also supports “for” and “if” operators. Also, inside the “foreach” operator, you can access the following variables:
· $index – index of the element in the table
· $iteration – ID of the iteration (the next number begins from 0)
· $first – is this the first iteration?
· $last – is this the last iteration?
· $total – the total number of iterations
The following below given example illustrates how to implement jTemplates in asp.net
Step 1: Open Visual Studio 2010. Create new ASP.NET 4 Web site from File > New > WebSite. First, I have created a Employee class which will return the Employee List as shown below.
C#
using System;
using System.Collections.Generic;
Public Class Employees
{
public List getList()
{
List Employees = new List< Employee>();
Employees.Add(new Employee { ID = 1, FullName = “Naresh Reddy”, Address = “-“, PhoneNo = “9036692479” });
Employees.Add(new Employee { ID = 2, FullName = “Vinay Ramamurthy”, Address = “-“, PhoneNo = “8892601685”});
Employees.Add(new Employee { ID = 3, FullName = “Pradeep Kumar”, Address = “-“, PhoneNo = “1234567890” });
Employees.Add(new Employee { ID = 4, FullName = “Kalyani”, Address = “-“, PhoneNo = “9569879036” });
Employees.Add(new Employee { ID = 5, FullName = “ShashiKala”, Address = “-“, PhoneNo = “9999999999”});
Employees.Add(new Employee { ID = 6, FullName = “Somashekar”, Address = “-“, PhoneNo = “1234567890” });
Employees.Add(new Employee { ID = 7, FullName = “Chetan”, Address = “-“, PhoneNo = “877467889” });
Employees.Add(new Employee { ID = 8, FullName = “Praveen”, Address = “-“, PhoneNo = “9544772798” });
Employees.Add(new Employee { ID = 9, FullName = “Sudarshan Rudrappa”, Address = “-“, PhoneNo = “9868058769” });
return Employees;
}
}
Public Class Employee
{
public int ID { get; set; }
public String FullName { get; set; }
public string Address { get; set; }
public string PhoneNo { get; set; }
}
Step 2: Open your Default.aspx.cs page and create a static function which will return a patient list to the jQuery function from the server-side to client-side.
C#
using System.Web.Services;
[WebMethod]
public static List getAllEmployeeList()
{
Patients pObj = new Employees();
return pObj.getList();
}
Step 3: Now create a ‘ForEachTemplate.htm’ page in which we will add a table template to be processed by jTemplate, and the data will be populated and displayed on the browser. I have also applied CSS on this table.
Id
Full Name
Address
PhoneNo
{#foreach $T as Employee}
{ $T. Employee.ID }
{ $T. Employee.FullName }
{ $T. Employee.Address }
{ $T. Employee.PhoneNo }
{#/for}
Now open your Default.aspx Page and add the jQuery and jTemplate reference as shown below:
$(document).ready(function () {
$.ajax({
type: “POST”,
url: “Default.aspx/getAllEmployeeList”,
data: “{}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {
$(‘#placeholder’).setTemplateURL(‘JTemplates/ForEachTemplate.htm’);
$(‘#placeholder’).processTemplate(data.d);
}
});
});
The function accepts the JSON results retrieved from the Web Service and uses a jTemplate method to load the HTML template into a container, and finally renders the JSON result. To display the results, add a div element called ‘placeholder’ as shown below: