Zenn
🐦

ASP.NET Razor Pages を最初から(4)

2023/02/14に公開
.NET
aspnet
tech

はじめに

ビューへの値の渡し方もわかったので、新しいページの作成方法と
ページ共通で使用されるレイアウト機能を確認する。

新規ページ追加

新規ページ追加
新しい項目の追加から、Razorページを追加する。
名前は、Hoge.cshtmlとしておく。
Hoge
Hoge.cshtmlとHoge.cshtml.csが作成される。
この辺りを自動で作ってくれるのはやはりVisualStudio便利だなと感心してしまう。

Hoge.cshtml
@page
@model ZennSample.Pages.HogeModel
@{
}
Hoge.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ZennSample.Pages
{
    public class HogeModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Hoge.cshtmlの中身は空っぽなので、とりあえずIndex.cshtmlに倣い少しタグを追加しておく。

Hoge.cshtml
@page
@model ZennSample.Pages.HogeModel
@{
    ViewData["Title"] = "Hoge Title";
}

<div>
   <h1>Hoge見出し</h1>
</div>

実行して、/Hogeにアクセスしてみる。

ちゃんと表示されてて、_Layout.cshtmlもデフォルトで使用されている。

_Layout.cshtmlが読み込まれる設定


_ViewImports.cshtmlと_ViewStart.cshtmlこの2つのファイルに設定が記述されている。

_ViewImports.cshtml
@using ZennSample
@namespace ZennSample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
_ViewStart.cshtml
@{
    Layout = "_Layout";
}

ものすごくシンプル。
公式に詳細な説明があるが、この2つのファイルは最初に読み込まれる。
_ViewStart.cshtmlは、Layoutに使うファイルのファイル名を設定している。
階層構造にすることができるので、フォルダごとに配置して
それぞれ別のLayoutを指定するような使い道ができる。
Pages/Account/_ViewStart.cshtmlを作って上書きするような感じか。
痒いところに手が届くつくりになっている、さすがMicrosoft謹製。

https://learn.microsoft.com/ja-jp/aspnet/core/mvc/views/layout?view=aspnetcore-7.0

_Layout.cshtmlの中を見る

_Layout.cshtml
Pages/Shared/_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ZennSample</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ZennSample.styles.css" asp-append-version="true" />
</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">ZennSample</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 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">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; 2023 - ZennSample - <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>

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

中身は、ほぼ普通のHTMLで一部にタグヘルパーや@ディレクティブが確認できる。
bootstrapとjqueryが使われている。
jQueryは10年以上前に使ってた記憶があるので、まだ現役なんだなと少し懐かしくなる。

_Layoutでのポイントは下記3点

  • <title>@ViewData["Title"]</title>
  • @RenderBody()
  • @await RenderSectionAsync("Scripts", required: false)
    この3つの役割を確認しておく。

ViewData["Title"]でタイトルを設定

各*.cshtml毎にタイトルを設定できるようにされている。

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

RenderBody()でコンテンツを設定

各ページの*.cshtmlのコンテンツがここに埋め込まれる。

RenderSectionAsyncでJavaScriptを設定

*.cshtml毎に読み込ませるJavaScriptを指定できる。

@section Scripts{
    <script src=""~/lib/***.js defer></script>
}

このように@section Scriptsという名前でScriptsセクションを作っておくと
RenderSection("Scripts")で埋め込むことができる。
requiredがfalseになっているので、必要なければセクションを作成する必要はない。
全てのページに読むJavaScriptは_Layoutにべた書きしておく。

次は実際にWebサイトを作成するうえで欠かせないパーシャルビューを確認していく。

Discussion