目的
我有一个简单的表,列出了名称(在局部视图中),并且在其上方有一个包含这些名称的下拉列表。目的是根据在下拉列表中选择的名称来过滤表。下拉列表中的选定值更改后,应立即进行过滤,并且应仅再次呈现部分视图。
问题
当我在下拉列表中选择一个值时,部分视图不会在其他视图中呈现,而是显示为整个页面。但是,当我在Ajax.BeginForm块中包含一个提交按钮并触发对提交按钮的操作时,它确实可以正常工作…
代码
控制者
public PartialViewResult Filter(string filterName) { var names = from p in db.People select p; if (!String.IsNullOrEmpty(filterName)) { names = names.Where(p => p.Name.Equals(filterName)); } return PartialView("_PersonsTable", names); }
视图
@model IEnumerable<Sandbox.Models.Person> <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> @using (Ajax.BeginForm("Filter", "Person", new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "SearchResults", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace })) { @Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new { onchange = "this.form.submit()" }) } @Html.Partial("_PersonsTable")
部分视图
@model IEnumerable<Sandbox.Models.Person> <table id="SearchResults"> <tr> <th> Name </th> <th> Age </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Age) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.ID }) | @Html.ActionLink("Details", "Details", new { id=item.ID }) | @Html.ActionLink("Delete", "Delete", new { id=item.ID }) </td> </tr> } </table>
那么为什么我的searchResults表没有呈现为部分视图呢?
我的_Layout视图中包含以下脚本:
<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script> <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
在下拉菜单中替换:
new { onchange = "this.form.submit()" }
与:
new { onchange = "$(this.form).submit();" }
还要摆脱所有MicrosoftAjax*.js脚本。这些是完全遗留的,不应在ASP.NET MVC 3和更高版本的应用程序中使用。仅出于兼容性原因提供它们,如果您要从旧版本迁移。jQuery.js并且jquery.unobtrusive- ajax.js足够了。
MicrosoftAjax*.js
jQuery.js
jquery.unobtrusive- ajax.js