使用MVC框架中要注意的问题(六):何时使用PartialView方法

来源：互联网发布：手机精美时钟软件编辑：程序博客网时间：2024/06/08 05:54

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

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

Action里面的代码

        ///         /// 返回某个照片目前的评论消息        ///         ///         //[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");        }

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

在页面中的javascript代码

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

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

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

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl>" %>    <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的代码

        ///         /// 返回某个照片目前的评论消息        ///         ///         //[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);