你的浏览器还没开启 Javascript 功能!

ASP.NET Core 入門6 ASP.NET Core MVC ビューレイアウト

前回に引き続きASP.NET Coreを学習メモです。今回はASP.NET Core MVC のRazorのレイアウト配置について学んでいきます。

前提

1. このコンテンツを扱うこと

  • Razorのマスターページのレイアウト
  • Razorのカスタムセクション
  • Razorのグローバルファイル

2. 環境情報

環境/ソフトウェア内容
オペレーティングシステムWindows 10 1903
.NET Core SDK2.1.801
IDEVisual Studio Code 1.37.1
BrowserGoogle Chrome 76.0.3809.132

マスターページテンプレートレイアウト

Webページは通常共通のレイアウト構成があります。例えばヘッダー、フッター、ナビゲーションバーなどです。
こうすることでページごとのレイアウトを気にするなく、作成するページだけのコンテンツに集中することができます。開発効率を高めるだけでなく、共通レイアウトのメンテナンスもし易いです。

RazorのビューエンジンもLayoutの概念があり、子ページからマスターページのレイアウトを適用することができます。

1. Layoutのマスターページを作成

Viewsフォルダ配下にSharedフォルダを作成し、Sharedのなかにマスターページ_Layout.cshtmlを作成します。

<html>
    <head>
        <title>@ViewBag.Title - ds.Tutorial</title>
    </head>
    <body>
        <div class="header">
            <h1 style="color: blue">ds.Tutorial</h1>
            <hr/>
        </div>

        <div class="content">
            @RenderBody()
        </div>
    </body>
</html>

@ViewBag.Titleで現在ページのタイトルを表示します。

@RenderBodyでマスターページのレイアウトを適用し、他のビューのレンダリングします。

2. ビューの子(サブ)ページを作成

/Views/Homeの配下でIndex.cshtmlを作成し、レイアウトを適用します。

@{
    Layout = "_Layout";
}

<h3>@ViewBag.Title</h3>
@ViewBag.Message

HomeController.csのIndexのAction Methodを修正します。

public IActionResult Index () {
    ViewBag.Title = "Home";
    ViewBag.Message = "Hello world ! - dongsu";
    return View();
}

3. 稼働確認

/home/indexへアクセスすると下記の画面が表示されます。

カスタムセクション

マスターページを使用することでレイアウトのコンテンツや機能を簡単に共有できます。
しかし、サブページでマスターページのコンテンツの表示しつつ、一部のコンテンツだけ書き換えたい要望が当然あります。

その場合、カスタムセクションのレンダリングする必要があります。

RazorはSectionの機能を提供しており、マスターページからRanderSectionメソッドを用いて、自分で定義したSectionを表示させることができます。

1. Sectionの定義

Sectionはサブページのみで定義することが有効です。

@section sample{
    <p>Section Content</p>
}
  • @section : Sectionを宣言するためのキーワード
  • sampel : Section名、自分で定義できます。C#の変数名と同じルールで定義可能

マスターページは@RenderSection() で定義したSectionをレンダリングできます。

  • 強制的にレンダリング

      @RenderSection("sample")
  • サブページに定義があればレンダリング

      @RenderSection("sample",false)
  • サブページに定義があればレンダリング、なければデフォルトコンテンツを表示

      @if(IsSectionDefined("sample"))
      {
          RenderSection("sample");
      }
      else
      {
          <p>Layout Content</p>
      }

2. Sectionの実装例

Controllersフォルダ配下にLayoutController.csを作成します。

using System;
using Microsoft.AspNetCore.Mvc;

namespace ds.Tutorial.web.Controllers
{
    public class LayoutController : Controller
    {
        public IActionResult SectionDemo()
        {
            return View();
        } 
    }
}

Viewsフォルダ配下にLayoutフォルダを作成します。
その中でSectionDemo.cshtmlを作成します。

@{
    Layout = "_Layout";
    ViewBag.Title = "SectionDemo";
}

<h3>@ViewBag.Title</h3>
<p>Section Demo By dongsu.dev</p>

@section footer{
    <p>Section Footer</p>
}

_Layout.cshtmlを修正し、Sectionレンダリングを追加

<html>
    <head>
        <title>@ViewBag.Title - ds.Tutorial</title>
    </head>
    <body>
        <div class="header">
            <h1 style="color: blue">ds.Tutorial</h1>
            <hr/>
        </div>

        <div class="content">
            @RenderBody()
        </div>

        <div class="footer">
            <hr/>

            @if(IsSectionDefined("footer")){
                RenderSection("footer");
            }else{
                <p>Layout Footer</p>
            }
        </div>
    </body>
</html>

3. 稼働確認

/へアクセスすると下記の画面が表示されます。

layout/sectiondemoへアクセスすると下記の画面が表示されます。

グローバルファイル

Razorはビューレンダリングする前に実行されるコードのファイルを提供しており、
それが_ViewStart.cshtmlです。通常、このファイルを使うことで規定のレイアウトを指示するために使われることが多いです。そして、このファイルはViewsフォルダの配下に配置しなければいけません。

Viewsフォルダ直下に_ViewStart.cshtmlを作成します。

@{
    Layout = "_Layout";
}

これで、すべてのページがレイアウトが適用されますので、Index.cshtmlのLayout定義を削除してOKです。

@{
    //Layout = "_Layout";
}

<h3>@ViewBag.Title</h3>
@ViewBag.Message

/へアクセスしても同じようにレイアウト適用済みの画面が表示されます。

備考

今回作成したソースコードです。

GitHubリポジトリ

では!!( `ー´)ノ