教你在 MVC 中使用 Razor 呈现 Ajax 数据

目前在大部分人还是在使用JQ作为操作JS的选择，但对于 ajax 加载数据，大部分人还是选择在js中拼字符串，这种方式简直是考眼力，甚至大篇的字符串拼接眼睛都要花了。

其实使用 PartialView 就可以把这个事情做的很简单很简单。

用 ajax 加载一篇帖子的回复做例子

目前是不是都是这样写的？
Action 里：

[HttpGet]
public ActionResult GetComments(int page,int size)
{
    var list = new List<CommentViewModel>();
    for (int i = 0; i < 10; i++)
    {
        list.Add(new CommentViewModel { Id = i + 1, Content = "回复" + i });
    }

    var result = list.Skip((page - 1) * size).Take(page * size);

    return Json(result, JsonRequestBehavior.AllowGet);
}

这只是返回一种 json 数据

而你的 js 里大概是这样：

$.ajax({
   url:'xxxx',
   success:function(data){
       var html = '';
       for(var i = 0; i<data.length;i++){
           html+='<li class="list-group-item">'+ data.Content +'</li>';
           //....
       }
       $('#comment').html(html);
   }
})

这种拼串很容易眼花的，我相信你们都有体验。

现在我们使用 PartialView 的方式来做，就会有更好的体验

public ActionResult Comments(int page,int size)
{
    var list = new List<CommentViewModel>();
    for (int i = 0; i < 10; i++)
    {
        list.Add(new CommentViewModel { Id = i + 1, Content = "回复" + i });
    }

    var result = list.Skip((page - 1) * size).Take(page * size);

    return PartialView(result);
}

page 和 size 这参数是做分页用的，这个不用解释了吧。

然后我们建一个View

@model IEnumerable<WebApplication1.Controllers.CommentViewModel>
<ul class="list-group">
    @foreach (var item in Model)
    {
        <li class="list-group-item">id:@item.Id；@item.Content</li>
    }
</ul>

这段代码也不难理解，自己用Razor 做呈现就对了。

接下来就到了你加载评论的部分了，我就用一个按钮来手动点击加载：

<button onclick="load()" class="btn btn-primary">加载评论</button>
<div id="comment"></div>

@section scripts{
    <script type="text/javascript">
        function load() {
            $.get('@Url.Action("Comments")?page=1&size=5', function (data) {
                $('#comment').html(data);
            })
        }
    </script>
}

点击按钮，执行 load() 函数，这里用到了 $.get，地址就是刚才你那个 Comments 的 Action。其实就是去访问了这个 View，然后把 html 内容传回来了。

这样做是不是更简单呢？