22

目的

私は（部分的なビューで）名前をリストする単純なテーブルを持っており、その上にそれらの名前を含むドロップダウンリストがあります。目的は、ドロップダウンリストで選択された名前に基づいてテーブルをフィルタリングすることです。ドロップダウンリストで選択した値が変更されるとすぐにフィルタリングが実行され、部分ビューのみが再度レンダリングされます。

問題

ドロップダウンリストで値を選択すると、部分的なビューは他のビューではレンダリングされず、ページ全体として表示されます。ただし、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>
4

2 に答える 2

36

ドロップダウンで次を置き換えます。

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

と：

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

また、すべてのMicrosoftAjax*.jsスクリプトを削除します。これらは完全にレガシーであり、ASP.NETMVC3以降のアプリケーションでは使用しないでください。古いバージョンから移行する場合は、互換性の理由でのみ提供されます。jQuery.jsとjquery.unobtrusive-ajax.js十分です。

于 2012-05-12T21:40:23.883 に答える
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.
}

ボタンを表示したくない場合は、非表示にします。これはハックであり、ニーズに合わない場合はさらに調査することができます。

于 2012-05-12T21:34:42.823 に答える