Question

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

控制器：

    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返回给View时，它会创建一个下拉菜单，其中包含应该存在的确切字段数，但它们都包含空数据。当我在Chrome中检查元素时，以下是HTML：

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

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

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

级联下拉列表MVC3返回空下拉列表字段

1 个答案: