使用jQuery填充父級下拉選擇中的級聯下拉列表

Question

我使用jQuery和ASP.NET MVC 3以及razor view engine。

我對我的觀點有2個下拉菜單。第一個下拉菜單顯示父類別列表。第二個下拉菜單應該根據父類別下拉列表中選擇的內容加載子類別列表。

這裏是我的Category對象：

public class Category 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public string Description { get; set; } 
    public string MetaKeywords { get; set; } 
    public string MetaDescription { get; set; } 
    public bool IsActive { get; set; } 
    public int? ParentCategoryId { get; set; } 
    public virtual Category ParentCategory { get; set; } 
    public virtual ICollection<Category> ChildCategories { get; set; } 
} 

創建我的視圖模型的實例，並在下拉菜單

操作方法：

public ActionResult Create() 
{ 
    EditProductViewModel viewModel = new EditProductViewModel 
    { 
     ParentCategories = categoryService.GetParentCategories() 
     .Where(x => x.IsActive) 
     .OrderBy(x => x.Name), 
     ChildCategories = Enumerable.Empty<Category>(), 
     IsActive = true 
    }; 

    return View(viewModel); 
} 

我的視圖模型的部分：

public class EditProductViewModel 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public bool IsActive { get; set; } 
    public int ParentCategoryId { get; set; } 
    public IEnumerable<Category> ParentCategories { get; set; } 
    public int ChildCategoryId { get; set; } 
    public IEnumerable<Category> ChildCategories { get; set; } 
} 

下拉菜單中的HTML：

<tr> 
    <td><label>Parent Category:</label> <span class="red">*</span></td> 
    <td>@Html.DropDownListFor(x => x.ParentCategoryId, 
     new SelectList(Model.ParentCategories, "Id", "Name", Model.ParentCategoryId), 
     "-- Select --", 
     new { data_url = Url.Action("AjaxBindingChildCategories"), id = "ParentCategories" } 
    ) 
     @Html.ValidationMessageFor(x => x.ParentCategoryId) 
    </td> 
</tr> 
<tr> 
    <td><label>Child Category:</label> <span class="red">*</span></td> 
    <td>@Html.DropDownListFor(x => x.ChildCategoryId, 
     new SelectList(Model.ChildCategories, "Id", "Name", Model.ChildCategoryId), 
     "-- Select --", 
     new { id = "ChildCategories" } 
    ) 
     @Html.ValidationMessageFor(x => x.ChildCategoryId) 
    </td> 
</tr> 

jQuery來填充我的觀點我的孩子下拉：

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#ParentCategories').change(function() { 
     var url = $(this).data('url'); 
     var data = { parentCategoryId: $(this).val() }; 

     $.getJSON(url, data, function (childCategories) { 
      var childCategoriesDdl = $('#ChildCategories'); 
      childCategoriesDdl.empty(); 

      $.each(childCategories, function (index, childCategory) { 

       alert('childCategory = ' + childCategory.Value); 

       childCategoriesDdl.append($('<option/>', { 
        value: childCategory, text: childCategory 
       })); 
      }); 
     }); 
     }); 
    }); 

</script> 

我的AJAX方法帶回JSON格式的我的孩子類別。

public ActionResult AjaxBindingChildCategories(int parentCategoryId) 
{ 
    IEnumerable<Category> childCategoryList = categoryService.GetChildCategoriesByParentCategoryId(parentCategoryId); 
    IEnumerable<Category> childList = 
     from c in childCategoryList 
     select new Category 
     { 
     Id = c.Id, 
     Name = c.Name 
     }; 

     return Json(childList, JsonRequestBehavior.AllowGet); 
} 

這不是填充我的孩子下拉列表。我看了Fire Bug，看起來也沒問題。

這裏是螢火蟲我的迴應：

[{"Id":3,"Name":"Test category 3","Description":null,"MetaKeywords":null,"MetaDescription":null,"IsActive":false,"ParentCategoryId":null,"ParentCategory":null,"ChildCategories":null}] 

它看起來好像沒什麼問題。

有人可以幫我把這個整理出來嗎？

Answer 1

您的Category類似乎沒有Value屬性。在你的控制器動作，您都填充僅Id和Name性能，所以用它們來下拉綁定：

$.each(childCategories, function(index, childCategory) { 
    childCategoriesDdl.append(
     $('<option/>', { 
      value: childCategory.Id, 
      text: childCategory.Name 
     }) 
    ); 
}); 

順便說一句，因爲你只需要一個ID和一個名稱就沒有必要送其他屬性通過電線和浪費帶寬。使用視圖模型或在這種情況下，匿名對象會做得很好：

public ActionResult AjaxBindingChildCategories(int parentCategoryId) 
{ 
    IEnumerable<Category> childCategoryList = categoryService.GetChildCategoriesByParentCategoryId(parentCategoryId); 
    var childList = 
     from c in childCategoryList 
     select new 
     { 
     Id = c.Id, 
     Name = c.Name 
     }; 

     return Json(childList, JsonRequestBehavior.AllowGet); 
}