계단식 드롭 다운 빈 드롭 다운 필드를 반환하는 MVC3

Question

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> 

자바 스크립트 : 여기 내 코드입니다

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

W 암탉 나는 변수 'k'에서 내 컨트롤러가 돌아오고 있는지 살펴 봅니다. 여기에는 각각의 '값'및 '텍스트'필드가 지정된 사진의 모든 올바른 수집 항목이 포함됩니다. JSON을 다시보기로 가져 오면 정확한 수의 필드가있는 드롭 다운 메뉴가 만들어 지지만 모두 빈 데이터가 포함되어 있습니다. 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> 

또는 당신은 또한 응답 변수가 불을 지르고 콘솔 탭을 사용하여 작업 방식에서 얻을 확인할 수 있습니다 이 시도.