最近在做一些局部刷新的分页工作，一般不使用既成的插件的话，就是在脚本里面重新渲染一个局部的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. Memcached 之内存管理与删除机制

    一.内存的碎片化 如果用c语言直接 malloc,free 来向操作系统申请和释放内存时,在不断的申请和释放过程中,形成了一些很小的内存片断,无法再利用,这种空闲,但无法利用内存的现象称为内存的碎片化 ...

  2. 不能访问windows installer 服务，可能你在安全模式下运行 windows ，或者windows installer

    windows installer服务解决方案 很多朋友在安装MSI格式的文件包时,经常会遇到windows installer出错的情况,有如下几种现象: 1.所有使用windows install ...

  3. 死磕itchat源码--config.py

    itchat的配置文件,源码: import os, platform # 版本及微信的url,二维码等 VERSION = '1.3.10' BASE_URL = 'https://login.we ...

  4. windows的时间同步工具：w32time

    windows 客户端 官方文档自己排查可以看一下 如何在 Windows Server 中配置权威时间服务器 Windows Time Service Technical Reference Win ...

  5. 设置快捷键用sublime直接打开浏览器

    1.安装sidebarenhancements插件 ctrl+shift+p —> Install Package —> 找到SideBarEnhancements 2.配置预览快捷键 / ...

  6. python之testlink模块

    1.安装:pip install TestLink-API-Python-client >>>>>>待续

  7. Golang - 处理字符串

    目录 Golang - 处理字符串 1. 字符串操作 2. 字符串转换 Golang - 处理字符串 1. 字符串操作 func Contains(s, substr string) bool 字符串 ...

  8. UOJ #277 BZOJ 4739 定向越野 (计算几何、最短路)

    手动博客搬家: 本文发表于20181208 14:39:01, 原地址https://blog.csdn.net/suncongbo/article/details/84891710 哇它居然显示出图 ...

  9. lunix下的redis数据库操作——list列表

    首先,需要先了解栈和队列的概念: 栈  先进后出:类比弹夹上的子弹,最后上进弹夹的子弹第一个使用,砌墙的板砖,后来居上 队列  先进先出:排队打饭,先到先得 创建列表: 左添加:(栈的形式添加) lp ...

  10. 【[Offer收割]编程练习赛10 C】区间价值

    [题目链接]:http://hihocoder.com/problemset/problem/1483 [题意] 中文题 [题解] 二分最后的答案; 二分的时候; 对于每一个枚举的值x; 计算小于等于 ...