• 在asp.net mvc模式中使用PartialView返回部分HTML


    PartialView(返回HTML(局部))

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

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

    假设我有这样一个需求,输入用户名,然后返回相关信息。之前的做法可能会是用json格式来返回用户的相关信息,然后到页面去渲染相关的HTML,如果产生的相关HTML比较大的话,我还是建议你沿用之前的方案(返回json),因为传输的数据少,响应快一些。 

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

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

    Layout.cshtml

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>@ViewBag.Title</title>
     5     <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
     6 </head>
     7    <body>
     8 
     9       @RenderBody()
    10 
    11    </body>
    12 </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)

     1 @model Sample.Models.PartialViewDemoViewModel 
     2 
     3 <div>
     4 
     5 <h2>ViewUserControl.cshtml</h2> 
     6 
     7 @Model.dt<br /><br />
     8 
     9 Hello~  @Model.Name
    10 
    11 </div>

    or ViewUserControl.ascx

     1 <%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl<Vancl.Sample.Models.PartialViewDemoViewModel>" %>
     2 
     3 <div>
     4 <h2>ViewUC.ascx</h2> 
     5 
     6 <%=Model.dt %><br /><br />
     7 
     8 Hello~  <%=Model.Name %>
     9 
    10 </div>


     

    Model

    1 public class PartialViewDemoViewModel
    2 
    3 {
    4 
    5         public string Name { set; get; }
    6 
    7         public DateTime? dt { set; get; }
    8 
    9 }

    Action

    1 [HttpPost]
    2 public ActionResult PartialViewDemo(PartialViewDemoViewModel model)
    3 {
    4      model.dt = DateTime.Now;
    5      return PartialView("ViewUserControl", model); 
    6 
    7      //return PartialView("ViewUC", model); 
    8 }

    调用 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 在不同目录时,也可以通过全路径的方式访问。

  • 相关阅读:
    android SQLiteDatabase数据库使用的时候 常见问题
    ArrayList与LinkedList的基本添加删除方法 模拟栈 队列
    ImageView小技巧
    TextView 小技巧
    悬浮窗
    帧动画布局文件 animation-list
    VideoView的全屏问题
    FragmentPagerAdapter与FragmentStatePagerAdapter区别
    观察者模式 DataObserver
    vue中filter的用法
  • 原文地址:https://www.cnblogs.com/abc1069/p/4004256.html
Copyright © 2020-2023  润新知