使用mustache.js 模板引擎输出html

public class StudentModel
{
[Key]
public int StuId { get; set; } [Display(Name = "姓名")]
[StringLength()]
[Required(ErrorMessage = "姓名必填")]
public string StuName { get; set; }
[StringLength()]
[Display(Name = "住址")]
[DataType(DataType.MultilineText)]
//[Required(ErrorMessage = "住址必填")]
public string Address { get; set; } [Display(Name = "年龄")]
[Required(ErrorMessage = "年龄必填")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:c}")]
public int Age { get; set; }
}

public class Mvc5WebContext : DbContext
{
// You can add custom code to this file. Changes will not be overwritten.
//
// If you want Entity Framework to drop and regenerate your database
// automatically whenever you change your model schema, please use data migrations.
// For more information refer to the documentation:
// http://msdn.microsoft.com/en-us/data/jj591621.aspx public Mvc5WebContext() : base("name=Mvc5WebContext")
{
} public System.Data.Entity.DbSet<Mvc5Web.Models.StudentModel> StudentModels { get; set; } }

public class StudentController : Controller
{
public JsonResult JsonList()
{
//StudentModel stu = new StudentModel { StuId = 100, StuName = "wilson100", Age = 100, Address = "HG" };
return Json(db.StudentModels, JsonRequestBehavior.AllowGet);
}
}

<script id="template" type="text/html">
<table border="">
<tr>
<th>姓名</th>
<th>地址</th>
<th>年龄</th>
</tr>
{{#studentLists}}
<tr>
<td>{{StuName}}
</td>
<td>{{Address}}
</td>
<td>{{Age}}
</td>
</tr>
{{/studentLists}}
</table>
</script>

$("#btnTest").click(function () {
$.get("JsonList", function (data) {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, { studentLists: data });
$('#target').html(rendered);
});
});