如何在 ASP.NET MVC 中按一下按鈕時動態渲染部分視圖？

在ASP.NET MVC 中渲染按鈕點擊時的部分視圖

簡介

在按鈕點擊時動態顯示部分視圖的任務是常見需求在ASP.NET MVC 開發中。本文深入探討了此問題的解決方案，示範如何使用 jQuery 和正確的控制器方法來實現此功能。

問題概述

在 ASP.NET MVC 中，部分視圖通常呈現為整個頁面的替換。然而，在某些情況下，希望僅在頁面的特定區域內呈現部分視圖。例如，當使用者按一下按鈕時，您可能想要在頁面的指定部分載入並顯示包含搜尋結果的部分視圖。

解決方案

要實現此目的，請按照步驟概述如下：

1. 修改按鈕：將伺服器端按鈕替換為HTML按鈕元素（例如，<button>）。
2. 實作 jQuery 事件處理程序： 在按鈕上使用 jQuery 的 .click() 事件處理程序來啟動 AJAX 呼叫。
3. 傳遞模型資料：在執行期間使用 jQuery 的 .load() 方法將必要的模型資料傳送到控制器AJAX 呼叫。
4. 在控制器中接收資料：定義一個控制器方法來接收模型資料並傳回適當的部分視圖。
5. 渲染部分視圖： 使用 jQuery 的 .load()以部分視圖更新指定的頁面區域

程式碼範例

下面是一個範例程式碼實現，用於在按一下按鈕時呈​​現部分檢視：

Razor視圖(Index.cshtml)

<button>

JavaScript

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

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中文網其他相關文章！