如何在 ASP.NET MVC 中单击按钮时动态渲染部分视图？

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

问题描述：

在 ASP.NET MVC 中，您希望在单击按钮时在客户端的特定 div 内呈现部分视图，并且部分视图应该使用在按钮事件期间动态获取的数据。

代码示例：

考虑以下按钮代码：

<button type="button">

此按钮尝试导航单击时指向单独的 URL。为了改为处理点击事件并动态渲染部分视图，我们需要修改代码如下：

<button>

此外，将以下脚本添加到页面：

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyWord = $('#Keyword').val(); // Retrieve the user-entered search text
  $('#searchResults').load(url, { searchText: keyWord });
});

修改控制器方法以接受搜索文本作为参数：

public ActionResult DisplaySearchResults(string searchText)
{
  // Build list based on the provided searchText and return the partial view
  var model = // To be implemented
  return PartialView("SearchResults", model);
}

解释：

• jQuery .load 方法对指定的 URL 进行 AJAX 调用，传递 data 参数中提供的任何数据.
• 控制器方法负责根据动态提供的部分视图生成data。
• 更新的内容加载到#searchResults div中，动态渲染部分视图。

注意：如果您的模型类包含多个属性验证属性，用以下代码替换 onclick 处理并使用提交按钮：

$('form').submit(function() {
  if (!$(this).valid()) { return false; }
  var url = '@Url.Action("DisplaySearchResults", "Search")';
  var form = $(this).serialize();
  $('#searchResults').load(url, form);
  return false;

在这种情况下，控制器方法应该处理完整的 SearchCriterionModel 对象：

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)
{
  var model = // Build list based on the properties of criteria and return the partial view
  return PartialView("SearchResults", model);
}

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