ASP.NET MVC で jQuery を使用した部分ビューの読み込み

ASP.NET MVC ビュー内で部分ビューを直接レンダリングすることもできますが、 Html.RenderPartial ヘルパーでは、jQuery だけで同じ機能を実現することはできません。ただし、jQuery と AJAX を含む手法を組み合わせて使用​​すると、部分ビューを効果的に読み込むことができます。

推奨されるアプローチには、目的の部分ビューをレンダリングするコントローラー アクションの作成が含まれます。その後、jQuery を利用して、AJAX 呼び出し経由でこのアクションを呼び出すことができます。サーバーがレンダリングされた部分ビューで応答すると、jQuery はページの特定の部分を新しいコンテンツで動的に更新できます。

このアプローチを示すサンプル jQuery コードを次に示します:

$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $detailDiv = $('#detailsDiv'),
        url = $(this).data('url');

    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });
});

このコードは、クラス「js-reload-details」の要素に応答するボタン クリック ハンドラーを定義します。クリックすると、要素の 'data-url' 属性から URL が抽出され、jQuery/AJAX を使用してその URL に GET リクエストが送信されます。

このアプローチのサーバー側コンポーネントには、レンダリングするコントローラー アクションの作成が含まれます。部分ビューを取得し、そのコンテンツを AJAX リクエストへの応答として返します。例:

public ActionResult Details(int id)
{
    var model = ...get user from db using id...

    return PartialView("UserDetails", model);
}

このアプローチでは、jQuery と AJAX を使用して Web ページの特定のセクションに部分ビューを動的に読み込んで表示できるため、コンテンツのプレゼンテーションの柔軟性と制御が向上します。