我将要描述的问题与我已经发现的问题非常相似(例如,该帖子的名称几乎相同),但我希望我可以将其变成不是重复的东西。
我在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如下:
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(使用SearchCriterionModelmodel和template Edit 强烈键入)以及模型类型(template List )SearchResults.cshtml的 部分 视图。IEnumerable<SearchResultModel> __
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()方法中设置了它时,它将呈现出来,这不是我想要的。
div
id="searchResults"
@Html.Partial("SearchResults", ViewBag.MyData)
ViewBag.MyData
Index()
摘要:在点击该按钮时,我会得到一些List的SearchResultModel实例(通过数据库访问),然后将局部视图应该呈现,使用这种新获得的数据作为模型。 我该怎么做? 我似乎已经在第一步失败了,那就是对上面的代码单击按钮做出了反应。现在,我导航到URL ~/Search/DisplaySearchResults,但是当然那里什么也没有,也没有调用任何代码隐藏方法。在传统的ASP.NET中,我只是添加了一个服务器端OnClick处理程序,DataSource为网格设置了并显示了网格。但是在MVC中,我已经无法完成这个简单的任务…
List
SearchResultModel
~/Search/DisplaySearchResults
OnClick
DataSource
更新: 将按钮更改为“ @Html.ActionLink我终于可以输入控制器方法”。但是自然会返回部分视图,因此将其显示为整个页面的内容。所以问题是:如何告诉局部视图div在客户端的特定内部进行渲染?
@Html.ActionLink
将按钮更改为
<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>使用部分视图更新的内容。
.load
<div>
附注:使用一个的<form>标签,并@Html.ValidationSummary()和@Html.ValidationMessageFor()有可能不是在这里有必要。您永远不会返回Index视图ValidationSummary是没有意义的,并且我假设您希望null搜索文本返回所有结果,并且在任何情况下都没有属性的任何验证属性,Keyword因此没有要验证的内容。
<form>
@Html.ValidationSummary()
@Html.ValidationMessageFor()
Index
ValidationSummary
null
Keyword
编辑
根据OP的注释,该注释SearchCriterionModel将包含带有验证属性的多个属性,那么该方法将是包括一个提交按钮并处理表单.submit()事件
.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); }