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

我将要描述的问题与我已经发现的问题非常相似（例如这篇文章名称几乎相同 ），但我希望我可以将它变成一些不重复的东西。

我在Visual Studio中创建了一个新的ASP.NET MVC 5应用程序。 然后，我定义了两个模型类：

public class SearchCriterionModel { public string Keyword { get; set; } } public class SearchResultModel { public int Id { get; set; } public string FirstName { get; set; } public string Surname { get; set; } } 

然后我创建了SearchController ，如下所示：

 public class SearchController : Controller { public ActionResult Index() { return View(); } public ActionResult DisplaySearchResults() { var model = new List { new SearchResultModel { Id=1, FirstName="Peter", Surname="Pan" }, new SearchResultModel { Id=2, FirstName="Jane", Surname="Doe" } }; return PartialView("SearchResults", model); } } 

以及使用类型IEnumerable （模板列表 ）的模型的视图Index.cshtml （用SearchCriterionModel强类型作为模型和模板编辑 ）和SearchResults.cshtml作为部分视图。

这是索引视图：

 @model WebApplication1.Models.SearchCriterionModel @{ ViewBag.Title = "Index"; } @using (Html.BeginForm()) { @Html.AntiForgeryToken() 
 
SearchCriterionModel
 
 @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
 @Html.LabelFor(model => model.Keyword, htmlAttributes: new { @class = "control-label col-md-2" }) 
 @Html.EditorFor(model => model.Keyword, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Keyword, "", new { @class = "text-danger" }) 
 
 
 
  
 
 
 } 
 @Html.ActionLink("Back to List", "Index") 
 
  

如您所见，我在标准模板下面添加了一个id="searchResults"的div并编辑了按钮。 我想要的是在底部的div显示部分视图SearchResults.cshtml ，但仅在单击按钮后显示。 我通过使用@Html.Partial("SearchResults", ViewBag.MyData)成功地显示了部分视图，但是在第一次加载父视图时呈现它并在Index()设置ViewBag.MyData方法已经，这不是我想要的。

简介：单击按钮，我将获得一些SearchResultModel实例List （通过数据库访问），然后使用这个新获得的数据作为模型呈现局部视图。 我怎么能做到这一点？ 我在第一步似乎已经失败了，就是用上面的代码点击按钮。 现在，我导航到URL ~/Search/DisplaySearchResults ，但当然没有任何东西，也没有调用代码隐藏方法。 在传统的ASP.NET中，我只添加了服务器端的OnClick处理程序，为网格设置DataSource并显示网格。 但是在MVC中我已经失败了这个简单的任务……

更新：将按钮更改为@Html.ActionLink我最终可以输入控制器方法。 但自然因为它返回局部视图，它显示为整个页面内容。 所以问题是：如何告诉部分视图在客户端的特定div呈现？

Answer 1

将按钮更改为

 Search 

并添加以下脚本

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

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

 public ActionResult DisplaySearchResults(string searchText) { var model = // build list based on parameter searchText return PartialView("SearchResults", model); } 

jQuery .load方法调用您的控制器方法，传递搜索文本的值并使用局部视图更新

的内容。

附注：此处可能不需要使用

标签和@Html.ValidationSummary()以及@Html.ValidationMessageFor() 。 你永远不会返回Index视图，所以ValidationSummary毫无意义，我假设你想要一个null搜索文本来返回所有结果，并且在任何情况下你都没有属性Keyword任何validation属性，所以没有什么可以validation。

编辑

基于OP的评论， SearchCriterionModel将包含具有validation属性的多个属性，那么方法将包括提交按钮并处理表单.submit()事件

  var url = '@Url.Action("DisplaySearchResults", "Search")'; $('form').submit(function() { if (!$(this).valid()) { return false; // prevent the ajax call if validation errors } var form = $(this).serialize(); $('#searchResults').load(url, form); return false; // prevent the default submit action }) 

并且控制器方法将是

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