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);
    
  • 相关阅读:
    Node 12 值得关注的新特性
    vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
    解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据
    博客搬迁到 gitHub + hexo 去了, 博客园以后比较少更新
    Jenkins结合shell脚本实现(gitLab/gitHub)前端项目自动打包部署服务器
    GET 和 POST 的区别 以及为什么 GET请求 比 POST请求 更快
    Git常用命令及使用,GitLab/GitHub初探,Git/Svn区别
    pc端结合canvas实现简单签名功能
    N的阶乘末尾0的个数和其二进制表示中最后位1的位置
    实现一个动态存储分配
  • 原文地址:https://www.cnblogs.com/zcm123/p/3129577.html
Copyright © 2011-2022 走看看