ASP.NET Core MVCにおける部分ビュー（Partial View）の基本的な使い方を解説します。
環境
- Visual Studio 2022
- .NET 8
参考ドキュメント
部分ビューとは
名前の通り、ビューの中に部分的に埋め込むことができるcshtmlファイルです。
部分ビューを使うことで、大規模で複雑なページを分割して管理しやすくしたり、各ページで共通するコンテンツの重複を省くことができます。
特徴
- 通常のビューと区別するため、部分ビューのファイル名はアンダースコア (_) から始めることが推奨されている
- 部分ビューは通常のビューと違って
_ViewStart.cshtmlを実行しないので、_Layout.cshtmlのレイアウトが適用されない
注意点
- 各ページに共通するヘッダーやフッターといったレイアウトは、部分ビューではなく
_Layout.cshtmlに定義する - 複雑な表示ロジックが必要になる場合は、部分ビューではなくビューコンポーネントの使用が推奨される
部分ビューの参照方法
親ビュー（呼び出し元のビュー）から部分ビューを参照するには以下の2通りの方法があります。
部分タグヘルパーを使う方法
部分タグヘルパーを使うと、部分ビュー内のコンテンツが非同期で呼び出されます。
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 PartialViewSample.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View(new SampleViewModel { Name = "太郎", Age = 20 });
}
}
public class SampleViewModel
{
public string Name { get; set; } = string.Empty;
public int Age { get; set; }
}
}親ビュー
コントローラーから渡ってきたモデルを部分ビューに渡します。
@model PartialViewSample.Controllers.SampleViewModel
<h1>親ビュー</h1>
<div>
<partial name="/Views/Partial/_PartialSample.cshtml" for="@Model" />
</div>部分ビュー
親ビューから渡されたモデルの中身を表示します。
※部分ビューファイルはViews > Partial フォルダ内に配置しています。
<h2>部分ビュー</h2>
<ul>
<li>@Model.Name</li>
<li>@Model.Age</li>
</ul>実行結果
親ビューの中に部分ビューの内容が表示されました。
おすすめ書籍
ポチップ