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

控制器 (SearchController)

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中文网其他相关文章！