asp.net-mvc - 如何使用另一个下拉列表过滤下拉列表的选项

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 class TestQuestionsViewModel
{
    public string CategoryId { get; set; }
    public IEnumerable<Category> Categories { get; set; }

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

这是我的 Controller 类方法

    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 来做到这一点，这样用户在选择一个下拉菜单时就不会感觉到页面完全重新加载。这就是我要做的。

创建具有两个类别属性的 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 Action 方法返回此强类型 View ，其中填充了 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);
}

在你的强类型 View 中，

@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 操作方法添加到 Controller 以返回所选类别的子类别。我们将以 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!
    }