HOW TO CREATE OPTGROUP IN DROPDOWNLIST .NET MVC 4‎?

Chris S

Total Post:48

Points:336
Posted by  Chris S
.NET  Mvc4 
 2318  View(s)
Ratings:
Rate this:
How to create Optgroup In Dropdownlist .Net MVC 4‎?
  1. Tom Cruser

    Post:28

    Points:196
    Re: How to create Optgroup In Dropdownlist .Net MVC 4‎?

    First need to create database context.

    MvcApplication1.Models.Database1Context db = new MvcApplication1.Models.Database1Context();
        var data = db.locations.ToList().Select(t => new GroupedSelectListItem
        {
            GroupKey = t.location_group_id.ToString(),
            GroupName = t.location_group.name,
            Text = t.name,
            Value = t.id.ToString()
        });

    Razor View:
    @Html.DropDownGroupListFor(m => m.location_id, data, "-- Select --", new { 
                @data_val = "true",  // for Required Validation
                @data_val_required = "The Name field is required." // for Required Validation
            })


    Fill static data:
    IEnumerable<GroupedSelectListItem> item;
        item = new List<GroupedSelectListItem> { 
            new GroupedSelectListItem() { Value="volvo", Text="Volvo", GroupName="Swedish Cars", GroupKey="1", Disabled=true },
            new GroupedSelectListItem() { Value="saab", Text="Saab",GroupName="Swedish Cars", GroupKey="1" }, 
            new GroupedSelectListItem() { Value="mercedes", Text="Mercedes", GroupName="German Cars", GroupKey="2" },
            new GroupedSelectListItem() { Value="audi", Text="Audi", GroupName="German Cars", GroupKey="2",Selected=true }};
    Razor View:
    @using (Ajax.BeginForm("Index", null, new AjaxOptions { HttpMethod = "post" }, new { id = "frm" }))
        {
            @Html.DropDownGroupList("Cars", item, "-- Select Car --", 
                new Dictionary<string, object>() { 
                    { "data-val", "true" }, 
                    { "data-val-required", "The Car field is required." } 
                })
            <input type="submit" name="name" value="Send" />
        }


    Output:



Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!