Getting Started with ASP.NET MVC DropdownList

8 Feb 202310 minutes to read

Creating your first DropDownList in MVC application

  1. Create an MVC Project and add necessary assemblies, scripts and CSS files given in MVC-Getting Started Documentation.

  2. Add DropDownList control using the helper from EJ namespace.

  • HTML
  • @Html.EJ().DropDownList("DropDownList1")
    1. 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
  • @Html.EJ().DropDownList("customersList").Datasource((IEnumerable<Customers>)ViewBag.datasource).DropDownListFields(df => df.ID("id").Text("text").Value("text"))
  • C#
  • 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
  • @Html.EJ().DropDownList("customersList").Datasource((IEnumerable<Customers>)ViewBag.datasource).DropDownListFields(df => df.ID("id").Text("text").Value("text")).Width("300px").Height("50px")
  • C#
  • 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; }
            }