ページをリロードせずにボタンをクリックしたときに ASP.NET MVC で部分ビューをレンダリングする方法

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

ASP.NET MVC で、ボタンのクリックは一般的なタスクです。これにより、ページ全体を再読み込みすることなく、ページの特定のセクションを動的に更新できます。

問題の説明:

提供されたコードは、部分的なビューを表示しようとします。ボタンをクリックした後のページ上の特定の div。ただし、ボタンは別の URL に移動し、ページ全体がリロードされます。目標は、クライアント側の div 内の部分ビューをレンダリングすることです。

解決策:

これを達成するには、JavaScript を使用してボタンのクリックを処理する必要があります。そしてサーバーに対して AJAX リクエストを実行します。次の手順では、これを実現する方法について説明します。

1. ボタンの種類を変更します。 アンカー タグの代わりにボタン要素を使用するように HTML ボタンを変更します。

<button>

2. JavaScript コードを追加します: 次の JavaScript コードをページ:

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

3. コントローラー メソッドの変更: コントローラーで、検索テキストをパラメーターとして受け入れるように DisplaySearchResults アクションを変更します。

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

JavaScript コードはボタンのクリックを処理し、ページから検索テキストを取得し、jQuery の.load メソッドを使用して、DisplaySearchResults アクションに対する AJAX リクエストを作成します。サーバーは部分ビューを生成してクライアントに送信し、#searchResults div の内容を更新します。

注:

インデックスのモデルの場合ビューには検証属性を持つプロパティが含まれているため、ボタンの代わりに送信ボタンを追加することをお勧めします。 JavaScript コードは、フォームの .submit イベントを処理し、AJAX リクエストを行う前に検証を実行する必要があります。

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