如何在 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 });
});

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 的内容。

注意：

如果索引的模型view 包含带有验证属性的属性，建议添加提交按钮而不是按钮。 JavaScript 代码应处理表单的 .submit 事件并在发出 AJAX 请求之前执行验证。

以上是如何在 ASP.NET MVC 中通过单击按钮呈现部分视图而不重新加载页面？的详细内容。更多信息请关注PHP中文网其他相关文章！