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

原文: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的布局文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
     @* viewport兼容移动端 *@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - StudyMVCDemo</title>

      @* 定义不同的环境加载不同的css文件 *@
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
                  crossorigin="anonymous"
                  integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
        </environment>
        <link rel="stylesheet" href="~/css/site.css" />
    </head>
    <body>

        @*页头区 定义页面导航 *@
        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container">
                    <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">StudyMVCDemo</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" 　　　　　　　　　　　　　　　　aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        @*内容区 调用RenderBody 来呈现内容视图 *@
        <div class="container">
            @* GDPR(个人数据保护条例)协议的支持，关联UseCookiePolicy*@
            <partial name="_CookieConsentPartial" />
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>

        @*页脚区 *@
        <footer class="border-top footer text-muted">
            <div class="container">
                &copy; 2019 - StudyMVCDemo - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            </div>
        </footer>

        @* 定义不同的环境加载不同的js文件 *@
        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
            </script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
            </script>
        </environment>
        <script src="~/js/site.js" asp-append-version="true"></script>

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

　　

　　1.2 自定义布局

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

　　　　(1) _MyLayout.cshtml布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - StudyMVCDemo</title>
    </head>
    <body>
        <header>
            <div style="height:50px; width:auto;  text-align:center; border:solid red 1px" >_MyLayout页头</div>
        </header>

        <div class="container">
            <partial name="_CookieConsentPartial" />
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>

        <footer class="border-top footer text-muted">
            <div style="height:50px; width:auto;  text-align:center; border:solid red 1px">_MyLayout页尾</div>
        </footer>

    </body>
    </html>

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

@{
    ViewData["Title"] = "Privacy Policy";
    Layout = "_MyLayout";
}
<h1>@ViewData["Title"]</h1>

　　　　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 中的布局

　　　　

原文地址：https://www.cnblogs.com/lonelyxmas/p/10557659.html

时间： 2024-08-03 20:41:47

asp.net core系列 44 Web应用 布局的相关文章

asp.net core 系列 16 Web主机 IWebHostBuilder

原文:asp.net core 系列 16 Web主机 IWebHostBuilder 一.概述 在asp.net core中,Host主机负责应用程序启动和生存期管理.host主机包括Web 主机(IWebHostBuilder)和通用主机(IHostBuilder).Web 主机是适用于托管 Web 应用:通用主机(ASP.NET Core 2.1 或更高版本)是适用于托管非 Web 应用:在未来的版本中,通用主机将适用于托管任何类型的应用,包括 Web 应用. 通用主机最终将取代 Web

asp.net core系列 41 Web 应用 MVC视图

一.MVC视图 在Web开发的MVC和Razor中,都有使用视图,在Razor中称为"页"..cshtml视图是嵌入了Razor标记的HTML模板. Razor 标记使用C#代码,用于与HTML 标记交互以生成发送给客户端的网页.在MVC目录结构中,Views / [ControllerName] 文件夹下用于创建视图,其中Views/Shared 文件夹下的视图是控制器共享的视图. 1.1  视图页Razor 标记 下面是Views/Home 文件夹中创建一个 About.cshtm

【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)

工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相关知识就不介绍了, 这里主要是从头编写一个asp.net core 2.0 web api的基础框架. 我一直在关注asp.net core 和 angular 2/4, 并在用这对开发了一些比较小的项目. 现在我感觉是时候使用这两个技术去为企业开发大一点的项目了, 由于企业有时候需要SSO(单点登

ASP.NET CORE系列【一】搭建ASP.NET CORE项目

原文:ASP.NET CORE系列[一]搭建ASP.NET CORE项目 为什么要使用 ASP.NET Core? NET Core 刚发布的时候根据介绍就有点心里痒痒,微软的尿性都懂的,新东西bug太多,现在2.0也发布很久了,决定研究一下. ASP.NET Core官方文档https://docs.microsoft.com/en-us/aspnet/core/getting-started ASP.NET Core 具有如下优点: 生成 Web UI 和 Web API 的统一场景. 集成

从头编写 asp.net core 2.0 web api 基础框架 (1)

原文:从头编写 asp.net core 2.0 web api 基础框架 (1) 工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相关知识就不介绍了, 这里主要是从头编写一个asp.net core 2.0 web api的基础框架. 我一直在关注asp.net core 和 angular 2/4, 并在用这对开发了一些比较小的项目. 现在我感

asp.net core 系列 20 EF基于数据模型创建数据库

原文:asp.net core 系列 20 EF基于数据模型创建数据库 一.概述 本章使用 Entity Framework Core 构建执行基本数据访问的 ASP.NET Core MVC 应用程序.使用迁移(migrations)基于数据模型创建数据库,是一种code first模式.可以在Windows 上使用 Visual Studio 2017,或在 Windows.macOS 或 Linux 上使用 .NET Core CLI 来学习.已经安装了NET Core 2.1 SDK,这

asp.net core系列 30 EF管理数据库架构--必备知识 迁移

原文:asp.net core系列 30 EF管理数据库架构--必备知识 迁移 一.管理数据库架构概述 EF Core 提供两种主要方法来保持 EF Core 模型和数据库架构同步.一是以 EF Core 模型为基准,二是以数据库为基准. (1)如果希望以 EF Core 模型为准,请使用迁移. 对 EF Core 模型进行更改时,此方法会以增量方式将相应架构更改应用到数据库,以使数据库保持与 EF Core 模型兼容.  (2)如果希望以数据库架构为准,请使用反向工程. 使用此方法,可通过将数

asp.net core系列 36 WebAPI 搭建详细示例

原文:asp.net core系列 36 WebAPI 搭建详细示例 一.概述 HTTP不仅仅用于提供网页.HTTP也是构建公开服务和数据的API强大平台.HTTP简单灵活且无处不在.几乎任何你能想到的平台都有一个HTTP库,因此HTTP服务可以覆盖广泛的客户端,包括浏览器,移动设备和传统的桌面应用程序. ASP.NET Web API 是一个框架,基于.NET Framework 或.NET Core 之上构建 Web API. 从本章开始学习Web API系列时,先从一个示例开始,下面使用A

asp.net core系列 46 Identity介绍

一. Identity 介绍 ASP.NET Core Identity是一个会员系统,可为ASP.NET Core应用程序添加登录功能.可以使用SQL Server数据库配置身份以存储用户名,密码和配置文件数据.或者,可以使用另一个持久性存储,例如,Azure表存储.下面学习如何使用Identity注册,登录以及基架标识. 1.1 Identity搭建演示 下面使用vs 2017来演示: 1.选择“文件” > “新建” > “项目”. 2.选择“ASP.NET Core Web应用程序”.