在Asp.net MVC 中，使得我们能够更加自由控制我们所想显示HTML。通常情况下，都要做一下数据列表。那么我们可以手动去拼一个表格出来，但这样有时对于复杂的表格说，那就JS代码比较复杂了。我们可以借助JS下的模板引擎，来实现这一功能。下面要介绍就是JTemplates，它也是基于Jquery的。
看效果:
看VIEW代码：
<%@ 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="http://www.cnblogs.com/Content/default.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/Scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/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>
<!--http://wintersun.cnblogs.com--> <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 $T as uu} {#include ROW root=$T.uu} {#/for} </table> {#/template MAIN} {#template ROW} <tr class="{#cycle values=['','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> {#/template ROW} </script> </body> </html>
通过ajax返回json数据，setTemplate根据Id设置模板，然后ApplyTemplate就可以了。
CS代码:
/// <summary> /// Templetes the data. /// </summary> /// <returns></returns> /// <remark>Author : PetterLiu 2009-02-21 20:51 http://wintersun.cnblogs.com </remark> public JsonResult TempleteData() { IList<UserEntity> userlist = new List<UserEntity>() { new UserEntity(){UserName="Tina",PassportID=23433,Email="asdfa@asdf.com", Password="NKASD", Url="http://www.g.cn"} , new UserEntity(){UserName="Lucy",PassportID=3444,Email="2v2@asdf.com", Password="v23sda", Url="http://www.qq.cn"} }; return Json(userlist); }
参考Url:
jTemplates http://jtemplates.tpython.com/
JQuery http://jquery.com/
ASP.NET MVC http://www.asp.net/mvc/
希望本文对您有帮助。
Author : Petter Liu http://wintersun.cnblogs.com/