[Asp.net MVC]Asp.net MVC5系列——布局视图

时间 2019-11-18

标签 asp.net asp mvc mvc5 系列布局视图栏目 ASP 繁體版

原文原文链接

系列文章

[Asp.net MVC]Asp.net MVC5系列——第一个项目java

[Asp.net MVC]Asp.net MVC5系列——添加视图jquery

[Asp.net MVC]Asp.net MVC5系列——添加模型web

[Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据mvc

[Asp.net MVC]Asp.net MVC5系列——添加数据asp.net

[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则布局

[Asp.net MVC]Asp.net MVC5系列——实现编辑、删除与明细信息视图post

[Asp.net MVC]Asp.net MVC5系列——Razor语法

[Asp.net MVC]Asp.net MVC5系列——Routing特性

概述

因为前段时间，项目一直吃紧，mvc的学习中断了，周末了，内心一直惦记这事，很早就起来了，把以前写的文章看了一遍，以便找到再次入手的地方，想开始，就想着最近的lync项目的管理端有用到asp.net的模版MasterPage，那就顺便就说说asp.net mvc 中的布局视图吧。目前项目告一段落，我的正在将lync的群组空间，使用mvc进行改写。

布局视图

新建一个mvc5项目，你会在Views目录下看到一个shared的文件夹，其中视图_Layout.cshtml就是布局视图，相似于webform中的Masterpage。以下图所示，

新建一个内容视图，来应用该布局视图，如图所示，

使用布局页后，会在视图中生成以下代码，每个视图经过使用Layout属性指定它的布局：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

若是每一个视图，应用同一个布局，就会产生冗余的代码，而且难以维护，上面第一张图中你也看到了有个_ViewStart.cshtml的视图，该视图很是简单，只有一句代码，指定默认的布局：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

这个文件中的代码优先于同目录下的任何视图代码的执行。这个文件也能够递归地应用到子目录下的任何视图。

因为这个代码优先于任何视图的运行，因此一个视图能够重写Layout属性的默认值，从而从新选择一个不一样的布局。若是一组视图拥有共同的设置，那么_ViewStart.cshtml文件的好处就体现出来了，由于咱们能够在它里面对共同的视图配置进行统一的设置。若是有视图要覆盖统一的的设置，咱们只须要修改对应的属性值值便可。

若是不想应用模板页，则指定Layout属性为null便可。

在_Layout.cshtml布局视图中，你总能够找到相似下面的代码：

   <div class="container body-content">
        @RenderBody()
   </div>

@RenderBody()是一个占位符，用来标记使用这个布局的视图将渲染它们的主要内容的位置，若是您哟webform基础，你它的功能就相似于webform中的ContentPlaceHolder，可是跟ContentPlaceHolder仍是有区别的，webform中ContentPlaceHolder根据id的不一样能够有多个，可是@RenderBody()有且只能有一个。

那若是咱们想在内容页中使用引用的资源，好比css或者js怎么办？

在webform中咱们一般是这样作的

MasterPage中

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

应用该模版的webform内容页

1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
2  <script type="text/javascript" src="../js/zTree/jquery-1.4.4.min.js"></script>
3 
4 </asp:Content>

在Asp.net mvc中是这样处理的

@RenderSection

用于在模板布局中定义一个区域，在内容页能够定义一些内容来填充这个区域，例如内容页中引用的JS文件，能够填充到模板页的section位置。每一个内容页的单独一些信息，能够在模板页中这个区域显示。

@RenderSection有两个参数，第一个参数用于定义section的名称，第2个参数是布尔类型，若是为true，表示内容页必须定义这个section,若是为false,则表示内容页可定义section，也能够不定义。

例如在布局页中这样写

<head>
 @RenderSection("script",false);
</head>

在使用该布局的视图中

1 @section script{
2     <script type="text/javascript" src="../js/ParameterConfigJs.js"></script>
3     }

@RenderPage

另外也能够使用 @RenderPage进行布局

用于表示在一个页面中呈现另外一个页面的内容.参数指定要呈现的网页的位置。

咱们在Shared文件夹下面新建一个footer.cshtml文件，而后里面写上版权信息，而后在模板页中用来呈现footer页面，以下：

1 <footer>
2             <p>@RenderPage("~/Views/Shared/footer.cshtml")</p>
3 </footer>

@Html.Partial()与Html.RenderPartial()

分部页也能够达到布局的目的。

这两个方法能够用来输出一个分部页，右键添加新建项，选择MVC5分部页，就能够添加一个分部页，至关于webform中用户控件页。

@Html.Partial()的参数为用户控件名称，也就是分部页名称，返回值为string类型，能够直接输出。

@Html.RenderPartial()的参数也为用户控件名称，返回值为void,调用的时候直接把内容输出到Response中。

例如：

1             @Html.Partial("_PartialDeptTree")
2             @{
3                 Html.RenderPartial("_PartialDeptTree");
4             }

能够将组织结构数放在分布视图中来用。