jQuery를 사용하여 상위 드롭 다운 선택에 계단식 드롭 다운을 채우기

Question

jQuery 및 ASP.NET MVC 3에 razor view engine을 사용하고 있습니다.

내보기에는 두 개의 드롭 다운이 있습니다. 첫 번째 드롭 다운에는 상위 카테고리 목록이 표시됩니다. 두 번째 드롭 다운 메뉴는 상위 카테고리 드롭 다운에서 선택한 항목을 기반으로 하위 카테고리 목록을로드합니다. 여기

내 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내보기에 내 아이 드롭 다운을 채울 : JSON 형식으로 내 아이의 범주를 찾아온다

<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 방법을.

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 속성을 채우기 때문에 드롭 바인딩을 사용하고 있습니다 : 당신이 만 ID가 필요하기 때문에 그런데

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

을하고 이름은 다른 속성을 보낼 필요가 없습니다 와이어 및 낭비 대역폭을 통해. 보기 모델을 사용하거나이 경우 익명의 객체가 잘 수행 할 수 있습니다.