Заполнение каскадного раскрывающегося списка в родительском раскрывающемся списке с помощью 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, и, кажется, он тоже в порядке.

Вот мой ответ от firebug:

[{"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);
}