asp.net core系列 44 Web应用 布局

一.概述

MVC的视图与Razor页面经常共享视觉和程序元素，通过使用布局来完成，布局还可减少重复代码。本章演示了以下内容的操作方法：(1)使用通用布局，(2)自定义布局，(3) 共享指令，(4)在呈现Razor页面或MVC视图之前运行通用代码。

大多数 Web 应用都有一个通用布局，可在页面间切换时，为用户提供一致体验。 布局通常包括应用页头、导航或菜单、页脚等常见的用户界面元素，还有经常使用script和css等常用的 HTML 结构。 所有这些共享元素均可在布局文件中进行定义，在Content内容视图中套用布局来共享视觉和程序元素。

　#####1.1 默认布局
按照约定: ASP.NET Core 应用的默认布局名为 _Layout.cshtml。 在vs中创建ASP.NET Core 项目使用模板的布局文件如下所示：
(1) Razor页面的布局：Pages/Shared/_Layout.cshtml

　(2) Mvc视图的布局： Views/Shared/_Layout.cshtml

下面的代码是创建的项目模板，默认的_Layout的布局文件：

    
     @* viewport兼容移动端 *@
    
    

      @* 定义不同的环境加载不同的css文件 *@
        
            
        
        
            
        
        
    
    

        @*页头区 定义页面导航 *@
        

            

                

                    StudyMVCDemo
                    
                        
                    
                    

                        

                            

                                Home
                            
                            

                                Privacy
                            
                        
                    
                
            
        

        @*内容区 调用RenderBody 来呈现内容视图 *@
        

            @* GDPR(个人数据保护条例)协议的支持，关联UseCookiePolicy*@
            
            

                @RenderBody()
            
        

        @*页脚区 *@
        

            

                © 2019 - StudyMVCDemo - Privacy
            
        

        @* 定义不同的环境加载不同的js文件 *@
        
            
            
        
        
            
            
        
        

      @* RenderSection是加载内容视图中的js文件, Scripts是一个节点名称。
      例如：在Privacy.cshtml内容视图中，需要加载一个1.js文件，下面使用节点名称Scripts。
      @section Scripts {
         
         }
      *@
        @RenderSection("Scripts", required: false)
    
    

1.2 自定义布局

上面的布局_Layout是通过_ViewStart.cshtml 分部视图来指定的。在应用程序中可以定义多个布局，并且不同的视图指定不同的布局，下面新建一个_MyLayout.cshtml布局，在Privacy.cshtml视图中应用布局，代码如下：
(1) _MyLayout.cshtml布局

    
    
    
    
    
        

            
_MyLayout页头
        

        

            
            

                @RenderBody()
            
        

        

            
_MyLayout页尾
        

    
    

(2) Privacy.cshtml视图中应用布局

@{
    ViewData["Title"] = "Privacy Policy";
    Layout = "_MyLayout";
}
@ViewData["Title"]

Privacy页面应用布局后效果如下：

1.3 共享指令_ViewImports.cshtml

MVC视图和Razor页面可以使用 Razor 指令来导入命名空间并使用依赖项注入。 由多个视图共享的指令可以在通用 _ViewImports.cshtml 文件中进行指定。 _ViewImports 文件支持以下指令：
　@addTagHelper

@removeTagHelper

@tagHelperPrefix

@using

@model

@inherits

@inject
_ViewImports.cshtml 文件可以放在任何文件夹中，在这种情况下，它只会应用于该文件夹及其子文件夹中的页面或视图。 可以在不同视图目录存放_ViewImports.cshtml。 这样文件夹级别覆盖根级别指定的 _ViewImports 设置。默认是存放在根级别下（见图1.1）。 新建项目默认引入的共享指令如下：

　@using StudyMVCDemo
   　　 @using StudyMVCDemo.Models
   　　 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers    

如果去掉using StudyMVCDemo.Models，在其它内容视图页引用实体时(比如：@model Movie)，会生成时报错。

1.4 _ViewStart.cshtml

需要在每个MVC视图或Razor页面之前，运行的代码应放在_ViewStart.cshtml文件中。 在呈现每个完整视图（不是布局页，也不是分部视图页）之前运行 _ViewStart.cshtml 中列出的语句。与_ViewImports.cshtml一样也是分层结构。比如该页默认指定的布局是Layout 。

　@{
   　　　　 Layout = "_Layout";
　　　　}

参考文献

ASP.NET Core 中的布局