最近在做一些局部刷新的分页工作，一般不使用既成的插件的话，就是在脚本里面重新渲染一个局部的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. icheck使用

    1.使用: <link rel="stylesheet" href="css/skins/all.css">或者<link rel=" ...

  2. spring cloud(五) hystrix

    开启feign 熔断 hystrix    整合hystrix-dashboard监控面板 1. 服务调用者boot工程 pom引入依赖 <!-- hystrix-dashboard 监控依赖 ...

  3. 通俗易懂之SpringMVC&Struts2前端拦截器详解

    直接进入主题吧!一,配置Struts2的拦截器分两步走1配置对应的拦截器类:2在配置文件Struts.xml中进行配置拦截器同时在Strust2中配置拦截器类有三种方法1实现Interceptor接口 ...

  4. java线程启动原理分析

    一.前言不知道哪位古人说:人生三大境界.第一境界是:看山是山看水是水:第二境界是看山不是山看水不是水:第三境界:看山还是山看水还是水.其实我想对于任何一门技术的学习都是这样.形而上下者为之器,形而上者 ...

  5. 基于日志实现ssh服务防护脚本

    grep -n "Failed password" secure | sed -nr 's/.*from(.*)port.*/\1/gp' | sort -n |uniq -c|s ...

  6. Html-如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  7. 使用canvas截图网页为图片并解决跨域空白以及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...

  8. 通用 mapper

    一.为什么需要通用 mapper 插件 通用 mapper 插件可以自动的生成 sql 语句. 虽然 mybatis 有逆向工程,可以直接生成 XxxMapper.xml 文件,但是这种生成的方式存在 ...

  9. hdu 1239

    首先,p,q>=2,所以p,q<=50000; 然后,我们观察a<=b<1000,而p,q<=100000.那么,q>=10000时,p<=10,则a/b&l ...

  10. TensorFlow 入门之手写识别CNN 三

    TensorFlow 入门之手写识别CNN 三 MNIST 卷积神经网络 Fly 多层卷积网络 多层卷积网络的基本理论 构建一个多层卷积网络 权值初始化 卷积和池化 第一层卷积 第二层卷积 密集层连接 ...