c# - 级联下拉 MVC3 返回空下拉字段

Question

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

Controller :

    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”时，我的 Controller 正在返回。它确实包含图片的所有正确集合项目，并分配了各自的“值”和“文本”字段。当它将 JSON 返回到 View 时，它会创建一个下拉菜单，其中包含应该存在的确切字段数，但它们都包含空数据。当我在 Chrome 中检查该元素时，下面是 HTML:

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

感谢所有帮助。任何进一步请求的代码将链接到pastebin 帖子中。

Answer 1

您已返回 JSON，那么您需要使用与从 Pictures Controller 发送的相同变量。试试这个:

<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 方法获取的响应变量。