Razor Pages 项目中的布局视图

admin

2022-01-10

Razor Pages 项目中的布局视图解析说明

导航：

ASP.NET Core 6 RazorPages与EF Core入门视频目录
视频课程更佳：ASP.NET Core 6 RazorPages与EF Core入门视频

Web应用程序的公共部分

Header-头部
Footer-页脚
Menu-导航菜单
View-具体内容的视图

可以在布局视图中定义。

然后，每个RazorPage将其特定页面的内容注入到布局视图中。

在深入浅出ASP.NET Cored 的 MVC教程的第28部分中，我们讨论了布局视图的基础。

ASP.NET Core MVC项目和 Razor Pages项目均支持布局视图它们的差异很小。

布局视图(LayoutView)与布局页面(LayoutPage)的区别

我们想到的第一个问题是我们应该称其为“布局视图”还是“布局页面”。

从技术上讲，

RazorPage是具有@page指令的.cshtml文件。该指令使.cshtml文件成为RazorPage。
另一方面，Razor视图没有@page指令。

同样，布局视图也没有@page指令，因此从技术上讲，应将其称为布局视图，而不是布局页面。当然大部分的时候我们不会让布局视图变重，成为布局页面。

@page指令会让视图文件(.chstml)变成视图页面(razor page)。

RazorPage项目布局视图代码

在Pages/Shared路径下是布局视图"_Layout"中的代码，这些代码由ASP.NET Core Web应用程序模板生成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - StudentManagement.RazorPage</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <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-page="/Index">StudentManagement.RazorPage</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-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - StudentManagement.RazorPage - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

Razor Pages项目中的Bootstrap使用

ASP.NET Core Razor项目使用Bootstrap 4进行样式设置。您可以在布局视图的头部看到对Bootstrap css文件的引用。


<head>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>

在 Razor Pages中添加静态文件中间件

默认情况下，ASP.NET Core mvc或RazorPage应用程序将不提供静态文件。

为了能够提供静态文件，例如JavaScript，CSS和图片文件。

我们需要添加中间件UseStaticFiles()到Http请求处理管道中，并且这些文件必须存在于wwwroot文件夹中。并且wwwroot文件夹必须位于项目根路径中。

我们在Startup类的Configure()方法中将中间件添加到Http请求处理管道中。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
    });
}

我们在ASP.NET Core MVC教程的第12部分中详细讨论了静态文件中间件和各个中间件的作用。

RazorPage指定标题

在我们的布局视图中，在<head>节点位置，可以看到<title>标签它用于设置页面标题。

这样布局视图就可以为RazorPage指定标题。

而在RazorPage页面中可以使用ViewData传递其特定标题

@{
    ViewData["Title"] = "Home page";
}

导航到布局视图_Layout.cshtml从ViewData查询标题并将其设置为页面标题。

<head>
    <title>@ViewData["Title"] - YoYoMooc学生管理-RazorPage</title>
</head>

ASP.NET Core Razor Pages项目中的导航菜单

布局视图中的以下部分定义了导航菜单。

这是Bootstrap 4响应式导航菜单。在台式机等大屏幕设备上，菜单已完全展开。在像手机这样的小屏幕设备上，菜单则会显示成折叠菜单。


    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">隐私</a>
                        </li>
                    </ul>
                </div>

asp-page标签帮助器

就RazorPage而言，突出的HTML片段是asp-page标签帮助器即taghelper。该标签帮助器会将A元素的href属性值设置到特定页面。

在以下示例中，asp-page指向Index.cshtml RazorPage


<a class="nav-link text-dark" asp-page="/Index">
   首页
</a>

生成的HTML

<a class="nav-link text-dark" href="/">首页</a>

我们在ASP.NET Core MVC 教程中第35至40部分中讨论了的TagHelper。

asp-append-version TagHelper

此标签帮助器可以用作为静态文件提供缓存清除行为的属性。例如，我们可以在<img>或<script> 元素上使用它，以提供图像和JavaScript文件的缓存清除行为。


<script src="~/js/site.js" asp-append-version="true">
</script>

我们ASP.NET Core MVC 的标记助手37部分的ASP.NET Core 教程。

Razor布局页面RenderBody

每个RazorPage都会在调用@RenderBody()方法的位置插入特定页面的内容。

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

这部分是帮助我们布局页面能够成为布局页面的核心功能。

视图页面中的Sections

ASP.NET Core中的布局视图也可以包含一个或多个Section。

一个部分可以是可选的或强制的。它提供了一种组织某些页面元素放置位置的方法。

例如，一个单独的RazorPage可以使用Scripts插入自定义JavaScript文件。然后，将在结束</ body>标记之前呈现JavaScript文件。


<html>
    <body>
        @*其他的Html代码*@

        @RenderSection("Scripts", required: false)
    </body>
</html>

我们在ASP.NET Core MVC 教程的第29部分中的“布局视图”中讨论了各节点的使用。

添加新的 Razor Pages

我们需要一个新的 Razor Pages来显示学生列表。我们希望所有与学生相关的 Razor Pages都在“Students”文件夹中。因此，在Pages文件夹中添加一个名为Students的新文件夹。接下来，添加一个名为Index.cshtml的新 Razor Pages。

在_Layout.cshtml上的以下列表项显示“学生”菜单项。

  <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="/Students/Index">
                                学生
                            </a>
                        </li>

导航到“Students”文件夹中的“/Students/Index”路径，在Index.cshtml。由于Index.cshtml是默认设置，因此导航到/ Students也将提供Index.cshtml的 Razor Pages。

RazorPages