如何使用另一个下拉列表筛选下拉列表的选项(How to filter the options of

我很新的ASP.NET和我使用ASP.Net的MVC框架3。 我试图筛选使用另一个下拉下拉列表选项，我不能设法做到这一点。 我试图通过填充主要类别的两个列表，和子类别，并将它们加载到page.Then的每个子类的选项class属性设置为自己的父类这样做第一。 最后，从第一个下拉列表中的父类的点击只显示孩子子类别，隐藏剩下的（这是我做到了以前在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);
    }

我的问题是如何设置为每个单独的选项类属性。 或者，如果任何人有如何做到这一点以不同的方式建议我打开任何解决方案。 谢谢。

Answer 1:

加载所有的子项到页面在页面加载时开始，并不似乎是一个好主意，我。 如果你有100个类别和每个类别有200名个子类的项目？ 你真的要加载20000项？

我认为你应该做装载的增量方式。 提供的值主要类别下拉菜单中，让用户从选择一个项目。 向服务器的呼叫，并获得子类别属于选定的类别和数据加载到第二个下拉。 您可以使用jQuery Ajax来做到这一点，这样用户就不会觉得一个完整的页面重新加载时，他选择一个下拉。 这是怎么我会做到这一点。

创建具有两个类别属性视图模型

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

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

文章来源: How to filter the options of a drop down list using another drop down list