Ajax.BeginForm替换了下拉列表的整个页面

Question

目的

我有一个简单的表列出名称(在部分视图中),上面是一个包含这些名称的下拉列表.目的是根据下拉列表中选择的名称过滤表.只要下拉列表中的选定值发生更改,就应该进行过滤,并且应该仅再次呈现部分视图.

问题

当我在下拉列表中选择一个值时,部分视图不会在另一个视图中呈现,而是显示为整个页面.但是,当我在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>

Answer 1

在您的下拉列表中替换:

new { onchange = "this.form.submit()" }

有:

new { onchange = "$(this.form).submit();" }

也摆脱所有MicrosoftAjax*.js脚本.这些完全是遗留的,不应在ASP.NET MVC 3和更新的应用程序中使用.如果您要从旧版本迁移,则仅出于兼容性原因提供它们.jQuery.js并且jquery.unobtrusive-ajax.js足够了.