在Asp.net MVC 中，使得我們能夠更加自由控制我們所想顯示HTML。通常情況下，都要做一下數(shù)據(jù)列表。那么我們可以手動去拼一個表格出來，但這樣有時對于復雜的表格說，那就JS代碼比較復雜了。我們可以借助JS下的模板引擎，來實現(xiàn)這一功能。下面要介紹就是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>
