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

    php中$_POST变量是一个数组,用于收集来自method="post"的值,内容是有HTTP POST方法发送的变量名称和值. 从带有POST方法的表单发送的信息,对任何人都是 ...

  2. Leetcode刷题笔记——查找

    33.Search in Rotated Sorted Array 题目描述: 给定一个被翻转的整型升序数组nums,数组中无重复元素,如[4,5,6,7,0,1,2],和一个整数target.要求在 ...

  3. day8 面向对象编程基础

    活在当下的程序员应该都听过“面向对象编程”一词,也经常有人问能不能用一句话解释下什么是“面向对象编程”,我们先来看看比较正式的说法. 把一组数据结构和处理它们的方法组成对象(object),把相同行为 ...

  4. jboss的下载安装、环境变量配置以及部署

    1. 下载安装 http://jbossas.jboss.org/downloads/   jdk为1.7 我下载的是:JBoss AS7.1.1.Final 2. 解压安装包  D:\program ...

  5. CentOS7.2安装nginx失败

    错误提示: Loaded plugins: fastestmirror Loading mirror speeds from cached hostfile * base: mirrors.aliyu ...

  6. [luogu4251 SCOI2015] 小凸玩矩阵 (二分图最大匹配)

    传送门 Description Input Output 输出包含一行,为选出的 n 个数中第 k 大数的最小值. Sample Input 输入样例1: 2 3 1 1 2 4 2 4 1 输入样例 ...

  7. case...when...then if 用法

    select case when if 的一些用法 概述:sql语句中的case语句与高级语言中的switch语句,是标准sql的语法,适用于一个条件判断有多种值的情况下分别执行不同的操作. 首先,让 ...

  8. linux文件的特殊权限及隐藏权限

    基础知识 相信大家应该都知道linux的文件基本权限,使用ls -l命令可以显示文件的基本权限,"-rwxrwxrwx.",第一位表示文件的属性(是文件-  ,目录d等),后面每隔 ...

  9. python爬虫07 | 有了 BeautifulSoup ，妈妈再也不用担心我的正则表达式了

    我们上次做了 你的第一个爬虫,爬取当当网 Top 500 本五星好评书籍 有些朋友觉得 利用正则表达式去提取信息 太特么麻烦了 有没有什么别的方式 更方便过滤我们想要的内容啊 emmmm 你还别说 还 ...

  10. vue+ElementUI 日期选择器 获取时间戳

    <div class="block"> <span class="demonstration">daterange</span&g ...