Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Generic ClientSide Templating with JQuery Templating Engine

0.00/5 (No votes)
3 Aug 2011 1  
When I read about Jquery templating engine , I thought of giving it a try in my leisure time and I created something which can easy the lives of me

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

When I read about Jquery templating engine , I thought of giving it a try in my leisure time and I created something which can easy the lives of me and other developers writing the same code against the different data sources.

For this purpose I first Created a web service Which Can Serialize Datatable into JSON Object.
C# Code :
[WebMethod]
public string Genericservice_records(string SpName, string[] param)
{
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var rows = new List<Dictionary<String, Object>>();
Dictionary<String, Object> row;
var temptable = new DataTable();
var objEntLib = new Microsoft.Practices.EnterpriseLibrary.Data.Sql.SqlDatabase(System.Configuration.ConfigurationManager.ConnectionStrings["<Name Of string>"].ConnectionString);
temptable = objEntLib.ExecuteDataSet(SpName, param).Tables[0];
foreach (DataRow dr in temptable.Rows)
{
row = new Dictionary<String, Object>();
foreach (DataColumn col in temptable.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}

JavaScript Code to render a table :

<script type="text/javascript">
$(document).ready(function () {
var jList = [];
jList[0] = {};
jList[0].DataType = "string";
jList[0].DataValue = "";
var call = new TSG.MODULES.TEMPLATE.PARAMETERS();
call.paramList = jList;
call.servicePath = 'AjaxService1.asmx/Genericservice_records';
call.spName = 'USP_GetCustomers';
call.timeout = 5000;
//*****************************************************//
//Below Params are required when we want external template to fix in a container
call.templateFullName = 'Templates/customers.htm';
call.ajaxImageDivID = 'customImage';
call.parentContainer = 'DataContainer';
call.errorContainer = 'DataContainer';
call.ajaxImageDivID = 'customImage';
call.errorMessage = 'Server is busy... Please try after some time!';
call.templateid = 'scrcustomerList';
//******************************************************************************
//*******************************************************//
//Below Params are required when display format is table
call.elementID = 'customerList';
call.createNew = true;
call.createSP = 'USP_InsertCustomer';
call.createtemplate = 'Templates/InsertCustomer.htm';
call.createTemplateID = 'insertCustomer';
call.createimage = 'images/new.png';
call.editable = true;
call.editImagePath = 'images/Edit.JPG';
call.editTemplate = 'Templates/EditCustomer.htm';
call.editTemplateID = 'edtCustomer';
call.editSP = 'USP_EditCustomers';
call.showDetails = true;
call.detailsSP = 'USP_GetCustomers';
var dList = [];
dList[0] = {};
dList[0].DataType = "string";
dList[0].DataValue = "CustomerID";
call.detailParamList = dList;
call.detailsImgPath = 'images/details.gif';
call.detailTemplate = 'Templates/TranscriberDetails.htm';
call.detailTemplateID = 'dtltranscribercnt';
call.deletable = true;
call.deleteImgPath = 'images/delete.jpg';
call.deleteParamList = dList;
call.deleteSP = 'USP_DeleteCustomers';
call.customCall = '';
call.sorting = true;
call.paging = true;
call.filter = true;
call.defaultPageSize = 15;
call.applyTemplate();
});

</Script>

It can also populate the Data to a dropdown box :

Below is the Javacript can be used :

<script type="text/javascript">
var pList = [];
pList[0] = {};
pList[0].DataType = "boolean";
pList[0].DataValue = "false";
var call1 = new CLIENT.MODULES.TEMPLATE.PARAMETERS();
call1.paramList = pList;
call1.servicePath = 'AjaxService1.asmx/Genericservice_records_tmt';
call1.spName = 'USP_Some_List';
call1.elementID = 'slctdemo';
call1.ajaxImageDivID = 'Div1';
call1.displayFormat = 'select'; //select
call1.displayColumn = 'Initials';
call1.valueColumn = 'Name';
call1.selector = $('#slctdemo');
call1.applyTemplate();

</Script>

This Can also make a text box as AutoComplete :

var qList = [];
qList[0] = {};
qList[0].DataType = "boolean";
qList[0].DataValue = "false";
var call2 = new CLIENT.MODULES.TEMPLATE.PARAMETERS();
call2.paramList = qList;
call2.servicePath = 'AjaxService1.asmx/Genericservice_records_tmt';
call2.spName = 'USP_SomeList_List';
call2.elementID = 'txtStartDate';
call2.ajaxImageDivID = 'Div1';
call2.displayFormat = 'text'; //select
call2.displayColumn = 'Name';
call2.selector = $('#txtStartDate');
call2.applyTemplate();

It can also Render any HTML Template in that case we need not specify any displayFormat . If We want to only repeat the templates with DataTable records in user defined format, the displayFormat wil be repeater format.

The code for this can be downoaded from the below link :

http://tekrhythm.com/downloads/

It is a simple idea and does not follow all the development guidelines. I would also like to hear from you and require your contributions to make it truely Generic ClientSide Templating (I am planning to incorporate KnockOut.js in this and would like to hear from you).

Hope this helps !

Happy Coading

 

 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here