別のドロップダウンリストを使用してドロップダウンリストのオプションをフィルタリングする方法

Question

私はASP.NETにはとても新しいので、ASP.NetのMVC 3フレームワークを使用しています。ドロップダウンリストのオプションを別のドロップダウンリストでフィルタリングしようとしていましたが、それを行うことはできません。私は主なカテゴリとサブカテゴリの両方のリストを入力し、それらをページにロードすることでこれを最初に試みていました。次に、各サブカテゴリのオプションのクラス属性を親カテゴリに設定します。最後に、最初のドロップダウンリストから親カテゴリをクリックすると、子サブカテゴリのみが表示され、残りの部分は非表示になります（以前はJavaでこれを行っていました）。しかし、ASP.Net MVCでhtmlコードは非常に異なっています。私はドロップダウンリストの各オプションにクラス属性を設定することさえできません。一般に、各オプションではなくすべてのドロップダウンのクラスを設定します。これは私が今 を持っているものであるこれは私のビュー

<p> 
@Html.LabelFor(model => model.CategoryId) 
@Html.DropDownListFor(x => x.CategoryId , new SelectList(Model.Categories, "CategoryId", "CategoryName"), new { onchange= "this.form.submit();"}) 
</p> 

<p> 
@Html.LabelFor(model => model.SubCategories) 
@Html.DropDownListFor(x => x.SubCategories, new SelectList(Model.SubCategories, "SubCategoryId", "SubCategoryName"), new { @class = "Category1.categoryname" }) 
</p> 

ですこれはこれは

public ActionResult Create() 
    { 

     var model = new TestQuestionsViewModel 
     { 

      Categories = resetDB.Categories.OrderBy(c => c.categoryid), 
      SubCategories = resetDB.SubCategories.OrderBy(sc => sc.subcategoryid) 
     }; 
    return View(model); 
    } 

私の質問は、私が設定することができますどのように私のコントローラクラスメソッドである私のモデル

public class TestQuestionsViewModel 
{ 
    public string CategoryId { get; set; } 
    public IEnumerable<Category> Categories { get; set; } 

    public string SubCategoryId { get; set; } 
    public IEnumerable<SubCategory> SubCategories { get; set; } 
} 

です個々のオプションのクラス属性あるいは、誰かがこれをどうやって別の方法で行うかについての示唆を持っているなら、私はどんな解決策にも開放しています。ありがとうございました。

Answer 1

ページが最初に読み込まれたときにすべてのサブアイテムをページに読み込むと、私には良い考えではないようです。あなたが100のカテゴリーを持ち、各カテゴリーに200のサブカテゴリー項目がある場合はどうなりますか？あなたは本当に20000アイテムをロードしますか？

私はあなたがインクリメンタルな方法で読み込むべきだと思います。 「主カテゴリ」ドロップダウンに、ユーザーがその中から1つのアイテムを選択させるという値を入力します。サーバーへの呼び出しを行い、サブカテゴリーが選択されたカテゴリーに属していることを取得し、そのデータを2番目のドロップダウンにロードします。 jQuery ajaxを使用すると、1つのドロップダウンを選択したときにユーザーが完全なページを再読み込みしないようにすることができます。これが私のやり方です。

あなたGETアクションメソッドが

public ActionResult Edit() 
{ 
    var objProduct = new ProductViewModel();    
    objProduct.MainCategory = new[] 
    { 
     new SelectListItem { Value = "1", Text = "Perfume" }, 
     new SelectListItem { Value = "2", Text = "Shoe" }, 
     new SelectListItem { Value = "3", Text = "Shirt" } 
    }; 
    objProduct.SubCategory = new[] { new SelectListItem { Value = "", Text = "" } }; 
    return View(objProduct); 
} 

とあなたの強く型付けされたビューでは、

を満たしMainCategoryための内容で、この強く型付けされたビューを返しましょう両方のカテゴリのプロパティ

public class ProductViewModel 
{ 
    public int ProductId { set;get;} 
    public IEnumerable<SelectListItem> MainCategory { get; set; } 
    public string SelectedMainCatId { get; set; } 
    public IEnumerable<SelectListItem> SubCategory { get; set; } 
    public string SelectedSubCatId { get; set; } 
} 

を持っているのViewModelを作成します。

@model MvcApplication1.Models.ProductViewModel 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
@using (Html.BeginForm()) 
{  
    @Html.DropDownListFor(x => x.SelectedMainCatId, new SelectList(Model.MainCategory,"Value","Text"), "Select Main..") 
    @Html.DropDownListFor(x => x.SelectedSubCatId, new SelectList(Model.SubCategory, "Value", "Text"), "Select Sub..")  
    <button type="submit">Save</button> 
} 
<script type="text/javascript"> 
    $(function() { 
     $("#SelectedMainCatId").change(function() { 
      var val = $(this).val(); 
      var subItems=""; 
      $.getJSON("@Url.Action("GetSub","Product")", {id:val} ,function (data) { 
       $.each(data,function(index,item){ 
       subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>" 
       }); 
       $("#SelectedSubCatId").html(subItems) 
      }); 
     }); 
    }); 
</script> 

GetSubアクションメソッドをコンシューマに追加する選択したカテゴリのサブカテゴリを返します。私たちは、JSON

public ActionResult GetSub(int id) 
{ 
    List<SelectListItem> items = new List<SelectListItem>(); 
    items.Add(new SelectListItem() { Text = "Sub Item 1", Value = "1" }); 
    items.Add(new SelectListItem() { Text = "Sub Item 2", Value = "8"}); 
    // you may replace the above code with data reading from database based on the id 

    return Json(items, JsonRequestBehavior.AllowGet); 
} 

として応答を返すされている今、選択された値は、その意志はサーバ側またはクライアント側で起こったあなたのHTTPOSTアクションメソッド

[HttpPost] 
    public ActionResult Edit(ProductViewModel model) 
    { 
     // You have the selected values here in the model. 
     //model.SelectedMainCatId has value! 
    } 

Answer 2

ポストバックを処理し、サブカテゴリオプションをフィルタリングする別のメソッドを追加する必要があります。このような何か：

[HttpPost] 
public ActionResult Create(TestQuestionsViewModel model) 
{ 
    model.SubCategories = resetDB.SubCategories 
      .Where(sc => sc.categoryid == model.SubCategoryId) 
      .OrderBy(sc => sc.subcategoryid); 
    return View(model);  
} 

編集

ところで、あなたはまだ他のドロップダウンにクラス名を設定する必要がある場合、あなたはそのようにそれを行うことはできません。最も簡単な方法は、モデルに「SelectedCategoryName」プロパティを追加し、{@class = ModelSelectedCategoryName}のような参照を追加することです。