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

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

jQuery を使用して部分ビューを直接レンダリングすることは実現できません。ただし、サーバー側の呼び出しと jQuery/AJAX 操作を伴う回避策でも同じ結果が得られます。

解決策:

1. ボタンをセットアップするクリック ハンドラー: 部分ビューのレンダリングを開始するボタンにクリック イベント ハンドラーをアタッチします。

<code class="javascript">$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();</code>

2. 部分ビュー URL の取得:ボタンのデータ属性からの部分ビューの URL。

<code class="javascript">    var url = $(this).data('url');</code>

3. AJAX リクエストを作成する: $.get() を使用して GET リクエストを送信する

<code class="javascript">    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });</code>

4. 部分ビューのレンダリング: サーバー上で、部分ビューをレンダリングして返すアクションをコントローラーで作成します。結果。

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

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

5. DOM の更新: 部分ビューの DIV コンテナを、サーバー応答からの更新された内容で置き換えます。

<code class="javascript">var $detailDiv = $('#detailsDiv');
$detailDiv.replaceWith(data);</code>

ボタンと部分ビューのマークアップ:

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

<!-- UserDetails partial view -->
<div id="detailsDiv">
    <!-- ...content... -->
</div></code>

注: このアプローチは、サーバー側のアクションに依存して部分ビューをレンダリングし、 jQuery を使用してページを更新する AJAX リクエスト。

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