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

ASP.NET Core 入門7 ASP.NET Core MVC 部分ビュー

.NET Core 3がリリースされましたことですし、久しぶりにASP.NET Core MVC に関するコンテンツを記載したいと思います。

前回に引き続きASP.NET Coreを学習メモです。今回はASP.NET Core MVC のRazorの部分ビューを学びながら解説していきます。

前提

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

  • ASP.NET Core MVC Razorの部分ビューの概要説明
  • ASP.NET Core MVC Razorの部分ビューの基本的な実装例
  • ASP.NET Core MVC Razorの部分ビューのModelを使って実装例

2. 環境情報

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

ASP.NET Core MVC Razorの部分ビューの概要説明

1.Razorの部分ビューとは

前回ではRazorのレイアウト使って、マスターページのHTMLレイアウトを個々のHTMLで継承して表示することまでを学びました。

個別のHTMLで共通のHTMLを表示したい要望が当然あります。この要件を満たすには部分ビューが適しています。

下記の図で言うと、赤い枠の内容のHTMLが部分ビューです。

部分ビューの利点は2つあります。

  • HTMLのコンテンツを再利用可能
  • 複雑なビューを管理しやすい大きさに分割して管理てきる

2.Razor部分ビューの定義と使用方法

定義

共通レイアウトと部分ビューの定義する方法は基本同じです。
/Views/Shared のフォルダに頭_ のcshtmlファイルを作成します。

  • /Views/Shared/_PartialView.cshtml

決まったControllerのみで表示させる部分ビューなら、対象Controllerに対応したViewsフォルダに格納しても構いません。

  • /Views/Home/_PartialViewHome.cshtml

使用方法

// 使用(同期)
@Html.Partial("_PartialViewHome")

// 使用(非同期)※Microsoft推奨
@await Html.PartialAsync("_PartialViewHome")

// 明示的にパスを指定して使用
@await Html.PartialAsync("/Views/Home/_PartialViewHome")

ASP.NET Core MVC Razorの部分ビューの基本的な実装例

では、実際に部分ビューを実装してみましょう。

1. 部分ビュー定義

/Views/Shared で_DateTimeInfo.cshtmlのファイルを作成します。

<ul>
    <li>
        現在時刻 : @DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss:fff")
    </li>
    <li>
        曜日 : @DateTime.Now.DayOfWeek
    </li>
</ul>

2. 部分ビューの使用するビューを作成

/Views のフォルダ配下にPartial のフォルダを作成します。/Views/Partial 配下でDemo.cshtmlファイルを作成します。

@{
    ViewBag.Title = "PartialView Demo";
}

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

@Html.Partial("_DateTimeInfo")

<hr/>

@await Html.PartialAsync("_DateTimeInfo")

3. Controllerの作成

/Controllers 配下にPartialController.csを作成し、Action Methodを実装します。

using System;
using Microsoft.AspNetCore.Mvc;

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

4. 結果確認

F5で起動し、URL/partial/demo を訪問すると以下が表示されます。

ASP.NET Core MVC Razorの部分ビューのModelを使って実装例

1. Modelの準備

/Models フォルダの配下にNoteViewModel.csのクラスを作成します。

using System;

namespace ds.Tutorial.web.Models {
    public class NoteViewModel {
        public string Title { get; set; }

        public DateTime PublishTime { get; set; }

        public string Boby { get; set; }

    }
}

2. 部分ビューの定義

/Views/Shared 配下に_NoteInfo.cshtmlを作成します。

@model ds.Tutorial.web.Models.NoteViewModel;

<h3>@Model.Title</h3>
<span>@Model.PublishTime.ToString("yyyy-MM-dd")</span>
<p>@Model.Boby</p>

3. 部分ビューを使用するビューを作成

/Views/Partial の配下にDemoWithParams.cshtmlを作成します。

@using ds.Tutorial.web.Models;

@{
    ViewBag.Title = "PartialView With Params Demo";
}

<h3>@ViewBag.Title</h3>
<p>PartialView With Params Demo by dongsu.dev</p>

@await Html.PartialAsync("_NoteInfo",new NoteViewModel(){
    Title = "部分ビュー",
    PublishTime = DateTime.Now,
    Boby = "部分ビューのコンテンツ"
})

4. ControllerでAction Method定義

PartialController.csに以下のAction Methodを追加します。

public IActionResult DemoWithParams () {
    return View ();
}

5. 結果確認

F5で起動し、URL`/partial/demowithparams を訪問すると以下が表示されます。

個人的所考として、blogの記事リストやGridなどは部分ビューに向いていると思います。

備考

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

GitHubリポジトリ

では!!( `ー´)ノ