级联下拉 MVC3 返回空下拉字段答案

【问题标题】：Cascading Dropdown MVC3 returning empty dropdown fields级联下拉 MVC3 返回空下拉字段
【发布时间】：2013-04-09 13:11:53
【问题描述】：

我正在尝试使用 MVC3 创建级联下拉菜单。父下拉列表称为“类别”，当用户选择类别时，子下拉列表将填充属于该类别的图片列表。我现在有一些代码，当用户选择一个类别时，我可以从视图中调用控制器。这是我的代码：

控制器：

    public ActionResult Pictures(int catId)
    {
        var k = ((List<Picture>) ViewBag.AllPictures)
            .FindAll(x => x.CategoryId == catId)
            .Select(x => new
                {
                    Value = x.PictureId,
                    Text = x.Title
                });

        return Json(k, JsonRequestBehavior.AllowGet);
    }

查看：

        <div class="editor-field">
            @Html.DropDownListFor(model => model.Picture.PictureId, Enumerable.Empty<SelectListItem>(),  new { @id = "pictureFilter" })
            @Html.ValidationMessageFor(model => model.Picture.PictureId)
        </div>

Javascript：

<script type="text/javascript">
    $('#ddlFilter').on("change", function() {
        var selectedCat = $(this).val();
        $.getJSON("/StoreManager/Pictures", { catId: selectedCat }, function(pictures) {
            var picturesSelect = $('#pictureFilter');
            picturesSelect.empty();
            $.each(pictures, function(index, picture) {
                picturesSelect.append($('<option/>', {
                    value: picture.val,
                    text: picture.text
                }));
            });
        });  
    });
</script>

当我查看变量“k”时，我的控制器正在返回。它确实包含图片的所有正确集合项，并分配了它们各自的“值”和“文本”字段。当它将 JSON 返回到视图时，它会创建一个下拉菜单，其中包含应该存在的确切字段数，但它们都包含空数据。当我在 Chrome 中检查元素时，这是之后的 HTML：

<option><option/>
<option><option/>
<option><option/>
<option><option/>

感谢所有帮助。请求的任何其他代码都将链接到 pastebin 帖子中。

【问题讨论】：

标签： c# javascript jquery asp.net-mvc-3 cascadingdropdown

【解决方案1】：

您已返回 JSON，然后您需要使用与从 Pictures 控制器发送的相同变量。试试这个：

<script type="text/javascript">
    $('#ddlFilter').on("change", function() {
        var selectedCat = $(this).val();
        $.getJSON("/StoreManager/Pictures", { catId: selectedCat }, function(pictures) {
            var picturesSelect = $('#pictureFilter');
            picturesSelect.empty();
            $.each(pictures, function(index, picture) {
                picturesSelect.append($('<option/>', {
                    value: picture.Value,
                    text: picture.Text
                }));
            });
        });  
    });
</script>

或者您也可以使用 firebug 控制台选项卡检查从 Action 方法获取的响应变量。

【讨论】：