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

Question

我将要描述的问题与我已经发现的问题非常相似(例如这篇文章名称几乎相同),但我希望我能把它变成一个不重复的东西.

我在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<SearchResultModel>
    {
      new SearchResultModel { Id=1, FirstName="Peter", Surname="Pan" },
      new SearchResultModel { Id=2, FirstName="Jane", Surname="Doe" }
    };
    return PartialView("SearchResults", model);
  }
}

以及视图Index.cshtml(强烈键入SearchCriterionModel模型和模板编辑)和SearchResults.cshtml作为类型模型(模板列表)的局部视图.IEnumerable<SearchResultModel>

这是索引视图:

@model WebApplication1.Models.SearchCriterionModel

@{
  ViewBag.Title = "Index";
}

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()

  <div class="form-horizontal">
    <h4>SearchCriterionModel</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
      @Html.LabelFor(model => model.Keyword, htmlAttributes: new { @class = "control-label col-md-2" })
      <div class="col-md-10">
        @Html.EditorFor(model => model.Keyword, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Keyword, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="button" id="btnDisplaySearchResults" value="Search" onclick="location.href='@Url.Action("DisplaySearchResults", "SearchController")'" />
      </div>
    </div>
  </div>
}

<div>
  @Html.ActionLink("Back to List", "Index")
</div>
<div id="searchResults">

</div>

正如你所看到的,我加了一个div与id="searchResults"标准模板下方和编辑按钮.我要的是显示局部视图SearchResults.cshtml的div底部,但点击按钮之后.我已成功通过使用显示局部视图@Html.Partial("SearchResults", ViewBag.MyData),但是在第一次加载父视图时我将其呈现并且我已经ViewBag.MyData在Index()方法中设置了,这不是我想要的.

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

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

Answer 1

将按钮更改为

<button id="search">Search</button>

并添加以下脚本

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方法调用您的控制器方法,传递搜索文本的值并<div>使用局部视图更新其内容.

附注:使用一个的<form>标签,并@Html.ValidationSummary()和@Html.ValidationMessageFor()有可能不是在这里有必要.你永远不会返回Index视图ValidationSummary是没有意义的,我假设你想要一个null搜索文本来返回所有结果,并且在任何情况下你都没有属性的任何验证属性,Keyword所以没有什么可以验证.

编辑

基于OP的注释SearchCriterionModel将包含具有验证属性的多个属性,那么方法将包括提交按钮并处理表单.submit()事件

<input type="submit" value="Search" />

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);
}