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

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

部分ビューは、複雑なビューをより小さなビューに分割することにより、ASP.NET MVC アプリケーションをモジュール化する便利な方法です。 、再利用可能なコンポーネント。親ビューで直接レンダリングするのが一般的ですが、jQuery を使用して動的にレンダリングする必要があるシナリオもあります。

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

誤解に反して、jQuery だけを使用して部分ビューを直接レンダリングすることはできません。ただし、部分ビューを応答として返すアクション メソッドを呼び出し、jQuery を使用してその結果をページに挿入することはできます。

次のコード サンプルは、これを実現する方法を示しています。

<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 と data-url という名前のデータ属性を持つボタン。 data-url 属性には、部分ビューをレンダリングするアクション メソッドの URL が含まれている必要があります。
• detailsDiv の ID 属性を持つ部分ビュー。
• ユーザー コントローラーのDetailsという名前のアクション メソッド。詳細アクションは整数パラメータを受け取り、「UserDetails」という名前の部分ビューを返します。

サンプル コード

親ビューには、ボタンを含める必要があります。適切な data-url 属性を使用して:

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

UserDetails 部分ビューには目的の HTML が含まれている必要があります:

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

これらの要素を組み合わせることで、次を使用して部分ビューを動的にロードして表示できます。 ASP.NET MVC の jQuery。

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