Getting Started with ASP.NET MVC DropdownList
8 Feb 202310 minutes to read
Creating your first DropDownList in MVC application
-
Create an MVC Project and add necessary assemblies, scripts and CSS files given in MVC-Getting Started Documentation.
-
Add DropDownList control using the helper from EJ namespace.
@Html.EJ().DropDownList("DropDownList1")
- Execute the code and get a empty DropDownList control as below
Populating data
The DropDownList can be bounded to any local list data and remote data services. You can use DataManager component to serve data from the data services based on the query provided.You can bind data locally from controller also. To render the DropDownList items, map the DropDownListFields with corresponding Fields
@Html.EJ().DropDownList("customersList").Datasource((IEnumerable<Customers>)ViewBag.datasource).DropDownListFields(df => df.ID("id").Text("text").Value("text"))
List<Customers> customer = new List<Customers>();
public ActionResult Index()
{
customer.Add(new Customers { id = "1", text = "ALFKI" });
customer.Add(new Customers { id = "2", text = "ANATR" });
customer.Add(new Customers { id = "3", text = "ANTON" });
customer.Add(new Customers { id = "4", text = "AROUT" });
customer.Add(new Customers { id = "5", text = "BERGS" });
customer.Add(new Customers { id = "6", text = "BLAUS" });
ViewBag.datasource = customer;
return View();
}
public class Customers
{
public string id { get; set; }
public string text { get; set; }
}
Execute the code and to get a DropDownList control with data bound from controller
Setting Dimensions
DropDownList dimensions can be set using Width and Height Properties.
@Html.EJ().DropDownList("customersList").Datasource((IEnumerable<Customers>)ViewBag.datasource).DropDownListFields(df => df.ID("id").Text("text").Value("text")).Width("300px").Height("50px")
List<Customers> customer = new List<Customers>();
public ActionResult Index()
{
customer.Add(new Customers { id = "1", text = "ALFKI" });
customer.Add(new Customers { id = "2", text = "ANATR" });
customer.Add(new Customers { id = "3", text = "ANTON" });
customer.Add(new Customers { id = "4", text = "AROUT" });
customer.Add(new Customers { id = "5", text = "BERGS" });
customer.Add(new Customers { id = "6", text = "BLAUS" });
ViewBag.datasource = customer;
return View();
}
public class Customers
{
public string id { get; set; }
public string text { get; set; }
}
Setting dimensions to Popup list
PopupWidth and PopupHeight can be used to create a fixed size popup list.
@model MVCApplication.Controllers.HomeController
@Html.EJ().DropDownList("DropDownList1").Datasource((IEnumerable<Data>)ViewData["DropDownSource"]).DropDownListFields(Df => Df.Text("Text").Value("Value")).Height("50px").Width("500px").PopupHeight("200px").PopupWidth("300px")
public ActionResult Index()
{
List<Data> DropdownData = new List<Data>();
DropdownData.Add(new Data { Value = "item1", Text = "List Item 1" });
DropdownData.Add(new Data { Value = "item2", Text = "List Item 2" });
DropdownData.Add(new Data { Value = "item3", Text = "List Item 3" });
DropdownData.Add(new Data { Value = "item4", Text = "List Item 4" });
DropdownData.Add(new Data { Value = "item5", Text = "List Item 5" });
ViewData["DropDownSource"] = DropdownData;
return View();
}
public class Data
{
public string Value { get; set; }
public string Text { get; set; }
}
Setting and Getting Value
You can select single or multiple values from DropDownList control. To assign a value initially to the DropDownList, you can use Value property.
@model MVCApplication.Controllers.HomeController
@using (Html.BeginForm("DropdownlistFeatures", "Dropdownlist", FormMethod.Post, null))
{
@Html.EJ().DropDownList("DropDownList1").Datasource((IEnumerable<Data>)ViewData["DropDownSource"]).DropDownListFields(Df => Df.Text("Text").Value("Value")).Height("50px").Width("500px").PopupHeight("200px").PopupWidth("300px").Value("item3")
<input type="submit" value="Get Value" />
}
public ActionResult Index()
{
List<Data> DropdownData = new List<Data>();
DropdownData.Add(new Data { Value = "item1", Text = "List Item 1" });
DropdownData.Add(new Data { Value = "item2", Text = "List Item 2" });
DropdownData.Add(new Data { Value = "item3", Text = "List Item 3" });
DropdownData.Add(new Data { Value = "item4", Text = "List Item 4" });
DropdownData.Add(new Data { Value = "item5", Text = "List Item 5" });
ViewData["DropDownSource"] = DropdownData;
return View();
}
[HttpPost]
public ActionResult DropdownlistFeatures(string DropDownList1)
{
//DropDownList1 is ID of DropDownList used in this example. You can get the selected items value in controller using the ID
string DropDownValue = DropDownList1;
return View();
}
public class Data
{
public string Value { get; set; }
public string Text { get; set; }
}