16

私はASP.NETを初めて使用し、ASP.NetのMVC3フレームワークを使用しています。別のドロップダウンを使用してドロップダウンリストのオプションをフィルタリングしようとしましたが、それを行うことができません。最初に、メインカテゴリとサブカテゴリの両方のリストを入力してページにロードすることでこれを実行しようとしていました。次に、各サブカテゴリのオプションのクラス属性を親カテゴリに設定しました。最後に、最初のドロップダウンリストから親カテゴリをクリックすると、子サブカテゴリのみが表示され、残りは非表示になります（これは以前に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 class TestQuestionsViewModel
{
    public string CategoryId { get; set; }
    public IEnumerable<Category> Categories { get; set; }

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

これは私のコントローラークラスのメソッドです

    public ActionResult Create()
    {

        var model = new TestQuestionsViewModel
        {

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

私の質問は、個々のオプションごとにクラス属性を設定するにはどうすればよいですか。または、誰かがこれを別の方法で行う方法について提案があれば、私はどんな解決策にもオープンです。ありがとうございました。

4

2 に答える 2

34

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

段階的なロード方法を実行する必要があると思います。メイン カテゴリ ドロップダウンに値を指定し、ユーザーにその中から 1 つの項目を選択させます。サーバーを呼び出して、選択したカテゴリに属する​​サブカテゴリを取得し、そのデータを 2 番目のドロップダウンにロードします。jQuery ajax を使用してそれを行うと、ユーザーが 1 つのドロップダウンを選択したときに完全なページのリロードを感じないようにすることができます。これが私がそれを行う方法です。

両方のカテゴリ プロパティを持つ ViewModel を作成します。

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

GET アクション メソッドが、MainCategory のコンテンツが入力された、この厳密に型指定されたビューを返すようにします。

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

強く型付けされたビューでは、

@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!
    }
于 2012-04-24T19:53:42.267 に答える
0

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

[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 }のように参照することです。

于 2012-04-24T19:17:53.633 に答える