ホームページ > ウェブフロントエンド > jsチュートリアル > ASP.NET MVCでjQueryを使用して部分ビューをレンダリングする方法は?

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

Barbara Streisand
リリース: 2024-11-03 19:08:30
オリジナル
720 人が閲覧しました

How to Render Partial Views with jQuery in ASP.NET MVC?

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

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

解決策:

  1. ボタンをセットアップするクリック ハンドラー: 部分ビューのレンダリングを開始するボタンにクリック イベント ハンドラーをアタッチします。
<code class="javascript">$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();</code>
ログイン後にコピー
  1. 部分ビュー URL の取得:ボタンのデータ属性からの部分ビューの URL。
<code class="javascript">    var url = $(this).data('url');</code>
ログイン後にコピー
  1. AJAX リクエストを作成する: $.get() を使用して GET リクエストを送信する
<code class="javascript">    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });</code>
ログイン後にコピー
  1. 部分ビューのレンダリング: サーバー上で、部分ビューをレンダリングして返すアクションをコントローラーで作成します。結果。
<code class="c#">public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}</code>
ログイン後にコピー
  1. 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート