最近在做一些局部刷新的分页工作，一般不使用既成的插件的话，就是在脚本里面重新渲染一个局部的html，把需要局部分页的模块重写一遍，还需要在控制器里再定义一个方法返回所需的局部数据，这种做法相当冗余，所以在这里推荐jTemplates的使用。

jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现，可以配合AJAX,JSON一起协同工作，模板内容可以用JS代码，实现了活动更新，可以自动从服务器更新模板生成的内容。

需要引用jquery.js和jquery-jtemplates.js两个脚本，可以到jTemplates官网下载，附地址（点击导航栏的“Download”进入下载页，选择所需版本下载即可）：

http://jtemplates.tpython.com/

　

直接在我这里也可以下载哦~附链接：jTemplates_0_8_4。

　

话不多说，直接贴代码哈~

页面html以及js代码：

 @{

     Layout = null;

 }

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>Index</title>

     <script src="~/Scripts/jquery.js"></script>

     <script src="~/Scripts/jquery-jtemplates.js"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             debugger;

             var val = $("#JsonInfos").val();

             var parVal = JSON.parse(val);

             var data = {

                 TotalCount: ,

                 Lists: parVal,

             };

             // 设置模板

             $("#result").setTemplateElement("templateContainer");

             //$("#result").setTemplate('<a href="#" onclick="foo({#var $T})">click me</a>');

             // 处理模板

             $("#result").processTemplate(data);

             $('.btnClick').on('click', function () {

                 var str = $(this).data('name');

                 alert(str);

             });

         });

     </script>

 </head>

 <body>

     <input id="JsonInfos" type="text" value="@ViewBag.JsonInfos" style="display:none;" />

     <div id="result">

     </div>

     <textarea id="templateContainer" style="display: none;">

         <table border="">

             <tr>

                 <td>

                     姓名

                 </td>

                 <td>

                     年齡

                 </td>

                 <td>

                     时间

                 </td>

                 <td></td>

             </tr>

             {#if $T.Lists != null && $T.Lists.length > 0}

             {#foreach $T.Lists as row}

             <tr>

                 <td>

                     {$T.row.Name}

                 </td>

                 <td>

                     {$T.row.Age}

                 </td>

                 <td>

                     {$T.row.CreateDate}

                 </td>

                 <td>

                     <a href="#" class="btnClick" data-name="{$T.row.Name}">click me</a>

                 </td>

             </tr>

             {#/for}

             @*{#for i =  to $T.Lists.length-}

                 <tr>

                     <td>

                         {$T.Lists[$T.i].Name}

                     </td>

                     <td>

                         {$T.Lists[$T.i].Age}

                     </td>

                     <td>

                         {$T.Lists[$T.i].CreateDate}

                     </td>

                 </tr>

                 {#/for}*@

             {#else}

             <tr><td colspan="">暂无数据！！</td></tr>

             {#/if}

         </table>

     </textarea>

 </body>

 </html>

Index.cshtml

后台控制器的代码：

 using Newtonsoft.Json;

 using System.Collections.Generic;

 using System.Web.Mvc;

 namespace jTemplateTest.Controllers

 {

     public class jTemplateTestController : Controller

     {

         // GET: jTemplateTest

         public ActionResult Index()

         {

             List<Info> infos = new List<Info>()

             {

                 new Info {Name = "Tomcat", Age = "", CreateDate = "2017-08-03 10:34:37"},

                 new Info {Name = "Jerry", Age = "", CreateDate = "2017-08-03 10:34:37"},

                 new Info {Name = "Mike", Age = "", CreateDate = "2017-08-03 10:34:37"},

                 new Info {Name = "Jim", Age = "", CreateDate = "2017-08-03 10:34:37"},

                 new Info {Name = "Merry", Age = "", CreateDate = "2017-08-03 10:34:37"}

             };

             ViewBag.JsonInfos = JsonConvert.SerializeObject(infos);

             return View();

         }

     }

     public class Info

     {

         public string Name { get; set; }

         public string Age { get; set; }

         public string CreateDate { get; set; }

     }

 }

jTemplateTestController.cs

我这边数据是从后台传到前台，以json字符串格式传到后台，再接收赋值给data，也可以直接前台写入死数据。

这边引入了Newtonsoft.json的序列化方法，需要引用Newtonsoft.Json.dll(点击可下载)。

/******************************我是可爱的分割线******************************/

jTemplates的教程，包括{#if}{#foreach}{#for}的简单使用的更多相关文章

  1. ABP教程（四）- 开始一个简单的任务管理系统 - 实现UI端的增删改查

    接上一篇:ABP教程(三)- 开始一个简单的任务管理系统 – 后端编码 1.实现UI端的增删改查 1.1添加增删改查代码 打开SimpleTaskSystem.sln解决方案,添加一个“包含视图的MV ...

  2. .NET轻量级MVC框架：Nancy入门教程(二)——Nancy和MVC的简单对比

    在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy的优势在哪里?和微软的MVC比 ...

  3. RabbitMQ系列教程之一：我们从最简单的事情开始！Hello World（转载）

    RabbitMQ系列教程之一:我们从最简单的事情开始!Hello World 一.简介 RabbitMQ是一个消息的代理器,用于接收和发送消息,你可以这样想,他就是一个邮局,当您把需要寄送的邮件投递到 ...

  4. Tinyhttpd - 超轻量型Http Server，使用C语言开发，全部代码只有502行(包括注释)，附带一个简单的Client（Qt也有很多第三方HTTP类）

    - 2. Tinyhttpd tinyhttpd是一个超轻量型Http Server,使用C语言开发,全部代码只有502行(包括注释),附带一个简单的Client,可以通过阅读这段代码理解一个 Htt ...

  5. IT兄弟连 Java语法教程 数组 使用foreach循环遍历数组元素

    从JDK5之后,Java提供了一种更简单的循环:foreach循环,也叫作增强for循环,这种循环遍历数组和集合更加简洁.使用foreach循环遍历数组和集合元素时,无需获得数组或集合的长度,无需根据 ...

  6. 【RL-TCPnet网络教程】第38章 TFTP简单文件传输基础知识

    第38章      TFTP简单文件传输基础知识 本章节为大家讲解TFTP(Trivial File Transfer Protocol,简单文件传输协议)的基础知识,方便后面章节的实战操作. (本章 ...

  7. 【RL-TCPnet网络教程】第33章 SMTP简单邮件传输协议基础知识

    第33章      SMTP简单邮件传输协议基础知识 本章节为大家讲解SMTP(Simple Mail Transfer Protocol,简单邮件传输协议)的基础知识,方便后面章节的实战操作. (本 ...

  8. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  9. BI之SSAS完整实战教程4 -- 部署至SSAS进行简单分析

    上一篇已经创建了多维数据集的结构. 接下来我们将多维数据集的架构定义发送到Analysis Services实例,部署到AS上去. 文章提纲 部署和浏览多维数据集 SSMS使用简介 总结 一.部署和浏 ...

随机推荐

  1. 使用CImage类 显示图片

    在不适用openCv的一种时候,使用CImage显示图片数据,并且直接嵌入DC框中. 使用CImage 在pic控件里显示图片 void CMyCalLawsDlg::MyShowImage( CIm ...

  2. Maven服务器的使用之Maven桌面项目和Maven Web项目的创建

    Maven的使用 Maven功能强大, 可以参与管理软件的整个生命周期. Java软件开发中的jar包管理更是Maven的绝技. 1.创建Maven桌面项目 1.1 选择菜单创建Maven项目 1.2 ...

  3. windows 下安装mysql　成功版

    mysql 下载地址 http://dev.mysql.com/downloads/ zip版下载 解压到本地 假设文件保存在C:\mysql-5.7.17-winx64 1.以管理员身份运行cmd. ...

  4. UNIX C 文件权限 Part2_day01

    1.文件访问测试 测试调用进程对指定文件是否拥有足够的访问权限 #include <unistd.h> int access(const char* pathname,int mode); ...

  5. [jzoj 5778]【NOIP提高A组模拟2018.8.8】没有硝烟的战争 (博弈论+dp)

    传送门 Description 被污染的灰灰草原上有羊和狼.有N只动物围成一圈,每只动物是羊或狼. 该游戏从其中的一只动物开始,报出[1,K]区间的整数,若上一只动物报出的数是x,下一只动物可以报[x ...

  6. 快速上手Linux 玩转典型应用_慕课网笔记

    1.没有exe安装程序 2.区分大小写 3.一切皆文件 4.文件后缀不是那么重要,只是为了好识别 -------------------------------------------------- ...

  7. rmq的st算法模板题 nyoj 119

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比 ...

  8. 0926mysql join的原理

    转自 http://www.cnblogs.com/shengdimaya/p/7123069.html MySQL JOIN原理   先看一下实验的两张表: 表comments,总行数28856 表 ...

  9. php7 使用imagick 的坑

    imagick是一个PHP的扩展,用ImageMagick提供的API来进行图片的创建与修改,不过这些操作已经包装到扩展imagick中去了,最终调用的是ImageMagick提供的API. Imag ...

  10. 服务器session，Tomcat有自己的session维护机制，apache有自己的session维护机制

    1.SESSION一般不是你说的这种工作方式,你打开一个浏览器,再打开一个,请求同一个网址,然后其中一个登陆,另外一个绝对不会也登陆.SESSION和浏览器本身这个程序就是挂钩的,一般不通过IP和端口 ...