Каскадное раскрывающееся меню MVC3, возвращающее пустые раскрывающиеся поля

Я пытаюсь создать каскадное раскрывающееся меню с помощью 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.


javascript c# jquery asp.net-mvc-3 cascadingdropdown
person Ryan Duffing    schedule 09.04.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

У вас есть возврат 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>

или вы также можете проверить переменную ответа, полученную из вашего метода Action, с помощью вкладки консоли firebug.

person Muhammad Omair    schedule 09.04.2013