asp.net使用jquery模板引擎jtemplates呈现表格

前端技术 2023/09/09 .NET

在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>

本文地址：https://www.stayed.cn/item/23461

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案