jQueryを使用して親のドロップダウン選択にカスケードドロップダウンを設定する

Question

jQueryとASP.NET MVC 3にはrazor view engineを使用しています。

私は私の意見に2回のドロップダウンを持っています。最初のドロップダウンで親カテゴリのリストが表示されます。 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> 

は、私の見解で私の子供のドロップダウンを移入するには：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 
     }) 
    ); 
}); 

をワイヤと廃棄帯域幅を介して。ビューモデルを使用してください。この場合、匿名オブジェクトはうまくいくでしょう：

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