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

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

概要

この記事では、ボタンのクリックにより、ASP.NET MVC アプリケーションの一般的な課題が解決されます。

• ボタン クリック イベントをキャプチャする
• データをコントローラーに送信する
• 指定された div 内の部分ビューをレンダリングする

問題の説明

簡略化された ASP.NET MVC アプリケーションでは、ボタンをクリックすると、検索結果が div に動的に表示されます。課題は、ページ全体を再ロードせずに、データベース アクセスを介してデータを取得し、このデータを使用して部分ビューをレンダリングすることにあります。

解決策

1.イベント処理:

ボタンを次のものに置き換えます:

<button>

2. JavaScript:

次のスクリプトを追加します:

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

• このスクリプトは、クリック イベントをキャプチャし、jQuery の .load() メソッドを使用して検索テキストをコントローラーに送信します。

3.コントローラー メソッド:

検索テキストを受け入れるようにコントローラー メソッドを変更します:

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

• このメソッドはデータベースからデータをフェッチし、部分ビューを返します。

追加考慮事項

• 検証: SearchCriterionModel に検証属性を持つ複数のプロパティが含まれている場合は、代わりに送信ボタンを使用し、フォームの .submit() イベントを処理します。
• コントローラー メソッド シグネチャ: 全体を受信するようにコントローラー メソッドを更新します。 SearchCriterionModel オブジェクト:

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)

Div 内の部分ビューをレンダリングするためのヒント

• Div に「searchResults」などの一意の ID があることを確認してください。
• 部分ビュー自体には独自のモデル クラスが必要です。 data.
• .load() メソッドは、部分ビューから生成された HTML で div のコンテンツを更新します。

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