Ajax.BeginForm zastępuje całą stronę z onchange dropdownlist

Question

Celem

Mam proste nazwy tabel z notowaniami (częściowym widokiem), a nad nim dropdownlist zawierający te nazwy. Celem jest filtrowanie tabeli na podstawie nazwy wybranej na liście rozwijanej. Filtrowanie powinno nastąpić, gdy tylko zmieni się wybrana wartość na liście rozwijanej i powinno ponownie wyświetlić tylko częściowy widok.

Problem

Kiedy wybrać wartość w dropdownlist, częściowy widok nie jest renderowany w innym świetle, ale jest wyświetlany w postaci całej strony. Jednak, kiedy to przycisk Prześlij w moim bloku Ajax.BeginForm i wywołać działanie na przycisk przesyłania, że ​​działa zgodnie z oczekiwaniami ...

Kod

Controller

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); 
} 

Zobacz

@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") 

Częściowy widok

@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> 

Więc dlaczego jest to, że mój stół searchresults nie jest wyświetlany jako częściowego widzenia?

mam te skrypty zawarte w moim zdaniem _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

W swoim liście rozwijanej wymienić:

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

z:

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

także pozbyć się wszystkich MicrosoftAjax*.js skryptów. Te są całkowicie stare i nie powinny być używane w ASP.NET MVC 3 i nowszych aplikacjach. Są one dostarczane tylko ze względu na kompatybilność w przypadku migracji ze starszych wersji. jQuery.js i jquery.unobtrusive-ajax.js są wystarczające.

Answer 2

Nie jestem pewien, czy rozumiem go poprawnie, ale jeśli przesłać przycisk działa OK, dlaczego nie po prostu to zrobić:

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

i pisać mały skrypt

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

Jeśli nie chcesz, aby przycisk wyświetlał, po prostu go ukryj. To jest hack i jeśli nie spełnia twoich potrzeb, możemy zbadać dalej.