MVC&JQuery如何根据List动态生成表格

背景：在编码中，常会遇到根据Ajax的结果动态生成Table的情况，本篇进行简要的说明。这已经是我第4、5篇和Ajax有关的随笔了，互相之间有很多交叠的地方，可自行参考。

后台代码如下：

public ActionResult Index()
{

return View();
}

public ActionResult GetStus()
{
List<Stu> ListStu = new List<Stu>(){
new Stu{Age=18,City="北京",Name="SharpL"},
new Stu{Age=18,City="北京",Name="Lily"},
new Stu{Age=18,City="南京",Name="Lucy"}
};
return Json(ListStu);
}

View Code
以上的代码中，应用到Stu类，请自行构建。

HTML代码如下：

<div>
<button id="btnGenerate">生成学生表格</button>
<table id="destTable"></table>
</div>
<table id="moban" style="display:none">
<tr>
<td>{Name}</td>
<td>{Age}</td>
<td>{City}</td>
</tr>
</table>

注意第二张表格是不显示的，只是作为JQuery中用来生成表格的模板使用，“destTable”是用来显示在页面上的。

JQuery代码如下：

$(function () {
$("#btnGenerate").click(function () {
$.post("/GenerateTable/GetStus", "", function (result) {
if (result != null) {
$.each(result, function (index,value) {
var tmp = value;
var html = $("#moban").html();
html=html.replace(/{Name}/g, value.Name);
html=html.replace(/{Age}/g, value.Age);
html=html.replace(/{City}/g, value.City);
$("#destTable").append(html);
});
}
});
});
});

代码结构应该还算比较清晰，已经是早上5点了，就不展开讲了，效果如图：