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);
        }

以上的代码中，应用到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点了，就不展开讲了，效果如图：