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

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

ASP.NET MVC の一般的なシナリオは、部分的なビューを動的にロードする必要があることです。通常はボタンのクリックなどのユーザーアクションに応答して、ページの特定のセクションを表示します。この手法により、ページ全体を更新することなく、コンテンツをモジュール式で柔軟に表示できます。

問題の説明

次のような ASP.NET MVC アプリケーションがあるとします。ページの別のセクションに検索結果を表示する必要がある検索フォーム。検索ボタンをクリックすると、検索結果を取得し、ページ コンテンツ全体を置き換えるのではなく、部分的なビューを使用してレンダリングしたいと考えています。

解決策

これを実現するには、次の手順を実装できます。

1. 部分ファイルの作成ビュー: 検索結果を表示するモデルを含む部分ビューを定義します。
2. 検索ボタンの変更: 検索フォームのボタンを通常の HTML ボタンに置​​き換えて割り当てます。これは ID です。
3. JavaScript の実装: 検索ボタンの JavaScript イベント ハンドラーを追加します。クリックイベント。このハンドラーでは、jQueryload() 関数を使用して AJAX 呼び出しを実行します。
4. コントローラー メソッドの構成: 検索ボタンのクリックを処理するコントローラー メソッドは、検索パラメーターを受け入れ、部分的な結果を返す必要があります。結果をモデルとして表示します。

例実装

HTML:

<button>

JavaScript:

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

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

public ActionResult DisplaySearchResults(string searchText)
{
  var model = // Build the model based on the searchText parameter

  return PartialView("SearchResults", model);
}

このアプローチにより、ページ全体をリロードすることなく、指定された div 内で部分ビューを動的にレンダリングできるようになり、検索結果を表示するユーザーフレンドリーで効率的な方法が提供されます。

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