3

シナリオは、Im 基本的に 4 つのドロップダウンを作成しようとしており、1 つが変更されると再入力されます。別名、フィルターは互いにカスケードしています。

そこで、Ajax 呼び出しに入れることにしました。そして基本的に、それはパラメーターを取り、どの選択リストを返す必要があるかを決定します。次に、古い 4 つのドロップダウンを新しいドロップダウンに置き換えます。(現在のパーシャルを新しいパーシャルに置き換えます)

ただし、何らかの理由で、コントローラーを1回..次に2回..次に4回..などと呼び出しています。古いものが削除/交換されていないかのように。隠しただけ？…

視覚的に、私が何を期待しているかがわかります。ドロップダウンは選択オプションを変更します。

以下はコードです。（一部の変数名がタイプミスである場合は申し訳ありません。ここに投稿するために変更されています）

コントローラ：

   public class Filter
    {
        public IEnumerable<SelectListItem> List1;
        public IEnumerable<SelectListItem> List2;
        public IEnumerable<SelectListItem> List3;
        public IEnumerable<SelectListItem> List4;
    }

    public ActionResult GlobalFilter(String l1, String l2, String l3, String l4)
    {
        Filter filter = new Filter();

        filter.List1 = ...selectList

        filter.List2 = ...selectList

        filter.List3 = ...selectList

        filter.List4 = ...selectList

        return PartialView(filter);
    }

見る：

    <div id="filterPartial">

        @Html.Action("GlobalFilter", "Header")
    </div>

部分図:

@model ns.Controllers.HeaderController.Filter

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

@using (Ajax.BeginForm("GlobalFilter", "Header", new AjaxOptions { UpdateTargetId = "filterPartial" }))
{ 

    @Html.DropDownList("l1", Model.List1, new { })
     @Html.DropDownList("l2", Model.List2, new { })

     @Html.DropDownList("l3", Model.List3, new { })
      @Html.DropDownList("l4", Model.List4, new { })

}
<script type="text/javascript">
    $('#l1').change(function () {
        $(this).parents('form').submit();
    });
</script>
4

1 に答える 1

5

これをパーシャルの外に移動します。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

また、変更スクリプトもパーシャルの外に移動し、次のように動的コンテンツを処理するように変更しました。

<script type="text/javascript">
    $('#filterPartial').on('change', '#l1', function () {
        $(this).closest('form').submit();
    });
</script>
于 2013-01-23T20:13:28.470 に答える