Razor Pagesでレイアウトぺージを利用する
Razor Pagesでレイアウトぺージを利用する手順を紹介します。
概要
ASP.NET Web Formアプリケーションではアプリケーション全体のページの共通部分をマスターページで作成できます。一方 ASP.NET Core Webアプリケーションではマスターページの仕組みが無いため、アプリケーション共通のページを作成する場合には、「レイアウトページ」の仕組みを利用します。この記事ではレイアウトページの作成方法、利用手順を紹介します。
プログラム
事前準備
こちらの記事を参照してASP.NET Core Webアプリケーションを作成します。
レイアウトページの作成
ソリューションエクスプローラーでプロジェクトの直下に Pages フォルダを作成します。
作成した Pages フォルダをクリックして選択し、右クリックします。ポップアップメニューが表示されますので[追加]メニューの[新しい項目]をクリックします。
[新しい項目の追加]ダイアログボックスが表示されます。
中央の項目の一覧から[Razor レイアウト]の項目をクリックして選択します。ダイアログボックス下部の[名前]テキストボックスにRazor レイアウトページの名称を設定します。一般的にはレイアウトページ名の先頭は "_" の文字にします。今回は "_Layout.cshtml" の名称にします。名称が設定できたらウィンドウ右下の[追加]ボタンをクリックします。
Pages フォルダ内にRazorレイアウトページの _Layout.cshtml ファイルが作成されました。
Razorページの作成
続いてRazorページを作成します。ソリューションエクスプローラーでPagesフォルダをクリックして選択し、右クリックします。ポップアップメニューの[追加]の[Razor ページ]の項目をクリックします。
[新規スキャフォールディング アイテムの追加]ダイアログボックスが表示されます。
中央のリストから[Razor ページ]の項目をクリックして選択します。選択後ダイアログボックス右下の[追加]ボタンをクリックします。
[Razor ページの追加]ダイアログが表示されます。[オプション]欄の[レイアウトページを使用する]のチェックボックスをクリックしチェックを付けます。
[Razor ページ名]には作成するRazorページ名を設定します。今回は "TestPage" としました。また[レイアウトページを使用する]チェックボックスの下部のテキストボックスにレイアウトページを指定します。テキストボックス右側の[...]をクリックすると参照ダイアログが開きますので、先ほど作成した、Razorレイアウトページ[_Layout.cshtml]を指定します。
TestPage.cshtml ファイルが作成されました。
コード
_Layout.cshtml, TestPage.cshtml, Startup.cs のコードを修正します。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<style type="text/css">
<!--
.Header{
background-color:#ceeaff;
border:1px solid #318dff;
}
.Footer{
background-color:#dddddd;
border:1px solid #808080;
}
-->
</style>
</head>
<body>
<div class="Header">ヘッダ</div>
<div>
@RenderBody()
</div>
<div class="Footer">フッタ</div>
</body>
</html>
@page
@model SimpleRazorLayoutPages.Pages.TestPageModel
@{
ViewData["Title"] = "TestPage";
Layout = "~/Pages/_Layout.cshtml";
}
<h1>TestPage</h1>
<p>テストページです。</p>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace SimpleRazorLayoutPages
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
}
}
解説
_Layout.cshtml
共通部分となるRazor レイアウトファイルです。今回はこちらのファイルにヘッダとフッタのHTMLの実装を記述しました。
TestPage.cshtml
TestPageであることがわかるよう、ページに表示文字列を追加します。今回は「テストページです。」の文字列を追加しました。レイアウトページを参照しているためページ内のコンテンツはTestPage.cshtmlの内容が表示されますが、ページの共通部分などは_Layout.cshtmlが利用されます。
Startup.cs
Razor Pagesのルーティングの実装をしています。詳しくは
こちらの記事を参照してください。
実行結果
アプリケーションを実行し、Webブラウザで
(Webアプリケーションのルート)/TestPage のURLにアクセスします。下図のページが表示されます。Razorページにレイアウトページで記述したヘッダとフッタの表示が追加されていることが確認できます。
Razorレイアウトページを利用したアプリケーションを作成できました。
参考
Razorレイアウトページ
Razorレイアウトページのファイル作成直後の雛型コードです
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Razor ページ (レイアウトページを利用する場合)
Razorレイアウトページを参照するRazorページの作成直後の雛型コードです
@page
@model SimpleRazorLayoutPages.Pages.TestPageModel
@{
ViewData["Title"] = "TestPage";
Layout = "~/Pages/_Layout.cshtml";
}
<h1>TestPage</h1>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
