ASP.NET MVCでボタンのクリック時に部分ビューを動的にレンダリングする方法は?

ASP.NET MVC でのボタンのクリック時の部分ビューのレンダリング

はじめに

ボタンのクリック時に部分ビューを動的に表示するタスクは、一般的な要件です。 ASP.NET MVC開発で。この記事では、この問題の解決策を詳しく掘り下げ、jQuery と適切なコントローラー メソッドを使用してこの機能を実現する方法を示します。

問題の概要

ASP.NET MVC では、部分ビューは通常、次のようにレンダリングされます。ページ全体の置き換え。ただし、特定のシナリオでは、ページの特定の領域内の部分ビューのみをレンダリングすることが望ましい場合があります。たとえば、ユーザーがボタンをクリックしたときに、ページの指定されたセクションに検索結果を含む部分ビューをロードして表示したい場合があります。

解決策

これを実現するには、次の手順に従います。以下に概要を示す手順:

1. ボタンを変更します: サーバー側のボタンを HTML ボタンに置​​き換えます。要素 (例: <button>)。
2. jQuery イベント ハンドラーの実装: ボタンで jQuery の .click() イベント ハンドラーを使用して、AJAX 呼び出しを開始します。
3. Pass Model Data: jQuery を使用して必要なモデル データをコントローラーに送信します。 AJAX 呼び出し中の .load() メソッド。
4. コントローラーでデータを受信: モデル データを受信し、適切な部分ビューを返すコントローラー メソッドを定義します。
5. Render Partial View: jQuery の .load() を使用して、指定されたページ領域を部分ビューで更新します。

コード例

以下は、ボタンのクリック時に部分ビューをレンダリングするコード実装例です。

Razor View (Index.cshtml)

<button>

JavaScript

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyword = $('#Keyword').val();
  $('#searchResults').load(url, { searchText: keyword });
});

コントローラ (SearchController)

public ActionResult DisplaySearchResults(string searchText)
{
  var model = // Build list based on the searchText
  return PartialView("SearchResults", model);
}

追加考慮事項

• type="button" 属性を使用してフォーム内のボタンのデフォルトのフォーム送信を無効にします。
• モデルがview.
• 検証付きモデルの jQuery の .submit() イベントを使用してフォーム送信を処理します。属性。

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