記事内に広告が含まれています

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

C#

ASP.NET Core MVCにおける部分ビュー(Partial View)の基本的な使い方を解説します。

環境

  • Visual Studio 2022
  • .NET 8

参考ドキュメント

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

部分ビューとは

名前の通り、ビューの中に部分的に埋め込むことができる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>

実行結果

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

おすすめ書籍

日経BP
¥3,740 (2024/05/07 16:49時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場

コメント

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