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

TOP

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

2019-09-17 18:35:23 【大中小】浏览:52次

一.概述

　　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=

首页上一页 1 2 3 下一页尾页 1/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：C# 中的Async 和 Await 的用法详解	下一篇：利用StackExchange.Redis和Log4Ne..