如何使用另一种下拉列表来过滤下拉列表的选项 [英] How to filter the options of a drop down list using another drop down list

问题描述

我很新的ASP.NET和我使用ASP.Net的MVC框架3。我试图筛选使用另一个下拉下拉列表选项，我不能设法做到这一点。我试图通过填充主要类别的两个列表，和子类别，并将它们加载到page.Then的每个子类的选项class属性设置为他们的父类做的这第一。最后，从第一个下拉列表中的父类的点击只显示孩子子类别，隐藏剩下的（我这是怎么做到了在Java pviously $ P $）。但是在ASP.Net MVC中的HTML code是如此不同，我不能即使设置了下拉的每个选项的类属性一般设置所有下拉列表不是每个选项的类。这是我现在所拥有的
这是我的看法。

I am very new to ASP.NET and I am using the MVC 3 framework of ASP.Net. I was trying to filter the options of a dropdown list using another drop down and I can't manage to do that. I was trying to do this first by populating both the list of main categories and and sub categories and loading them to the page.Then setting the class attribute of the options of each sub-category to their parent category. Finally on the click of the parent category from the first dropdown list only show the child sub-category and hide the rest(This is how i did it previously in java). But in ASP.Net MVC the html code is so different i can't even set the class attribute for each option of the dropdown it generally sets the class for all the drop downs not for each option. This is what I have right now This is my View

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

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

My questions is How can i set the class attributes for each individual options. Or if anyone has a suggestion on how to do this in a different way I am open for any solution. Thank you.

推荐答案

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

Loading all the Sub Items to the page when the page loads initially, does not seems to be a good idea to me. What if you have 100 Categories and Each categories has 200 sub category items ? Do you really want to load 20000 items ?

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

I think you should do an incremental way of loading. Provide the Main Category dropdown with the values, Let the user selects one item from that. Make a call to the Server and get the Sub categories belongs to the selected category and load that data to the second dropdown. You can use jQuery ajax to do it so that user will not feel a complete page reload when he select one drop down. This is how i will do it.

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

Create the ViewModel which has both category properties

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

Let your GET Action method returns this strongly typed view with the content for MainCategory filled

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

Add GetSub action method to your controller to return the sub categories for the selected category. We are returning the response as 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 Action方法可用

Now the selected values will be available in your HTTPOST Action method

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

这篇关于如何使用另一种下拉列表来过滤下拉列表的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！