2013-04-09 56 views
0

我試圖創建一個與MVC3級聯下拉列表。當用戶選擇一個類別時,父級下拉菜單被稱爲「類別」,然後用屬於該類別的圖片列表填充子級下拉菜單。我現在有一些代碼,當用戶選擇一個類別時,我可以從View中調用控制器。這裏是我的代碼:級聯下拉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> 

w ^我看看變量'k',我的控制器正在返回。它確實包含了圖片的所有正確的收集項目,並分配了它們各自的「值」和「文本」字段。當它將JSON返回給視圖時,它會創建一個下拉菜單,其中包含應該在其中的字段的確切數量,但它們都包含空數據。當我檢查Chrome中的元素時,這裏是HTML:

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

所有幫助表示讚賞。請求的任何進一步代碼將鏈接到pastebin帖子。

回答

3

您已經返回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的控制檯選項卡從您的行動方法得到。

+0

謝謝。就是這樣! – 2013-04-09 13:29:31