Ajax.BeginForm替换整页的onchange一个下拉列表中(Ajax.BeginForm

目的

我有一个简单的表列名单（在一个局部视图），并且上述含这些名字一个DropDownList。的目的是为了筛选基于其在下拉列表中选择的名称表。滤波应尽快发生，因为在下拉列表中所选的值，并应再次渲染仅局部视图。

问题

当我在下拉列表中选择一个值，局部视图未在其他视图渲染，但显示为一整页。然而，当我包括我的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>

那么为什么我的SearchResult所表未呈现为局部视图？

我有这些脚本包含在我的_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就足够了。

Answer 2:

不知道如果我的理解是正确的，但如果提交按钮的工作原理确定为什么不只是这样做：

@Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new   { onchange = "clickMe('mybuttonId')" })

写小脚本

function clickMe(id) {
  $('#' + id).click() // where id is id of button that should submit the form.
}

如果你不希望按钮显示那么就隐藏它。这是一个黑客，如果它不适合您的需求，我们可以进一步调查。