使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用。使用Mustache的大致步骤是:

→从后台拿到json数据
→获取前台页面预先定义好Mustache模版(占位符必须和从后台传来的的字段或属性名一致)
→遍历每行的json数据,使用Mustache.render(template, row)方法把json数据填充到对应的占位符,得到html内容
→把html内容追加到页面的某个位置

 

显示一个足球俱乐部的下拉框:

 

当点击下拉框,显示该俱乐部的球员:

 

创建一个ClubModel.edmx模型,Team和Player是1对多关系:

 

把模型中的数据更新到数据库,并在数据库中添加一些数据:

 

创建与Team对应的ViewModel为TeamVm。

using System.Web.Mvc;
 
namespace MvcApplication1.Models.ViewModels
{
    public class TeamVm
    {
        public TeamVm()
        {
            Players = new List<SelectListItem>();
        }
        [Display(Name = "俱乐部")]
        public int ID { get; set; }       
        public string Name { get; set; }
        public IEnumerable<SelectListItem> Players { get; set; }
    }
}
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

创建与Plyer对应的ViewModel为PlayerVm。

using System.ComponentModel.DataAnnotations;
 
namespace MvcApplication1.Models.ViewModels
{
    public class PlayerVm
    {
        [Display(Name = "球员")]
        public string Name { get; set; }
        [Display(Name = "位置")]
        public string Position { get; set; }
    }
}
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

HomeController部分2个控制器方法,一个显示下拉框,一个响应下拉框的change事件。

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MvcApplication1.Models;
using MvcApplication1.Models.ViewModels;
 
namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        //把Team显示到下拉框中
        public ActionResult Index()
        {
            var teamVm = new TeamVm();
            using (var context = new ClubModelContainer())
            {
                var teams = context.Team.ToList();
                teamVm.Players = teams.Select(t => new SelectListItem()
                {
                    Text = t.Name,
                    Value = t.ID.ToString()
                });
            }
            return View(teamVm);
        }
 
        //响应下拉框
        public JsonResult PlayersByTeamID(int id)
        {
            IEnumerable<PlayerVm> playersVmList = new List<PlayerVm>(); 
            using (var context = new ClubModelContainer())
            {
                var players = context.Player.Where(x => x.TeamID == id).ToList();
                playersVmList = players.Select(p => new PlayerVm()
                {
                    Name = p.Name,
                    Position = p.Position
                });
            }
            return Json(playersVmList, JsonRequestBehavior.AllowGet);
        }
 
    }
}
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Home/Index.cshtml视图部分:

● 定义Mustache模版,占位符与json数据一致。

● 下拉框触发change事件,获取后台返回的json数据,填充到Mustache模版模版,并把html内容追加到页面。

 

@model MvcApplication1.Models.ViewModels.TeamVm
 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<div>
    @Html.LabelFor(model => model.ID)
    @Html.DropDownListFor(model => model.ID, Model.Players)
</div>
<div id="playersDiv">
    
</div>
 
@section scripts
{
    <script src="~/Scripts/mustache.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#ID').change(function() {
                var id = $('#ID').val();
                var playersDiv = $('#playersDiv');
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@Url.Action("PlayersByTeamID","Home")",
                    data: { "id": id },
                    success: function (data) {
                        var result = "";
                        playersDiv.html('');
                        $.each(data, function (index, row) {
                            var template = $('#players').html(); //获取模版的html
                            var bookData = Mustache.render(template, row);//把每行的数据填充到模版得到html内容
                            playersDiv.append(bookData);
                        });
 
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('加载失败');
                    }
                });
            });
        });
    </script>
    <script type="text/template" id="players">
        <table>
            <tr>
                <td>球员:</td>
                <td>{{Name}}</td>
            </tr>
            <tr>
                <td>位置:</td>
                <td>{{Position}}</td>
            </tr>
        </table>
        <hr />
    </script>
}
 
 
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

MVC客户端使用 Mustache.js把json数据填充到模版中的更多相关文章

  1. JS解析json数据并将json字符串转化为数组的实现方法

    json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...

  2. js读取json数据(php传值给js)

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  3. js声明json数据,打印json数据,遍历json数据

    1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...

  4. 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  5. JS解析json数据

    JS解析json数据(如何将json字符串转化为数组) 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q ...

  6. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  7. js处理json数据,java处理json数据

    一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...

  8. js声明json数据,打印json数据,遍历json数据,转换json数据为数组

    1.js声明json数据: 2.打印json数据: 3.遍历json数据: 4.转换json数据为数组; //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿 ...

  9. JS解析Json 数据并跳转到一个新页面,取消A 标签跳转

    JS解析Json 数据并跳转到一个新页面,代码如下 $.getJSON("http://api.cn.abb.com/common/api/staff/employee/" + o ...

随机推荐

  1. CF312B 【Archer】

    容易算出这人第一次胜利的概率,第二次的,第三次的…… 好像可以无限乘下去 但是这题精度卡到1e-6 不妨设一个eps,当这次胜率小于eps时,就break掉,反正它已经不影响答案了 我设的是eps=1 ...

  2. C++链接与装载

    1..obj文件的内部结构 2.映射到进程虚拟空间 3.链接的原理    C++ Code  123456789   1.未解决符号表:提供了所有在该编译单元里引用但是定义并不在本编译单元里的符号及其 ...

  3. MS-SQL2005服务器登录名、角色、数据库用户、角色、架构的关系

    MS SQL2005对2000进行了很大的改进,而用户关系这部分也变得相当复杂了,很多朋友都对此一知半解!下面,我将把我应用中总结的和大家分享下,先从概念入手,希望对不理解的朋友有点提示. 今天我们要 ...

  4. node模拟socket

    什么是Socket?网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket通信流程 基于net模块实现socket 服务端SocketServer.j ...

  5. Pyhton核心编程-Chap2习题-DIY

    在学Python,在看<Python核心编程>的pdf,做了Chap2的题目,答案为DIY # Filename: 2-11.py # Author: ChrisZZ mylist = [ ...

  6. 对于ElasticSearch与Hadoop是如何互相调用的?

    1.在HDFS中,数据是以文件形式保存的,比如JSON: https://blog.csdn.net/napoay/article/details/68945483 2.python读写HDFS,一般 ...

  7. ***四种参数传递的形式——URL,超链接,js,form表单

    什么时候用GET,  查,删 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:// ...

  8. ClassLoader.loadClass和Class.forName的区别

    为什么要把ClassLoader.loadClass(String name)和Class.forName(String name)进行比较呢,因为他们都能在运行时对任意一个类,都能够知道该类的所有属 ...

  9. HBase应用之微博案例

    一. 需求分析 1) 微博内容的浏览,数据库表设计 2) 用户社交体现:关注用户,取关用户 3) 拉取关注的人的微博内容 二. 代码实现 代码设计总览: 1.创建命名空间以及表名的定义 //获取配置 ...

  10. day2编写购物商城(1)

    作业:购物商城 商品展示,价格 买,加入购物车 付款,钱不够     具体实现了如下功能: 1.可购买的商品信息显示 2.显示购物车内的商品信息.数量.总金额 3.购物车内的商品数量进行增加.减少和商 ...