利用 MVC 的分布视图完成 ajax 加载

很多时候我们都需要使用 ajax 来加载列表页面，最普遍最耗时的无非就是在 js 中拼串，比如下面这段代码：

$.get('/api/list',function(data){
    var template = '';
    for(var i = 0; i < data.length; i++){
        template += "<tr>";
        template += "<td>" + data[i].id + "</td>";
        template += "<td>" + data[i].title + "</td>";
        template += "<td>" + data[i].createTime + "</td>";
        template += "<td>" + data[i].status + "</td>";        
        //...
        template += "</tr>";
    }
    $("#list").html(template);
})

这样的代码不仅什么都需要手写，一大串的拼接字符串，嵌套多了你都不知道对应的标记是哪一个，特别容易不好找错误。

现在我们就利用 MVC 的特性把这个问题给简单化。

首先先建一个 Action

public ActionResult _GetList()
{
    var list = GetAllList();//调用一个获取数据源的方法，这里只是一个例子哈
    return PartialView(list);//注意，这里返回的是 Partial 分布视图
}

根据刚才的这个 Action 建一个分布视图的 _GetList.cshtml

<!--这个是 mvc 的 model 对象，由 action 返回来的-->
@model IEnumerable<News> 

@foreach(var item in Model)
{
    <tr>
        <td>@item.Id</td>
        <td>@item.Title</td>
        ...
    </tr>
}

然后把刚才的 ajax 的 js 改成这样

$.get('@Url.Action("_GetList")', function(data){
    $('#list').html(data);
})

结果和你之前拼串一样，但是代码量和效率却成倍提升。

这种技能还不赶紧 Get 起来？