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

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

ASP.NET MVC では、部分ビューは通常、Html.RenderPartial() メソッドを使用してレンダリングされます。ただし、代わりに jQuery を使用して部分ビューをレンダリングする必要があるシナリオもあります。

jQuery と Ajax を使用したアプローチ

jQuery を使用して部分ビューをレンダリングするには、次の手順を実行できます。

1. アクション メソッドを作成します: 部分ビューを返すためにコントローラーでアクション メソッドを定義します。
2. jQuery イベント ハンドラーをバインドします:クリック イベント ハンドラーをページ上のボタンまたはリンクにバインドします。
3. アクション メソッドを呼び出します: イベント ハンドラー内で $.get() または $.post() を使用して送信します。アクション メソッドへの Ajax リクエスト。
4. Replace Partial View Div: アクション メソッドが部分ビューを返す場合、$.replaceWith() または $.html() を使用して既存のビューを置き換えます。ページ上の部分ビュー div のコンテンツ。

例:

<code class="javascript">$('.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);         
    });
});</code>

この例では、クラス js-reload-details のボタンクリックイベントハンドラーをトリガーします。イベント ハンドラーは、$.get() を使用して部分ビューを読み込み、id がdetailsDiv である div の内容を、返された HTML に置き換えます。

コントローラー アクション:

<code class="csharp">public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}</code>

親ビュー ボタン:

<code class="html"><button data-url='@Url.Action("details","user", new { id = Model.ID } )'
         class="js-reload-details">Reload</button></code>

ユーザー詳細の部分ビュー:

<code class="html"><div id="detailsDiv">
    <!-- ...content... -->
</div></code>

以上がASP.NET MVCでjQueryを使用して部分ビューをレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。