Client templating with jQuery and JSON (CSASPNETClientTemplateJQueryJSON)
Summary
This project illustrates how to display a tabular data to users based on some inputs in ASP.NET application. We will see how this can be addressed with JQuery and JSON to build a tabular data display in web page. Here we use JQuery plug-in JTemplate to make it easy.
Demo
Please follow these demonstration steps below.
Step 1: Open the CSASPNETClientTemplateJQueryJSON.sln.
Step 2: Expand the CSASPNETClientTemplateJQueryJSON web application and press Ctrl + F5 to show the Default.aspx.
Step 3: You can find an HTML table on the Default.aspx page, the tabular data display by JQuery plug-in JTemplate.
Code Logical
Step 1. Create a C# "ASP.NET Empty Web Application" in Visual Studio 2010 or Visual Web Developer 2010. Name it as "CSASPNETClientTemplateJQueryJSON".
Step 2. Add two JQuery library files in JS folder of the application, These JQuery library can help us create the JQuery function and JTemplate HTML table.
Step 3. Create an ASP.NET folder named "App_Code", and add Person entity class in it. The Person class is created as the data source of table.
Step 4. Add a web form and name it as "Default.aspx" in the root directory of application. The HTML table host in default page with JQuery functions.
Step 5 The JQuery functions can receive the JSON string from code-behind file and constructing an HTML table using JQuery by plug-in JTemplate. The HTML code as shown below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="JS/jquery-jtemplates.js" type="text/javascript"></script>
.jTemplates {
background: #FF00FF;
border: 1px solid #000;
margin: 2em;
border-style:dashed;
}
<script type="text/javascript">
function GetJSONString() {
$.ajax({
url: "Default.aspx/PersonList",
type: "POST",
data: "{pageSize:5}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success:
function success(jsonString) {
$('#Zone').setTemplate($("#jTemplate").html());
$('#Zone').processTemplate(jsonString);
},
error:
function (json, status, e) {
var err = JSON.parse(json.responseText);
$("Zone").html(err.Message);
}
});
}
</script>
</head>
<body onload="return GetJSONString()">
<form id="form1" runat="server">
<b>build a tabular data display in web page.</b>
<div>
<script id="jTemplate" type="text/html">
<table class="jTemplates">
<colgroup width="100px"></colgroup>
<colgroup width="100px"></colgroup>
<colgroup width="125px"></colgroup>
<colgroup width="150px"></colgroup>
<colgroup width="150px"></colgroup>
<colgroup width="125px"></colgroup>
<colgroup width="*"></colgroup>
<tr>
<td style="border-style:dashed;;">Name</td>
<td style="border-style:dashed;">Age</td>
<td style="border-style:dashed;">Country</td>
<td style="border-style:dashed;">Address</td>
<td style="border-style:dashed;">Mail</td>
<td style="border-style:dashed;">Telephone</td>
<td style="border-style:dashed;">Comment</td>
</tr>
{#foreach $T.d as Person}
<tr>
<td style="border-style:dashed;">{ $T.Person.Name }</td>
<td style="border-style:dashed;">{ $T.Person.Age }</td>
<td style="border-style:dashed;">{ $T.Person.Country }</td>
<td style="border-style:dashed;">{ $T.Person.Address }</td>
<td style="border-style:dashed;">{ $T.Person.Mail }</td>
<td style="border-style:dashed;">{ $T.Person.Telephone }</td>
<td style="border-style:dashed;">{ $T.Person.Comment }</td>
</tr>
{#/for}
</table>
</script>
<br />
<div id="Zone">
</div>
</div>
</form>
</body>
</html>
private string name;
private int age;
private string country;
private string address;
private string mail;
private string telephone;
private string comment;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
public int Age
{
get
{
return age;
}
set
{
age = value;
}
}
public string Country
{
get
{
return country;
}
set
{
country = value;
}
}
public string Address
{
get
{
return address;
}
set
{
address = value;
}
}
public string Mail
{
get
{
return mail;
}
set
{
mail = value;
}
}
public string Telephone
{
get
{
return telephone;
}
set
{
telephone = value;
}
}
public string Comment
{
get
{
return comment;
}
set
{
comment = value;
}
}
/// <summary>
/// This method is used to provide JSON string variable.
/// </summary>
/// <param name="pageSize"></param>
/// <param name="pageNumber"></param>
/// <returns></returns>
[WebMethod]
public static List<Person> PersonList(int pageSize)
{
List<Person> personList = new List<Person>();
Person person = new Person();
person.Name = "Mike";
person.Age = 20;
person.Country = "United State";
person.Address = "Mike's address";
person.Mail = "mike@hotmail.com";
person.Telephone = "13333333333";
person.Comment = "None";
personList.Add(person);
Person personTwo = new Person();
personTwo.Name = "James";
personTwo.Age = 22;
personTwo.Country = "United State";
personTwo.Address = "James's address";
personTwo.Mail = "james@hotmail.com";
personTwo.Telephone = "13333333334";
personTwo.Comment = "Jim's comment";
personList.Add(personTwo);
Person personThree = new Person();
personThree.Name = "Nancy";
personThree.Age = 21;
personThree.Country = "China";
personThree.Address = "Nancy's address";
personThree.Mail = "nancy@hotmail.com";
personThree.Telephone = "13333333335";
personThree.Comment = "wang's comment";
personList.Add(personThree);
Person personFour = new Person();
personFour.Name = "Lisa";
personFour.Age = 28;
personFour.Country = "United Kingdom";
personFour.Address = "Lisa's address";
personFour.Mail = "lisa@hotmail.com";
personFour.Telephone = "13333333336";
personFour.Comment = "li's comment";
personList.Add(personFour);
Person personFive = new Person();
personFive.Name = "Sakura";
personFive.Age = 24;
personFive.Country = "Japan";
personFive.Address = "Sakura's address";
personFive.Mail = "sakura@hotmail.com";
personFive.Telephone = "13333333337";
personFive.Comment = "sa's comment";
personList.Add(personFive);
return personList;
}
References:
MSDN: jQuery and Microsoft
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
MSDN: JSON Object (Windows Scripting - JScript)
http://msdn.microsoft.com/en-us/library/cc836458(VS.85).aspx
JS模板引擎jTemplates使用笔记详解
JS模板引擎jTemplates使用笔记详解
一、1、jTemplate简介
jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现，可以配合AJAX,JSON一起协同工作，模板内容可以用JS代码，实现了活动更新，可以自动从服务器更新模板生成的内容。 </p><p><span style="white-space:pre"></span>使用jTemplates,<span style="font-family:arial; font-size:13px; line-height:18px">服务端只需要把对象集合序列化成json格式并传入客户端，客户端再把json对象填充模版生成列表，这样一服务端传输的只是json格式的字符串，传输的数据量可是大大减少了，二遍历绑定的工作转移到了客户端，大大减轻了服务端的压力。
jTemplates能免费应用于商业和非商业。下载地址：http://jtemplates.tpython.com，实例介绍：
- <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
- <script type="text/javascript" src="jquery-jtemplates.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- //初始化JSON数据
- var data = {
- name: '用户列表',
- list_id: '编号89757',
- table: [
- {id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},
- {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},
- {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},
- {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},
- {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}
- ]
- };
- // 附上模板
- $("#result1").setTemplateElement("template");
- // 给模板加载数据
- $("#result1").processTemplate(data);
- });
- </script>
具体步骤：
1、要使用jtemplate首先要引入两个js脚本文件：
需要注意的是，jtemplate是在jquery的基础上实现的，所以脚本的引入顺序不能颠倒，否则会报错
2、. 然后建模版：
<table border="1" style="border-collapse:collapse">
这就是jtemplate模版的格式，模版内容是放在textarea里的，而关键字和数据是用大括号包起来的，并且以$T表示数据，关键字以#作为开始标记。
3、 用json数据填充模板并展示：
4、结果显示：
5、其他形式：调用JavaScript
在｛｝里你是可以随意写javascript脚本的，如生日我想换种格式显示，显示成2001/01/01,那么我们可以把模版中的{$T.item.birthday}改成{$T.item.birthday.replace(/-/g,'/')}，然后刷新下效果如下：
当然也可以把它包装成方法来调用，如先定义js方法：
再把模版改成{formatDate($T.item.birthday)}就可以达到一样的效果了。
jtemplate的模版内容是放在textarea里面的，可是有时我们要在模版里包含textarea, 有两种方法可以实现：
1）注释模版中的内容，如模版改成：
在IE下的效果如下图：
但在其它浏览器下(本人测试过的浏览器有360，谷歌，火狐)却显示不出来。
2）移除注释并使用特殊符号的编码表示包含的textarea中的特殊标签
如把<textarea rows="2" cols="10"></textarea>替换成<textarea rows="2" cols="10"> </textarea>
这样这些主流浏览器都能正常显示了。
jemplate支持大于号>和小于号<的编码，但却不支持大括号｛｝的编码，比如想在模版中使用my97datepicker日期控件，
<input id="d11" type="text" onclick="WdatePicker({el:$dp.$('d12')})" />
它的参数是一个json对象是有大括号的，如果直接这样放入模版中是得不到想要的效果的，但也有变通的方式，如把onclick事件写到模版外面去
2、语法分析：
jTemplates包含三个预定全局变量，分别是$T、$P、$Q。$T为模板提供数据调用功能，$P为模板提供参数变量调用功能，$Q.version提供当前jTemplate的版本
jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签，帮助你处理实现复杂的业务情形。
#if 语法#for 语法#foreach 语法#cycle 语法#include 语法#param 语法南来地,北往的,上班的,下岗的,走过路过不要错过!
======================个性签名=====================
之前认为Apple 的iOS 设计的要比 Android 稳定,我错了吗?
下载的许多客户端程序/游戏程序,经常会Crash,是程序写的不好(内存泄漏?刚启动也会吗?)还是iOS本身的不稳定!!!
如果在Android手机中可以简单联接到ddms,就可以查看系统log,很容易看到程序为什么出错,在iPhone中如何得知呢?试试Organizer吧,分析一下Device logs,也许有用.
