Ajax.BeginForm заменяет целую страницу OnChange из DropDownList

Question

Цель

У меня есть простая таблица список имен (в частичном виде), и выше него DropDownList, содержащий эти имена. Цель состоит в том, чтобы отфильтровать таблицу на основе имени, которое было выбрано в раскрывающемся списке. Фильтрация должна произойти, как только выбранное значение в раскрывающемся списке изменится, и должно снова отобразить только частичный вид.

Проблема

Когда я выбираю значение в 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> 

Так почему же это, что мой стол 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.

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. 
} 

Если вы не хотите, чтобы кнопка отображалась, просто спрячьте ее. Это взлом, и если он не соответствует вашим потребностям, мы можем исследовать его дальше.