使用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); 
}