Razor Pages でレイアウトページのタイトルを設定する

Razor Pages でレイアウトページのタイトルを設定する方法を紹介します。

概要

Razor Pages でタイトルを設定する場合、一般的な方法としてViewBagを利用する方法があります。また、別の方法として、ViewDataを利用する方法もあります。この記事ではそれぞれの方法での実装コードを紹介します。

コンテンツページでViewBagを設定する方法

コード

ViewBagを利用する方法です。以下のレイアウトページを作成します。

_Layout.cshtml

<!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>

PageTitle1.cshtml

@page
@{
  ViewData["Title"] = "タイトルタグのテスト(その1)";
  Layout = "~/Pages/_Layout.cshtml";
}

<h1>TestPage</h1>
<p>テストページです。</p>

PageTitle2.cshtml

@page
@{
  ViewData["Title"] = "タイトルタグのテスト(その2)";
  Layout = "~/Pages/_Layout.cshtml";
}

<h1>TestPage</h1>
<p>テストページです。</p>

解説

レイアウトページのtitleタグに @ViewBag.Title を記述します。ViewBagオブジェクトのTitleフィールドの値をタイトルタグに出力するコードになります。

<title>@ViewBag.Title</title>

コンテンツページのcshtmlファイルのコードセクションでページごとのタイトルを設定します。設定はViewDataオブジェクトの添え字にプロパティ名を設定します。今回の例では ViewBag.Title をタイトルタグに設定するため ViewData["Title"] = (タイトルタグに設定したい値) とします。

@page
@{
  ViewData["Title"] = "タイトルタグのテスト(その1)";
  Layout = "~/Pages/_Layout.cshtml";
}

実行結果

上記のプロジェクトを実行し、(アプリケーションルート)/PageTitle1 のURLを開きます。
下図のページが表示されます。WebブラウザのタブにページのTitleタグの値が表示されます。タブの文字列は "タイトルタグのテスト(その1)" となっており、コンテンツページで設定した、Titleタグの値がレイアウトページのTitleタグに反映されていることが確認できます。

続いて、(アプリケーションルート)/PageTitle1 のURLを開きます。
下図のページが表示されます。Webブラウザの上部のタブのテキストは "タイトルタグのテスト(その2)" となっており、コンテンツページの値が Titileタグに反映されていることが確認できます。

ViewDataを使う方法

コード

ViewDataを利用する方法です。コードは先ほどのViewBagとほぼ同じです。

_LayoutViewData.cshtml

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>@ViewData["PageTitle"]</title>
  <style type="text/css">
    <!--
    .Header {
      background-color: #ffed87;
      border: 1px solid #ff6a00;
    }

    .Footer {
      background-color: #96a47c;
      border: 1px solid #415b00;
    }
    -->
  </style>
</head>
<body>
  <div class="Header">ヘッダ</div>
  <div>
    @RenderBody()
  </div>
  <div class="Footer">フッタ</div>
</body>
</html>

コンテンツページのコードは次の通りです。

PageViewDataTitle1.cshtml

@page
@{
  ViewData["PageTitle"] = "ViewDataタイトルのテスト(その1)";
  Layout = "~/Pages/_LayoutViewData.cshtml";
}

<h1>TestPage1</h1>
<p>テストページ1です。(ViewData)</p>

PageViewDataTitle2.cshtml

@page
@{
  ViewData["PageTitle"] = "ViewDataタイトルのテスト(その2)";
  Layout = "~/Pages/_LayoutViewData.cshtml";
}

<h1>TestPage2</h1>
<p>テストページ2です。(ViewData)</p>

解説

レイアウトページのtitleタグに @ViewData["PageTitle"] を記述します。ViewDataオブジェクトのPageTitleの値をタイトルタグに出力するコードになります。

<title>@ViewData["PageTitle"]</title>

コンテンツページのcshtmlファイルのコードセクションでページごとのタイトルを設定します。設定はViewDataオブジェクトの添え字にプロパティ名を設定します。今回の例では ViewBag.Title をタイトルタグに設定するため ViewData["PageTitle"] = (タイトルタグに設定したい値) とします。

@page
@{
  ViewData["PageTitle"] = "ViewDataタイトルのテスト(その1)";
  Layout = "~/Pages/_LayoutViewData.cshtml";
}

実行結果

上記のプロジェクトを実行し、(アプリケーションルート)/PageViewDataTitle1 のURLを開きます。
下図のページが表示されます。WebブラウザのタブにページのTitleタグの値が表示されます。タブの文字列は "ViewDataタイトルのテスト(その1)" となっており、コンテンツページで設定した、Titleタグの値がレイアウトページのTitleタグに反映されていることが確認できます。

続いて、(アプリケーションルート)/PageViewDataTitle2 のURLを開きます。
下図のページが表示されます。Webブラウザの上部のタブのテキストは "ViewDataタイトルのテスト(その2)" となっており、コンテンツページの値が Titileタグに反映されていることが確認できます。

ページモデルクラスで設定する方法

ページクラスモデルでレイアウトページのTitleタグを設定する場合のコードです。

コード

レイアウトページのcshtmlです。

_Layout.cshtml

<!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>

コンテンツページのcshtmlは以下のコードです。

PageTitle3.cshtml

@page
@model SimpleRazorLayoutPages.Pages.PageTitle3Model
@{
  Layout = "~/Pages/_Layout.cshtml";
}

<h1>TestPage3</h1>
<p>テストページ3です。</p>

PageTitle3.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleRazorLayoutPages.Pages
{
  public class PageTitle3Model : PageModel
  {
    public void OnGet()
    {
      ViewData["Title"] = "タイトルタグのテスト(その3)";
    }
  }
}

PageTitle4.cshtml

@page
@model SimpleRazorLayoutPages.Pages.PageTitle4Model
@{
  Layout = "~/Pages/_Layout.cshtml";
}

<h1>TestPage4</h1>
<p>テストページ4です。</p>

PageTitle4.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleRazorLayoutPages.Pages
{
  public class PageTitle4Model : PageModel
  {
    public void OnGet()
    {
      ViewData["Title"] = "タイトルタグのテスト(その4)";
    }
  }
}

解説

レイアウトページはViewBagオブジェクトを記述します。

    <title>@ViewBag.Title</title>

ページモデルクラスで、ViewDataオブジェクトにページタイルと瑠に設定した文字列を設定します。ViewBagオブジェクトのTitleプロパティを参照するため、 ViewDataは ViewData["Title"] に値を代入します。

    public void OnGet()
    {
      ViewData["Title"] = "タイトルタグのテスト(その4)";
    }

実行結果

上記のプロジェクトを実行します。(アプリケーションルート)/PageTitle3 のURLを開きます。
下図のページが表示されます。WebブラウザのタブにページのTitleタグの値が表示されます。タブの文字列は "タイトルタグのテスト(その3)" となっており、ページモデルクラスで設定した値がレイアウトページのTitleタグに反映されていることが確認できます。