主页 > 知识库 > asp.net使用jquery模板引擎jtemplates呈现表格

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

热门标签:电商新玩法 客户服务 国美全国运营中心 人工智能 电销业务 网站排名优化 百度AI接口 科大讯飞语音识别系统

在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()
{
IListUserEntity>userlist=newListUserEntity>()
{
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);
}

您可能感兴趣的文章:
  • Springboot读取templates文件html代码实例
  • 深入浅析springboot中static和templates区别
  • SpringBoot中关于static和templates的注意事项以及webjars的配置
  • SpringBoot用JdbcTemplates访问Mysql实例代码
  • AngularJs Understanding Angular Templates
  • 详解Python的Django框架中的templates设置
  • Blitz templates 最快的PHP模板引擎
  • Springboot访问templates html页面过程详解

标签:厦门 枣庄 POS机 益阳 攀枝花 拉萨 咸宁 南平

巨人网络通讯声明:本文标题《asp.net使用jquery模板引擎jtemplates呈现表格》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266