ASP.NET MVC で部分ビューをレンダリングするベストプラクティス：パフォーマンスと使いやすさの両立

ASP.NET MVC で jQuery を使って部分ビューをレンダリングする方法

1. HTML ヘルパーを使用する
2. jQuery を使用する

今回は、jQuery を使用する方法について解説します。

• 非同期レンダリングが可能なので、ページ全体を再読み込みすることなく部分ビューを更新できます。
• ユーザーエクスペリエンスを向上させることができます。
• コードをより柔軟に記述できます。

必要なもの

• ASP.NET MVC アプリケーション
• jQuery ライブラリ

手順

1. 部分ビューを作成する

   まず、レンダリングしたい部分ビューを作成します。部分ビューは、通常のビューと同じように作成できます。

   @{
       ViewData["Title"] = "Partial View";
   }
   
   <h1>Partial View</h1>
   

2. 次に、jQuery コードを使用して部分ビューをレンダリングします。以下のコードは、#partialViewContainer コンテナー内に _PartialView という名前の部分ビューをレンダリングする例です。

   $(document).ready(function() {
       $("#loadPartialView").click(function() {
           $.ajax({
               url: "@Url.Action("PartialViewAction", "Controller")",
               type: "GET",
               success: function(data) {
                   $("#partialViewContainer").html(data);
               }
           });
       });
   });
   

   このコードは、以下のことを行います。

   1. #loadPartialView ボタンをクリックしたときにイベントハンドラーを呼び出します。
   2. AJAX リクエストを使用して PartialViewAction アクションを呼び出します。
   3. アクションからの結果を #partialViewContainer コンテナーに挿入します。

3. コントローラーアクションを作成する

   最後に、部分ビューをレンダリングするコントローラーアクションを作成します。以下のコードは、_PartialView 部分ビューを返す PartialViewAction アクションの例です。

   public ActionResult PartialViewAction()
   {
       return PartialView("_PartialView");
   }
   

これで、#loadPartialView ボタンをクリックすると、_PartialView 部分ビューが #partialViewContainer コンテナー内に非同期にレンダリングされます。

補足

• 上記のコードはあくまで例であり、状況に応じて変更する必要があります。

ASP.NET MVC で jQuery を使って部分ビューをレンダリングするサンプルコード

HTML コード

@{
    ViewData["Title"] = "Home Page";
}

<div class="container">
    <h1>ASP.NET MVC で jQuery を使って部分ビューをレンダリング</h1>

    <button id="loadPartialView">部分ビューを読み込む</button>

    <div id="partialViewContainer"></div>
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/app.js"></script>

JavaScript コード

$(document).ready(function() {
    $("#loadPartialView").click(function() {
        $.ajax({
            url: "@Url.Action("PartialViewAction", "Controller")",
            type: "GET",
            success: function(data) {
                $("#partialViewContainer").html(data);
            }
        });
    });
});

C# コード

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public PartialViewResult PartialViewAction()
    {
        return PartialView("_PartialView");
    }
}

_PartialView.cshtml

@{
    ViewData["Title"] = "Partial View";
}

<h1>Partial View</h1>

説明

1. HTML コード
   • Home Page というタイトルのページを作成します。
   • 部分ビューを読み込む というボタンを作成します。
   • partialViewContainer という ID のコンテナーを作成します。
   • jQuery と app.js スクリプトファイルをロードします。
2. JavaScript コード
3. C# コード
   • Index アクションは、Home Page ビューを返します。
   • PartialViewAction アクションは、_PartialView 部分ビューを返します。
4. _PartialView.cshtml

ASP.NET MVC で部分ビューをレンダリングするその他の方法

これは、部分ビューをレンダリングする最も一般的な方法です。以下のコードは、_PartialView という名前の部分ビューをレンダリングする例です。

@Html.Partial("_PartialView")

Razor シンタックスを使用する

以下のコードは、_PartialView という名前の部分ビューをレンダリングするもう 1 つの方法です。

@{
    RenderPartial("_PartialView");
}

PartialViewResult クラスを使用する

コントローラー アクションから部分ビューをレンダリングするには、PartialViewResult クラスを使用できます。以下のコードは、_PartialView という名前の部分ビューをレンダリングする例です。

public ActionResult PartialViewAction()
{
    return PartialView("_PartialView");
}

RenderSection および Section ディレクティブを使用する

レイアウト ページ

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Header {
    This is the header content.
}

@section Content {
    <div id="partialViewContainer">
        @RenderSection("PartialView", false)
    </div>
}

@{
    ViewData["Title"] = "Partial View";
}

<h1>Partial View</h1>

これらの方法はすべて、状況に応じて使用できます。どの方法を使用するかは、個々のニーズによって異なります。