1

Chosenプラグインを使用しています。セクションドロップダウンリストを変更するときに、カテゴリ (選択済み) ドロップダウンリストを更新したい。

ここにビューがあります：

@model CategoryInputModel

@Html.DropDownListFor(model => model.SectionId, ViewBag.SectionList as IEnumerable<SelectListItem>, new { id = "SectionId" })

@Html.ListBoxFor(model => model.CategoryIdSet, ViewBag.AllCategoryList as MultiSelectList
               , new
                 {
                   @class = "chzn-select",
                   data_placeholder = "Choose Categories...",
                   @style = "width : 500px;",
                   id = "CategoryIdSet"
                })

CategoryInputModel は次のようなものです。

public class CategoryInputModel
{
        public string Name { get; set; }
        public int SectionId{ get; set; }
        public List<int> CategoryIdSet{ get; set; }
}

単純なリストのカスケード ドロップダウン リストを作成できますが、複数選択用に作成できませんでした。私はこれを試しました：

<script type="text/javascript">
                    $(function () {
                        $("#SectionId").change(
                        function () {
                            loadLevelTwo(this);
                        });
                        loadLevelTwo($("#SectionId"));
                    });
                    function loadLevelTwo(selectList) {
                        var selectedId = $(selectList).val();
                        $.ajax(
                        {
                            url: "@Url.Action("GetCategoriesBySectionId", "Project")",
                            type: "GET",
                            data: { id: selectedId },
                            success: function (data) {
                                $("#CategoryIdSet").html($(data).html());
                            },
                            error: function (xhr) {
                                alert("Something went wrong, please try again");
                            }
                        });
                    }
                </script>

コントローラーで:

    public ActionResult GetCategoriesBySectionId(int id)
    {
        var result = MyService.GetCategoriesBySectionId(id);

        // **its problem to create partial view that return chosen dropdownlist I need**
    }

カスケードのChosenドロップダウンリストを作成するにはどうすればよいですか?

4

1 に答える 1

2

ajax コールバックにもう少し追加する必要があると思います。success メソッドを done に置き換えました。これを試してください、それは私のために働きます：

               function loadLevelTwo(selectList) {
                    var selectedId = $(selectList).val();
                    $.ajax(
                    {
                        url: "@Url.Action("GetCategoriesBySectionId", "Project")",
                        type: "GET",
                        data: { id: selectedId },
                        error: function (xhr) {
                            alert("Something went wrong, please try again");
                        }
                    }).done(function (data) {
                        $("#CategoryIdSet").children().each(function (index, option) {
                            $(option).remove();
                        });

                        //blank option
                        var items = "<option selected value=\"\"></option>";

                        $.each(data,
                            function () {
                                items += "<option value=\"" + this[0] + "\">" + this[1] + "</option>";
                        });

                        $("#CategoryIdSet").html(items)
                        $("#CategoryIdSet").trigger("liszt:updated");
                        $("#CategoryIdSet").change();
                    });
                }

コントローラーのアクションは次のようになります。

    public ActionResult GetCategoriesBySectionId(int id)
    {
        var result = MyService.GetCategoriesBySectionId(id);

        //build JSON.  
        var modelDataStore = from m in result 
                             select new[] { m.YourValueProperty.ToString(),
                                                m.YourTextProperty };

        return Json(modelDataStore, JsonRequestBehavior.AllowGet);
    }
于 2013-01-02T13:22:24.690 に答える