Ajax.BeginForm 그 이름이 포함 된 드롭 다운리스트를 내가 (부분보기) 간단한 테이블 목록 이름을 가지고있는 DropDownList

Question

목적

의 onchange를 전체 페이지를 대체하고, 그 위에. 목적은 드롭 다운 목록에서 선택한 이름을 기반으로 테이블을 필터링하는 것입니다. 필터링은 드롭 다운 목록에서 선택한 값이 변경되는 즉시 발생해야하며 부분보기 만 다시 렌더링해야합니다.

문제

I가 드롭 다운리스트에서 값을 선택는 부분 뷰가 다른 뷰에서 렌더링되지 않고 전체 페이지로 표시한다. 나는 내 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. 
} 

버튼을 표시하지 않으려면 숨기십시오. 이것은 해킹이며 사용자의 요구에 맞지 않는 경우 더 조사 할 수 있습니다. 당신의 드롭 다운에서