드롭다운 목록 변경 시 Ajax.BeginForm이 전체 페이지를 바꿉니다.

드롭다운 목록 변경 시 Ajax.BeginForm이 전체 페이지를 바꿉니다.

목적은

이름을 나열하는 간단한 표가 있습니다(부분 보기). 그 위에 해당 이름을 포함하는 드롭다운 목록이 있습니다.드롭다운 목록에서 선택한 이름을 기준으로 테이블을 필터링하는 것이 목적입니다.필터링은 드롭다운 목록에서 선택한 값이 변경되는 즉시 수행되어야 하며 부분 보기만 다시 렌더링해야 합니다.

문제가

드롭다운 목록에서 값을 선택하면 부분 보기가 다른 보기에 렌더링되지 않고 전체 페이지로 표시됩니다.하지만 내 Ajax에 submit 버튼이 포함되어 있을 때.BeginForm block(시작 양식 블록) 및 Submit(제출) 버튼에서 작업을 트리거하면 예상대로 작동합니다.

코드를

컨트롤러

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>

그렇다면 검색 결과 테이블이 부분 보기로 렌더링되지 않는 이유는 무엇입니까?

다음 스크립트가 _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>

드롭다운에서 바꾸기:

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

다음 항목 포함:

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

또한 모든것을 없애라.MicrosoftAjax*.js대본들이는 완전히 유산이므로 ASP에서 사용해서는 안 됩니다.NET MVC 3 이상의 애플리케이션.이전 버전에서 마이그레이션하는 경우 호환성의 이유로만 제공됩니다.jQuery.js그리고.jquery.unobtrusive-ajax.js충분합니다.

제대로 이해했는지는 모르겠지만, 제출 버튼이 정상적으로 작동한다면 이렇게만 하면 되는 이유는 무엇입니까?

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

버튼을 표시하지 않으려면 그냥 숨깁니다.이것은 해킹이고 만약 당신의 요구에 맞지 않는다면 우리는 더 조사할 수 있습니다.

언급URL : https://stackoverflow.com/questions/10566923/ajax-beginform-replaces-whole-page-onchange-of-a-dropdownlist