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

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

問題の説明:

ASP.NET MVC 、ボタンがクリックされたときにクライアント側の特定の div 内の部分ビューをレンダリングしたいとします。ビューは、ボタン イベント中に動的に取得されたデータを使用する必要があります。

コード例:

次のボタン コードを考えてみましょう:

<button type="button">

このボタンは次のことを試みますクリックすると別の URL に移動します。代わりにクリック イベントを処理し、部分ビューを動的にレンダリングするには、コードを次のように変更する必要があります:

<button>

さらに、次のスクリプトをページに追加します:

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyWord = $('#Keyword').val(); // Retrieve the user-entered search text
  $('#searchResults').load(url, { searchText: keyWord });
});

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

public ActionResult DisplaySearchResults(string searchText)
{
  // Build list based on the provided searchText and return the partial view
  var model = // To be implemented
  return PartialView("SearchResults", model);
}

説明:

• jQuery .load メソッドは、指定された URL に AJAX 呼び出しを行い、data パラメーターで提供されたデータを渡します。 .
• コントローラー メソッドは、動的に提供されたビューに基づいて部分ビューを生成します。 data.
• 更新されたコンテンツは #searchResults div にロードされ、部分ビューが動的にレンダリングされます。

注: モデル クラスに次のプロパティが複数含まれている場合検証属性を使用するには、onclick 処理を次のコードに置き換え、代わりに送信ボタンを使用します。

$('form').submit(function() {
  if (!$(this).valid()) { return false; }
  var url = '@Url.Action("DisplaySearchResults", "Search")';
  var form = $(this).serialize();
  $('#searchResults').load(url, form);
  return false;

この例ではこの場合、コントローラー メソッドは完全な SearchCriterionModel オブジェクトを処理する必要があります:

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)
{
  var model = // Build list based on the properties of criteria and return the partial view
  return PartialView("SearchResults", model);
}

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