asp.net使用jquery模板引擎jtemplates呈现表格
在asp.net mvc 中，使得我们能够更加*控制我们所想显示html。通常情况下，都要做一下数据列表。那么我们可以手动去拼一个表格出来，但这样有时对于复杂的表格说，那就js代码比较复杂了。我们可以借助js下的模板引擎，来实现这一功能。下面要介绍就是jtemplates，它也是基于jquery的。
<%@ page language="c#" inherits="system.web.mvc.viewpage" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="content/default.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="scripts/jquery-jtemplates.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "post",
url: '<%=url.action("templetedata", "home") %>',
data: "{}",
contenttype: "application/json; charset=utf-8",
datatype: "json",
success: function(msg) {
//instantiate a template with data
applytemplate(msg);
}
});
});
function applytemplate(msg) {
$('#container').settemplate($("#templateresultstable").html());
$('#container').processtemplate(msg);
}
</script>
</head>
<body>
<div id="container"> </div>
<%-- results table template --%>
<script type="text/html" id="templateresultstable">
{#template main}
<table cellpadding="10" cellspacing="0">
<tr>
<th>username</th>
<th>password</th>
<th>url</th>
<th>email</th>
<th>passportid</th>
</tr>
{#foreach$tasuu}
{#includerowroot=$t.uu}
{#/for}
</table>
{#/templatemain}
{#templaterow}
<trclass="{#cyclevalues=['','evenrow']}">
<td>{$t.username.bold()}</td>
<td>{$t.password}</td>
<td>{$t.url.link($t.url)}</td>
<td>{$t.email.link('mailto:'+$t.email)}</td>
<td>{$t.passportid}</td>
</tr>
{#/templaterow}
</script>
</body>
</html>
通过ajax返回json数据，settemplate根据id设置模板，然后applytemplate就可以了。
cs代码:
///<summary>
///templetesthedata.
///</summary>
///<returns></returns>
publicjsonresulttempletedata()
{
ilist<userentity>userlist=newlist<userentity>()
{
newuserentity(){username="tina",passportid=23433,email="asdfa@asdf.com",password="nkasd",url="http://www.gefds.cn"}
,newuserentity(){username="lucy",passportid=3444,email="2v2@asdf.com",password="v23sda",url="http://www.qqfsad.cn"}
};
returnjson(userlist);
}