• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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()
    {
    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页面过程详解
    上一篇:使用linq读取分隔符文本文件
    下一篇:datatable行转列示例分享
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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