zoukankan      html  css  js  c++  java
  • [转]在asp.net mvc中使用PartialView返回部分HTML段

    本文转自:http://blog.csdn.net/sandy945/article/details/6307750

    问题链接: MVC如何实现异步调用输出HTML页面

     

    该问题是个常见的 case, 故写篇文章用于提示新人。

     

    在asp.net mvc中返回View时使用的是ViewResult,它继承自ViewResultBase 同时它还有个兄弟PartialViewResult

     

    相信聪明的你已经知道了它俩的区别了,没错 一个用于返回整体,另一个返回局部(部分)。

     

    假设我有这样一个需求,输入用户名,然后返回相关信息。之前的做法可能会是用json格式来返回用户的相关信息,然后到页面去渲染相关

     

    的HTML,如果产生的相关HTML比较大的话,我还是建议你沿用之前的方案(返回json),因为传输的数据少,响应快一些。

     

    反之,PartialViewResult 则是返回部分HTML 的不错选择。

     

    下面就让我们看下如何使用PartialViewResult:

     

    Layout.cshtml

     

    <!DOCTYPE html>

    <html>

    <head>

        <title>@ViewBag.Title</title>

        <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    </head>

    <body>

        @RenderBody()

    </body>

    </html>

     

    Index.cshtml

     

    @{

        ViewBag.Title = "Index";

        Layout = "~/Views/Shared/_Layout.cshtml";

    }

    <h2>

        PartialView Demo</h2>

    <div>

        Please write your name here

        <input type='text' id='txtName' />

        <input type='button' value='submit' id='btnOK' />

    </div>

    <br />

    <div id='content'>

    </div>

    <script type="text/javascript">

        $(function () {

            $('#btnOK').click(function () {

                var data = { Name: $('#txtName').val()};                

                $.ajax({

                    type: "POST",

                    url: '@Url.Action("PartialViewDemo""Home")',

                    data: data,

                    datatype: "html",

                    success: function (data) {

                            $('#content').html(data);                   

                    },

                    error: function () {

                        alert("处理失败!");

                    }

                });

            });      

        });

    </script>

     

    ViewUserControl.cshtml (Partial View)

     

    @model Sample.Models.PartialViewDemoViewModel 

    <div> 

     

     

    <h2>ViewUserControl.cshtml</h2> 

     

    @Model.dt

    <br /><br />

    Hello~  @Model.Name 

    </div>

     

    or ViewUC.ascx   (View User Control)

     

    <%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl<Vancl.Sample.Models.PartialViewDemoViewModel>" %>

     

    <div>

     

    <h2>ViewUC.ascx</h2> 

     

    <%=Model.dt %>

     

    <br /><br />

     

    Hello~  <%=Model.Name %>

     

    </div>

     

    Model

     

    public class PartialViewDemoViewModel

        {

            public string Name { setget; }

            public DateTime? dt { setget; }

        }

     

    Action

     

    [HttpPost]

            public ActionResult PartialViewDemo(PartialViewDemoViewModel model)

            {

                model.dt = DateTime.Now;

                return PartialView("ViewUserControl", model); 

                //return PartialView("ViewUC", model); 

            } 

     

    调用 Controller.PartialView方法时,可以指定 Partial View or View User Control 效果是一样的

     

    不写后缀时,会查找同目录和Shared目录下的文件,也就是在同目录或Shared目录下时可以省略后缀名。

     

    如果目录下存在同名的情况,会找第一个并返回。

     

    eg: 同目录下有 ViewUserControl.ascx 和 ViewUserControl.cshtml

     

    这时使用 return PartialView("ViewUserControl");

     

    会返回 ViewUserControl.ascx 的内容,因为字母a在c前 :)

     

    如果在这种情况下想调用 ViewUserControl.cshtml

     

    则需要写全路径,return PartialView("~/Views/Home/ViewUserControl.cshtml");

     

    当想访问的 Partial View or View User Control 在不同目录时,也可以通过全路径的方式访问。

     

    Hope this helps,

    Sandy

  • 相关阅读:
    博客园注册成功,博客开张啦!
    Android零基础开发专题三:Android SDK帮助文档使用方法
    Android平台介绍
    Android零基础开发专题五:Activity、BroadcastReceiver、Service、Content Provider
    Android零基础开发专题四:Android 项目文件结构
    Android零基础开发专题二:Hello Android,I am coming!
    与大家分享一下我的面试经历,也算对自己的一次总结。大家有什么心得,意见都可以畅所欲言。
    分布式安装sde、oracle后,其它机器如何通过arcsde连接oracle?
    【SQLSERVER】存儲過程的寫法格式規格
    利用SQLServer复制功能实现与Oracle数据库同步(转)
  • 原文地址:https://www.cnblogs.com/freeliver54/p/4253172.html
Copyright © 2011-2022 走看看