如何在mvc 4中对DropDownListFor使用分组

Question

我需要在mvc4中使用分组。我怎么能用mvc 4 DropDownListFor控件来做呢？

这是一个例子：

以下是DropDownListFor的.cshtml中的真实代码：

@Html.DropDownListFor(model => model.Category, new List<SelectListItem>{
                                                   new SelectListItem() {Text = "Sales/Marketing", Value="Sales/Marketing"},
                                                   new SelectListItem() {Text = "BPO/Call Center", Value="BPO/Call Center"},                                                                                                      
                                                   new SelectListItem() {Text = "Receptionist/Front Office", Value="Receptionist/Front Office"},
                                                   new SelectListItem() {Text = "Cook", Value="Cook"},
                                                   new SelectListItem() {Text = "Aayah/Child Caretaker", Value="Aayah/Child Caretaker"},
                                                   new SelectListItem() {Text = "Gardener", Value="Gardener"},
                                                   new SelectListItem() {Text = "Security/Guard", Value="Security/Guard"},
                                                   new SelectListItem() {Text = "Construction/Laborer", Value="Construction/Laborer"},
                                                   new SelectListItem() {Text = "Garment Tailor/Textile", Value="Garment Tailor/Textile"},
                                                   new SelectListItem() {Text = "Office Helper", Value="Office Helper"},
                                                   new SelectListItem() {Text = "Maid who can Cook", Value="Maid who can Cook"},
                                                   new SelectListItem() {Text = "Data Entry/Back Office", Value=""}},
                                                   "-- Choose Category --", new { @id = "Country", @class = "form-control", @data_error = "Choose No. of Employees is required", @required = "required" })

即使我尝试安装 DropDownList Optgroup MVC 1.0.0 ，但它无法在VS2012上安装

我的应用程序框架是4

如何在客户端使用DropDownListFor对类别进行分组？

Answer 1

您不需要任何nuget包，您可以使用SelectListGroup与SelectListItem进行分组

@{
    var group1 = new SelectListGroup() {Name = "German Cars"};
    var group2 = new SelectListGroup() {Name = "Swedish Cars"};
}

    @Html.DropDownListFor(model => model.Id, new List<SelectListItem>{
                                                   new SelectListItem() {Text = "Audi", Value="Audi",Group =group1},
                                                   new SelectListItem() {Text = "Mercedese", Value="Mercedese",Group =group1},

                                                   new SelectListItem() {Text = "Saab", Value="Saab",Group =group2},
                                                   new SelectListItem() {Text = "Volvo", Value="Volvo",Group =group2}},
                                                   "-- Choose Category --", new { @class = "form-control", @required = "required" })

修改

或者你可以像这样循环手动完成

首先创建一个class

  public class DropdownData
    {
        public string Name { get; set; }
        public string GroupName { get; set; }
        public string Id { get; set; }
    }

然后在action

   ViewBag.Dropdowndata= new List<DropdownData>()
    {
        new DropdownData(){GroupName = "German Cars",Id = "Audi",Name = "Audi"},
        new DropdownData(){GroupName = "German Cars",Id = "Mercedese",Name = "Mercedese"},
        new DropdownData(){GroupName = "Swedish Cars",Id = "Saab",Name = "Saab"},
        new DropdownData(){GroupName = "Swedish Cars",Id = "Volvo",Name = "Volvo"},

    };

您也可以使用ViewModel代替Viewbag

最后在视野中

<select name="Category" id="Country" class="form-control" data_error="Choose No. of Employees is required" required="required">
    <option value="">-- Choose Category --</option>
    @{
        string group = null;

        foreach (var groups in (List<DropdownData>) ViewBag.Dropdowndata)
        {
            if (group != groups.GroupName)
            {
                group = groups.GroupName;

                <optgroup label="@group">

                    @foreach (var data in (List<DropdownData>) ViewBag.Dropdowndata)
                    {
                        if (group == data.GroupName)
                        {
                            <option value="@data.Id">@data.Name</option>
                        }
                    }
                </optgroup>
            }
        }
    }


</select>