How to use Grouping for DropDownListFor in mvc 4

Question

I need to use a Grouping in mvc4. How can I do it with mvc 4 DropDownListFor controls?

Here is a example:

Here is my real code in .cshtml for DropDownListFor:

@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" })

Even I have try to install DropDownList Optgroup MVC 1.0.0 but its not able to install on VS2012

My application framework is 4

How can I do this in client side with DropDownListFor use grouping for category?

How about just making a optgroup from html prepared by the controller? You can always insert list in your view and than use foreach (or two) to fullfill optgroup. https://www.w3schools.com/tags/tag_optgroup.asp — Arkadiusz Raszeja, May 12 '17 at 08:37

Usman · Accepted Answer · 2017-05-12T10:18:25.760

you dont need any nuget packages you can use grouping SelectListGroup with SelectListItem like this

@{
    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" })

Edit

or you can do it manually with looping like this

first create a class

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

then in 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"},

    };

you can also use ViewModel instead of Viewbag

and finally in view

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

what if want to use `SelectListGroup` how can i fix this in vs2012 — Bikram, May 12 '17 at 10:12
@Vikas `SelectListGroup` was introduced in mvc 5.2 i misunderstood the question because you are working on mvc 4 — Usman, May 12 '17 at 10:14
you can check this link [How to Upgrade an ASP.NET MVC 4 and Web API Project to ASP.NET MVC 5 and Web API 2](https://learn.microsoft.com/en-us/aspnet/mvc/overview/releases/how-to-upgrade-an-aspnet-mvc-4-and-web-api-project-to-aspnet-mvc-5-and-web-api-2) and [upgrading from MVC4 to MVC5](http://stackoverflow.com/questions/17454852/upgrading-from-mvc4-to-mvc5) — Usman, May 12 '17 at 10:20
`SelectListGroup` is short way to do that 2nd one is bit long process to step to do it but i prefer `SelectListGroup` it help me to in other projects too as well but I finding a way how can i do it vs2012 and i have available framework with my vs2012 is .net 4.5, 4.5.1, and 4.5.2 but there is missing `SelectListGroup` still — Bikram, May 13 '17 at 05:53
can we do this with db `ViewBag.Dropdowndata= new List() { 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"}, };` — Bikram, May 15 '17 at 09:05
it okay Usman i have done that simple way will update project some day then will do that ones I have latest visual studio — Bikram, May 16 '17 at 12:43

How to use Grouping for DropDownListFor in mvc 4

1 Answers1