MVC下的客户端模板技术

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 = "1",
                UserName = "zhangman",
                Address = "江苏徐州",
                Phone = "1515076549"
            };
            users.Add(user);

            user = new UserModel
            {
                UserId = "2",
                UserName = "liming",
                Address = "江苏泰州",
                Phone = "1515076549"
            };
            users.Add(user);

            user = new UserModel
            {
                UserId = "3",
                UserName = "wangwu",
                Address = "江苏泰州",
                Phone = "1515076549"
            };
            users.Add(user);

            user = new UserModel
            {
                UserId = "4",
                UserName = "zhangqun",
                Address = "江苏徐州",
                Phone = "1515076549"
            };
            users.Add(user);

            user = new UserModel
            {
                UserId = "5",
                UserName = "liuliang",
                Address = "江苏常州",
                Phone = "15861887528"
            };
            users.Add(user);

            user = new UserModel
            {
                UserId = "6",
                UserName = "huangqun",
                Address = "江苏徐州",
                Phone = "15861887528"
            };
            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="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，客户端一行行的进行遍历填充。然后追加到指定的位置。搜索后效果如下：