1、引言

  在Web编程中,我们有时经常需要使用Ajax来访问服务端的接口,然后使用这些返回的数据(一般格式都是JSON)来展示客户端的相关信息。例如:在一个商品列表,我们点击某一样的商品,查看该商品的信息信息。这时通过指定的ID来获取商品详细信息后,我们很多时候都是讲HTML和JavaScript结合起来。通过构造HTML标签和JS的填充来展示相关的界面。这样大量的标签拼接,一来不容易维护,二来也导致在编码过程中容易出现错误。今天我给大家做一下客户端模板技术的简单介绍。希望可以通过这个技术在一定程度上可以缓解类似的问题。

2、mustache.js简介

  Mustache 是一个 Logic-less templates,原本是基于javascript 实现的模板引擎,类似于 freemark和valicity ,但是比freemark和valicity更加轻量级更加容易使用,经过拓展目前支持JS,java,.NET,PHP,C++等多种平台下开发!官方地址是:http://mustache.github.io。下面就来介绍使用mustache进行简单的一些应用。

  我在项目中新建HomeController,模拟人员的管理和相关操作。如图所示:新建一个方法默认生成5个人员信息(模拟从数据库查询数据)

private List<UserModel> GetUserList()
{
List<UserModel> users = new List<UserModel>();
UserModel user = new UserModel
{
UserId = "",
UserName = "zhangman",
Address = "江苏徐州",
Phone = ""
};
users.Add(user); user = new UserModel
{
UserId = "",
UserName = "liming",
Address = "江苏泰州",
Phone = ""
};
users.Add(user); user = new UserModel
{
UserId = "",
UserName = "wangwu",
Address = "江苏泰州",
Phone = ""
};
users.Add(user); user = new UserModel
{
UserId = "",
UserName = "zhangqun",
Address = "江苏徐州",
Phone = ""
};
users.Add(user); user = new UserModel
{
UserId = "",
UserName = "liuliang",
Address = "江苏常州",
Phone = ""
};
users.Add(user); user = new UserModel
{
UserId = "",
UserName = "huangqun",
Address = "江苏徐州",
Phone = ""
};
users.Add(user); return users;
}

  在控制器中我们可以提供这样的方法

public ActionResult Index(string userName = "")
{
List<UserModel> list = GetUserList();
if (!userName.Equals(""))
{
list = list.Where(user => user.Address.Contains(userName)).ToList();
}
//使用JavaScript客户端模版技术
if (Request.IsAjaxRequest())
{
return Json(list, JsonRequestBehavior.AllowGet);
}
return View(list);
}

  在界面第一次运行的时候我们我们看到运行的界面如下:

  我们需要按照地域进行搜索,例如搜索出徐州的用户。这时我们可以使用Ajax进行访问Index方法。然后将返回的JSON使用模板技术进行填充。注意:这个例子只是作为简单的介绍而已,不具有代表性。

  首先我们来看下模板的定义。在Script标签中我们可以定义一个模板。然后JSON值需要填充的位置是有mustache.js的语法进行定义(占位)

<script type="text/template" id="searchUsers">
<table style="width:100%">
<tr>
<td>{{UserId}}</td>
<td>{{UserName}}</td>
<td>{{Address}}</td>
<td>{{Phone}}</td>
</tr>
</table>
</script>

  然后使用Jquery对服务器发起Ajax请求获取JSON数据,这时我们可以使用mustache.js中的方法来填充占位处。这样就形成一段正常的Html代码。Ajax代码如下(模拟点击搜索操作)

<script type="text/javascript">
$("#search").click(function () {
var key = $("#key").val().trim();
if (key == "") { return; }
$.ajax({
cache: false,
type: "GET",
url: "/Home/Index",
data: { "userName": key },
success: function (data) {
//服务器端返回的是JSON的话typeof()返回Object对象
//否则reurn View()返回html界面,typeof()返回string
if(typeof(data)==typeof(new Object())){
var result = "";
$("#myusers").html("");
$.each(data, function (index, row) {
var template = $('#searchUsers').html(); //获取模版的html
var htmls = Mustache.render(template, row); //把每行的数据填充到模版得到html内容
$("#myusers").append(htmls);
});
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert('加载失败');
}
});
});

  可以看到在代码中通过服务器返回的JSON,客户端一行行的进行遍历填充。然后追加到指定的位置。搜索后效果如下:

MVC下的客户端模板技术的更多相关文章

  1. 快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。

    快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...

  2. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  3. MVC下判断PC和移动端

    MVC下的PC端和移动端,其实没区别,写法都一样,只是有两点才改变了它们 第一点:就是单击这个页面任何地方的时候判断是移动端还是客户端: 第二点:新建手机端区域Areas(简单来说:Areas就相当于 ...

  4. MVC下分页的自定义分页一种实现

    1.引言 在MVC开发中我们经常会对数据进行分页的展示.通过分页我们可以从服务端获取指定的数据来进行展示.这样既节约了数据库查询的时间也节约了网络传输的数据量.在MVC开发中使用的比较多的应该是MVC ...

  5. trait与policy模板技术

    trait与policy模板技术 我们知道,类有属性(即数据)和操作两个方面.同样模板也有自己的属性(特别是模板参数类型的一些具体特征,即trait)和算法策略(policy,即模板内部的操作逻辑). ...

  6. Django之--通过MVC架构的html模板展示Hello World!

    上一篇:Django之--网页展示Hello World! 初步说明了如何使用Django来显示hello world,本文略微进阶下使用html模板来展示hello world~ 首先在mysite ...

  7. MVC下压缩输入的HTML内容

    在MVC下如何压缩输出的HTML代码,替换HTML代码中的空白,换行符等字符? 1.首先要了解MVC是如何输出HTML代码到客户端的,先了解下Controller这个类,里面有很多方法,我们需要的主要 ...

  8. ASP.NET MVC下的四种验证编程方式[续篇]

    在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...

  9. ASP.NET MVC下的四种验证编程方式

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...

随机推荐

  1. spring spel

    •Spring 表达式语言(简称SpEL):是一个支持运行时查询和操作对象图的强大的表达式语言.   •语法类似于 EL:SpEL 使用 #{…} 作为定界符,所有在大框号中的字符都将被认为是 SpE ...

  2. 寻找数组中的第K大的元素,多种解法以及分析

    遇到了一个很简单而有意思的问题,可以看出不同的算法策略对这个问题求解的优化过程.问题:寻找数组中的第K大的元素. 最简单的想法是直接进行排序,算法复杂度是O(N*logN).这么做很明显比较低效率,因 ...

  3. JVM学习笔记:虚拟机性能监控

    JDK中除了包含与开发密切相关的jar包外,还包含了很多非常实用的工具.在%JAVA_HOME%\bin\目录下面除了命令行工具外,还包括了几个强大的可视化工具.这些工具可以辅助我们开发.调试应用程序 ...

  4. Leetcode 375. Guess Number Higher or Lower II

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  5. 【BZOJ-3696】化合物 树形DP + 母函数(什么鬼)

    3696: 化合物 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 165  Solved: 85[Submit][Status][Discuss] D ...

  6. javascript向上向下取整

    alert(Math.ceil(25.9)); alert(Math.ceil(25.5)); alert(Math.ceil(25.1)); alert(Math.round(25.9)); ale ...

  7. Teamviewer11现在无法捕捉屏幕画面。这可能是由于快速的用户切换或远程桌面会话断开/最小化。

    如果你用“远程桌面”连过去开启Teamviewer的话,当你退出“远程桌面”后,外网用Teamviewer连接就会出现这个问题. 解决方法: 不用远程连接过去开启Teamviewer,直接在在电脑本机 ...

  8. Oracle 11g新特性

    文章转自网络 Oracle 11g于2007年7月11日美国东部时间11时(北京时间11日22时)正式发布,11g是甲骨文公司30年来发布的最重要的数据库版本,根据用户的需求实现了信息生命周期管理(I ...

  9. poj2284 欧拉公式

    题意:给出一图形,求该图形把平面分成了几部分 欧拉公式: http://blog.csdn.net/wangxiaojun911/article/details/4586550 对于二维平面上的情况. ...

  10. GitBash上传代码不计入贡献的问题处理

    发现最近写的代码,通过GitBash上传到github,但是格子确一个都没亮,今天通过一番检索解决了此问题,特做记录: 通过这篇文章找到了原因所在: GitHub 更新代码到底怎样才算贡献? 通过这篇 ...