如何在 ASP.NET MVC 中单击按钮时呈现部分视图？

在 ASP.NET MVC 中渲染按钮单击时的部分视图

概述

本文介绍了在单击按钮，解决了 ASP.NET MVC 应用程序中的常见挑战。我们将探索如何：

• 捕获按钮点击事件
• 将数据发送到控制器
• 在指定div内渲染部分视图

问题描述

在简化的 ASP.NET MVC 应用程序中，我们寻求动态地单击按钮时在 div 中显示搜索结果。挑战在于通过数据库访问获取数据，然后使用这些数据渲染部分视图，而无需重新加载整个页面。

解决方案

1.事件处理：

将按钮替换为：

<button>

2. JavaScript:

添加以下脚本：

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

• 此脚本捕获单击事件并使用 jQuery 的 .load() 方法将搜索文本发送到控制器。

3。控制器方法：

修改控制器方法以接受搜索文本：

public ActionResult DisplaySearchResults(string searchText)
{
  var model = // Build model based on search text
  return PartialView("SearchResults", model);
}

• 此方法从数据库获取数据并返回部分视图。

额外注意事项

• 验证：如果 SearchCriterionModel 包含多个带有验证属性的属性，请使用提交按钮并处理表单的 .submit() 事件。
• 控制器方法签名：更新控制器方法以接收整个SearchCriterionModel object:

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)

在 Div 内渲染部分视图的技巧

• 确保 div 具有唯一的 ID，例如“searchResults”。
• 分部视图本身应该有自己的模型类和数据。
• .load()方法将使用从部分视图生成的 HTML 更新 div 的内容。

以上是如何在 ASP.NET MVC 中单击按钮时呈现部分视图？的详细内容。更多信息请关注PHP中文网其他相关文章！