【ASP.NET Core MVC】部分ビューの基本的な使い方

ASP.NET Core

ASP.NET Core MVCにおける部分ビュー(Partial View)の使い方について説明します。

スポンサーリンク

環境

  • Visual Studio Community 2022 Version 17.1.0
  • .NET 6
  • Windows 10

参考ドキュメント

ASP.NET Core の部分ビュー
部分ビューを使用して大規模なマークアップ ファイルを分割し、ASP.NET Core アプリの Web ページ間で共通するマークアップの重複を減らす方法について説明します。

部分ビューとは

名前の通り、ビューの中に部分的に埋め込むことができるcshtmlファイルです。

部分ビューを使うことで、大規模で複雑なページを分割して管理しやすくしたり、各ページで共通するコンテンツの重複を省くことができます。

特徴

  • 通常のビューと区別するため、部分ビューのファイル名はアンダースコア (_) から始めることが推奨されている
  • 部分ビューは通常のビューと違って _ViewStart.cshtml を実行しないので、_Layout.cshtmlのレイアウトが適用されない

注意点として、各ページに共通するヘッダーやフッターといったレイアウトは、部分ビューではなく_Layout.cshtmlに定義します。

また、複雑な表示ロジックが必要になる場合は部分ビューではなくビューコンポーネントを使用します。※こちらは別記事で解説予定です。

部分ビューの参照方法

親ビュー(呼び出し元のビュー)から部分ビューを参照するには以下の2通りの方法があります。

部分タグヘルパーを使う方法

ASP.NET Core 2.1で導入された部分タグヘルパーを使うと、部分ビュー内のコンテンツが非同期で呼び出されます。

name属性に部分ビューを指定しますが、パスの指定方法は以下の3パターンがあります。

①絶対パスによる指定

<partial name="/Views/Partial/_PartialSample.cshtml" />

②相対パスによる指定

※Views/Homeフォルダ内からViews/Partial内の_PartialSample.cshtmlを呼び出す前提

<partial name="../Partial/_PartialSample.cshtml" />

③部分ビュー名のみを指定
部分ビューが親ビューと同じフォルダ内またはSharedフォルダ内にある場合は、拡張子を省略して部分ビュー名のみを指定することができます。

<partial name="_PartialSample" />

個人的には絶対パスで指定するのがわかりやすくて安全かなと思います。

HTMLヘルパーを使う方法

HTMLヘルパーを使う場合はPartialAsyncメソッドを使います。

※同期メソッドのPartialメソッドはデッドロックが発生する可能性があるとのことで、公式で非推奨となっています。

パスの指定方法は部分タグヘルパーと同じなので割愛します。

@await Html.PartialAsync("_PartialSample")

特別な理由がなければ、HTMLと構文が似ていてわかりやすい部分タグヘルパーを使用するのがいいと思います。

以降は全て部分タグヘルパーを用いて説明します。

親ビューから部分ビューにデータを渡す方法

親ビューから部分ビューにViewDataを渡したい場合は、view-data属性にViewData名と指定します。

<partial name="_ProductViewDataPartial" for="Product" view-data="sampleViewData">

モデルを渡したい場合は、for属性またはmodel属性に渡したいモデル名を指定すればOKです。
view-data属性と併用することもできます。

<partial name="_ProductPartial" for="Product">

サンプルアプリ

最後に、部分ビューを使用した簡単なアプリで動作を確認してみます。

コントローラー

ビューモデルをインスタンス化し、ビューに渡しています。

using Microsoft.AspNetCore.Mvc;

namespace SampleApplication.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var viewModel = new SampleViewModel { Name = "太郎", Age = 20 };
            return View(viewModel);
        }
    }

    public class SampleViewModel
    {
        public string Name { get; set; } = "";
        public int Age { get; set; }
    }
}

親ビュー

コントローラーから渡ってきたモデルを部分ビューに渡します。

@model SampleApplication.Controllers.SampleViewModel

<div>
    <h1>親ビュー</h1><br />

    <partial name="/Views/Partial/_PartialSample.cshtml" for="@Model" />
</div>

部分ビュー

親ビューから渡されたモデルの中身を表示します。

<h2>部分ビュー</h2>

<ul>
    <li>@Model.Name</li>
    <li>@Model.Age</li>
</ul>

実行結果

親ビューの中に部分ビューの内容が表示されました。

コメント

タイトルとURLをコピーしました