如何在 ASP.NET MVC 中透過點擊按鈕呈現部分視圖而不重新載入頁面？

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

在ASP.NET MVC 中，渲染部分視圖以回應單擊按鈕是一項常見任務。這允許您動態更新頁面的特定部分，而無需重新載入整個頁面。

問題描述：

提供的程式碼嘗試在按一下按鈕後頁面上的特定 div。但是，該按鈕導航到不同的 URL，導致整個頁面重新載入。目標是在客戶端渲染 div 內的部分視圖。

解決方案：

要實現此目的，需要使用 JavaScript 處理按鈕點擊並向伺服器執行 AJAX 請求。以下步驟說明如何完成此操作：

1. 更改按鈕類型：更改 HTML 按鈕以使用按鈕元素而不是錨標記。

<button></button>

2. 新增JavaScript 程式碼： 將下列JavaScript 程式碼新增至您的頁面：

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

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

修改控制器方法：

在控制器中，修改DisplaySearchResults 操作以接受搜尋文字作為參數。

JavaScript 程式碼處理按鈕單擊，從頁面檢索搜尋文本，並使用 jQuery .load 方法向 DisplaySearchResults 操作發出 AJAX 請求。伺服器產生部分視圖並將其發送到客戶端，然後客戶端更新 #searchResults div 的內容。

注意：如果索引的模型view 包含帶有驗證屬性的屬性，建議新增提交按鈕而不是按鈕。 JavaScript 程式碼應處理表單的 .submit 事件並在發出 AJAX 請求之前執行驗證。

以上是如何在 ASP.NET MVC 中透過點擊按鈕呈現部分視圖而不重新載入頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！