|
What is jTemplate?
jTemplate is a simple JavaScript
template engine which can be used to present data in tabular format. jTemplate
provides language oriented features like conditional statements, loops, etc for
building up templates. You can visit the jTemplate site here.
Steps to integrate the jTemplate in
your Project
1. Download the latest version of jTemplate plug-in either from jTemplate site or jQuery site.
2. Copy the plug-in to your solution and link it through script
tag.
<script
src="_scripts/jquery-jtemplates.js"
type="text/javascript"></script>
Integrating jQuery
Download the latest JQuery library from JQuery.com and include the reference to the JQuery library file in our ASPX page.
<script src="_scripts/jquery-1.2.6.js" type="text/javascript">
I have copied the jquery library into _scripts folder in the solution.
To know more and to setup jQuery intellisense in Visual studio 2008,
please follow my article - Using JQuery in ASP.Net AJAX Applications – Part 1
Moving forward, we will see how to
implement a simple Master-Details view using jQuery, JSON and jTemplate. We will
have a DropDownList control that lists all departments in a company. On
selection of a department in the DropDownList we will list all the employees in
that department in tabular form.
Refer the below diagram,
To build this, we will build an
HttpHandler that can give back the list of employees in JSON format by accepting
the department as a query string parameter. To display the list of employee, we
will build template and apply the template to display the JSON data using
jQuery.
Constructing Master-Details
View
1. Open Visual Studio 2008, Click File >Website and choose ASP.Net
Website. Integrate jQuery and jTemplate library into your site as mentioned in the previous section.
2. Drag DropDownList control from the toolbox and rename its ID to
ddlDepartment.
3. For simplicity purpose, I will hard code the departments available.
You can bind it from database in your case.
<asp:dropdownlist ID="ddlDept" runat="server">
<asp:ListItem Value="0">Select</asp:ListItem>
<asp:ListItem>IT</asp:ListItem>
<asp:ListItem>ECE</asp:ListItem>
<asp:ListItem>MEC</asp:ListItem>
<asp:ListItem>CSE</asp:ListItem>
</asp:dropdownlist>
4. Next, we will build an HttpHandler that can return back list of
employees in a department in JSON format. To do this, Right click the project in
solution and click “Add New Item”. Select “Generic Hanlder”. I have named as
GetEmployees.ashx.
<%@
WebHandler Language="C#" Class=" GetEmployees" %>
using
System;
using
System.Web;
using
System.Data;
using
System.Text;
using
System.Data.SqlClient;
using
System.Configuration;
public class
GetEmployees: IHttpHandler {
public void
ProcessRequest (HttpContext context) {
string
dept = context.Request.QueryString["Dept"];
string
query = "SELECT * FROM [Employee] WHERE Department='" + dept + "'";
DataTable dt = GetDt(query);
StringBuilder strStudents = new StringBuilder();
if (dt
!= null)
{
strStudents.Append("{ employees:[");
for
(int i = 0; i < dt.Rows.Count; i++)
{
strStudents.Append("{");
strStudents.Append("\"EmployeeID\":\"" + dt.Rows[i]["EmpID"].ToString()
+ "\",");
strStudents.Append("\"EmployeeName\":\"" + dt.Rows[i]["EmpName"].ToString() +
"\",");
strStudents.Append("\"Department\":\"" + dt.Rows[i]["Department"].ToString() +
"\",");
strStudents.Append("\"Age\":\"" + dt.Rows[i]["Age"].ToString() +
"\",");
strStudents.Append("\"Address\":\"" + dt.Rows[i]["Address"].ToString() +
"\"");
if (i != dt.Rows.Count - 1)
{
strStudents.Append("},");
}
}
}
strStudents.Append("}");
strStudents.Append("]}");
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.Write(strStudents.ToString());
context.Response.End();
}
public bool
IsReusable {
get
{
return false;
}
}
public
DataTable GetDt(string query)
{
SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlDataAdapter ada = new SqlDataAdapter(query, con);
DataTable dt = new DataTable();
ada.Fill(dt);
return
dt;
}
}
I have
created the JSON data format through my code. If you have ASP.Net AJAX installed on the
server you can try using JavaScriptSerializer class packed in
System.Web.Script.Serialization namespace to convert objects to JSON
format.
|