zoukankan      html  css  js  c++  java
  • 何时使用PartialView方法

    http://www.cnblogs.com/chenxizhang/archive/2009/12/29/1634944.html

    我们知道,作为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);
    
  • 相关阅读:
    精心总结的Linux运维面试题汇总
    [DevExpress]DxValidationProvider分享
    PivotGridField 中对Unbound的列赋值(除法)--数据钻取
    PivotGridField 中对Unbound的列赋值(除法)
    2020后端/前段开发工程师应当掌握的专业技能一览(源自github)
    跨域的CRUD
    水印图片和文字
    导入 导出 压缩 解压
    winForm的CRUD 加上传图片 的DAL
    winForm的CRUD 加上传图片
  • 原文地址:https://www.cnblogs.com/zcm123/p/3129577.html
Copyright © 2011-2022 走看看