0

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/>

すべての助けに感謝します。要求された追加のコードは、ペーストビンの投稿にリンクされます。

4

1 に答える 1

3

PicturesJSON を返すと、コントローラーから送信するのと同じ変数を使用する必要があります。これを試して：

<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 メソッドから取得した応答変数を確認することもできます。

于 2013-04-09T13:18:30.577 に答える