最近在做一些局部刷新的分页工作，一般不使用既成的插件的话，就是在脚本里面重新渲染一个局部的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. 微服务常见安全认证方案Session token cookie跨域

    HTTP 基本认证 HTTP Basic Authentication(HTTP 基本认证)是 HTTP 1.0 提出的一种认证机制,这个想必大家都很熟悉了,我不再赘述.HTTP 基本认证的过程如下: ...

  2. matlab学习下拉菜单

    用matlab添加listbox控件 修改string和value值,value为几就对应第几行字符串 添加button按钮,将string值改为“选择x轴参数”,字体大小为10 再添加一个按钮,将s ...

  3. kipmi0进程单核CPU100%的解决办法

    top查看服务器进程,发现有个kipmi0的进程竟然CPU的单核占用高达100%,而且居高不下. 于是上网搜了搜大家的说法了给出的链接,大概意思是一个固件问题,可以通过修改文件来解决. 专业的解释地址 ...

  4. BZOJ : [Usaco2013 Nov]Crowded 单调队列

    正反两遍个来一次单调队列 DP 即可. Code: #include<cstdio> #include<deque> #include<algorithm> usi ...

  5. 【转载】jmeter将上一个接口返回值作为下一个接口的请求参数

    第一:通过JSON Extractor 插件来提取JSON响应结果 原文地址:http://blog.csdn.net/dreamtl/article/details/68957122 接口响应结果, ...

  6. 初识 Django

    HTTP协议 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信规则,通信规则规定 ...

  7. 函数（day08）

    C语言里可以采用分组的方式管理语句 每个语句分组叫做一个函数 多函数程序执行的时候时间分配情况必须 遵守以下规则 .整个程序的执行时间被划分成几段,每段 时间都被分配给一个函数使用 .不同时间段不能互 ...

  8. DataInputStream 数据类型数据输入输出流

    package IOliu; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.FileI ...

  9. Hexo系列(一) 搭建博客网站

    写在前面的话:本系列文章主要参考 Hexo官方说明文档,同时结合自己在使用过程中的一些心得体会,撷取下来,和大家分享分享.好,下面闲话不多说,马上开始我们的 Hexo 之旅吧 温馨提醒:博主使用的操作 ...

  10. 2019-04-18 Python Base 1

    C:\Users\Jeffery1u>python Python 3.7.3 (default, Mar 27 2019, 17:13:21) [MSC v.1915 64 bit (AMD64 ...