Вопрос по asp.net-mvc, razor, ajax – Ajax.BeginForm заменяет всю страницу на замену выпадающего списка

22

The purpose

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

The problem

Когда я выбираю значение в раскрывающемся списке, частичное представление не отображается в другом представлении, а отображается как целая страница. Однако, когда я включаю кнопку отправки в свой блок Ajax.BeginForm и запускаю действие на кнопке отправки, она работает как положено ...

The code

Controller

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

View

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

Partial View

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

Так почему же моя таблица searchResults не отображается как частичное представление?

У меня есть эти сценарии, включенные в мое представление _Layout:

<code><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>
</code>

Ваш Ответ

2   ответа
35

В вашем раскрывающемся списке замените:

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

с

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

Также избавляйся от всегоMicrosoftAjax*.js скрипты. Они полностью унаследованы и не должны использоваться в ASP.NET MVC 3 и более новых приложениях. Они предоставляются только для совместимости, если вы переходите с более старых версий.jQuery.js а такжеjquery.unobtrusive-ajax.js достаточно.

это действительно глупо .. я потерял 2 часа только для этого LOL. Благодарност sensei
+ 1 да .. отличное решение shashwat
0

правильно ли я понимаю, но если кнопка «отправить» работает нормально, почему бы просто не сделать это:

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

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

Похожие вопросы