Help us understand the problem. What is going on with this article?

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 SDK 2.1.801
IDE Visual Studio Code 1.37.1
Browser Google 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へアクセスすると下記の画面が表示されます。

2019-09-19-14-13-30.png

カスタムセクション

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

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

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. 稼働確認

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

2019-09-19-14-55-09.png

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

2019-09-19-14-55-48.png

グローバルファイル

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

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

@{
    Layout = "_Layout";
}

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

@{
    //Layout = "_Layout";
}

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

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

2019-09-19-14-55-09.png

備考

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

GitHubリポジトリ

では!!( `ー´)ノ

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away