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 GetUserList()
        {
            List users = new List();
            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 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);
        }

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

MVC下的客户端模板技术_第1张图片 

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

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

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


                    
                    

你可能感兴趣的:(json,测试,php)