html5 dropdownlist,HTML5 DropDownList optgroup tag in MVC

Now Support For Optgroup In Dropdownlist .Net MVC 4‎

PM> Install-Package DropDownList.Optgroup.MVC

DEMO DOWNLOAD | NUGET Package

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

})

Document - Using Static Data

IEnumerable item;

item = new List {

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() {

{ "data-val", "true" },

{ "data-val-required", "The Car field is required." }

})

}

HTML

-- Select Car --

Volvo

Saab

Mercedes

Audi

Output

-- Select Car -- Volvo Saab Mercedes Audi