分布视图刷新

何时使用PartialView方法

[转]http://blog.csdn.net/canduecho/article/details/5727511

我们知道，作为Action的响应，最常见的做法是Return View()；也就是说，返回一个视图。但是如果我们某的操作只是要返回页面的一部分，典型的情况就是，在页面上实现局部的刷新功能。

实现局部刷新功能，以前我们是自己用javascript，解析json数据来实现的。下面有一个例子

Action里面的代码

/// <summary>
/// 返回某个照片目前的评论消息
/// </summary>
/// <returns></returns>
//[AcceptVerbs(HttpVerbs.Post)]
[Authorize]
public ActionResult Blog(string id)
{
var blogs = new[]{
new {Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now.ToString()},
new {Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now.ToString()},
new {Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now.ToString()},
new {Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now.ToString()},
new {Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now.ToString()}};
return Json(blogs, "text/json");

}

在页面中的javascript代码

$.ajax({
type: "POST",
url: action + key,
dataType: "json",
success: function(result) {
$("#blog").empty();
var ol = $("<ol />");
$.each(result, function(i, n) {
var t = n.Title + ",(" + n.Author + "),创建于:" + n.Time + "<div>" + n.Details + "</div>";
$("<li />").append(t).appendTo(ol);
});

ol.appendTo($("#blog"));
}
});

这样做确实可以实现我们的功能，但太过繁琐，而且因为要在js中拼接那些div，实在是很容易出错的。

更好的做法是，首先创建一个PartialView，其实就是一个UserControl

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Web.Models.BlogItem>>" %>

<table>
<tr>
<th>
Ttile
</th>
<th>
Author
</th>
<th>
Details
</th>
<th>
Time
</th>
</tr>

<% foreach (var item in Model) { %>

<tr>

<td>
<%= Html.Encode(item.Title) %>
</td>
<td>
<%= Html.Encode(item.Author) %>
</td>
<td>
<%= Html.Encode(item.Details) %>
</td>
<td>
<%= Html.Encode(item.Time) %>
</td>
</tr>

<% } %>

</table>

然后，修改一下Action的代码

/// <summary>
/// 返回某个照片目前的评论消息
/// </summary>
/// <returns></returns>
//[AcceptVerbs(HttpVerbs.Post)]
[Authorize]
public ActionResult Blog(string id)
{

var blogs = new Models.BlogItem[]
{
new Models.BlogItem(){Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now},
new Models.BlogItem(){Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now},
new Models.BlogItem(){Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now},
new Models.BlogItem(){Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now},
new Models.BlogItem(){Title="评论标题",Details="我的评论",Author="陈希章",Time=DateTime.Now}
};

return PartialView("BlogView", blogs);
}

这样的话，js中就只要一句话了

$("#blog").load(action + key);