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，客户端一行行的进行遍历填充。然后追加到指定的位置。搜索后效果如下：