Generic ClientSide Templating with JQuery Templating Engine

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