Please disable your adblock and script blockers to view this page
 

Multiple ways to generate DropDownList in MVC using HTML helpers

Create DropDownList control in MVC using HTML helpers
Click on image to enlarge
Introduction: In this article I am going to explain how to create Dropdown list control in asp.net mvc using html helper.

Description: In MVC a Dropdownlist is a collection of SelectListItem objects.  Here in this article I am going to hard code the items in dropdownlist but we may also need to get the items from database and bind to dropdown list control.  In my another article I explained how to Dynamically bind Asp.Net MVC Dropdownlist from Sql Server Database using entity framework.

In previous articles i explained the Use of ViewBag, ViewData and TempData in Asp.Net MVC and Various way to Pass data from controller to view in MVC and  difference between Asp.Net Webforms and Asp.Net MVC and Example to perform Create,Read,Update,Delete operation using Asp.Net MVC and Entity Framework 

Implementation: Let’s generate a dropdownlist using various overloaded versions of DropDownList html helper. Actually there are various other ways to create and setup dropdownlist based on the requirement but I am listing a few of them. You can use any of these. And you can also try other overloaded methods of DropDownList helper.

In your view e.g. Index.cshtml view copy and paste the below mentioned code.

First Way

@Html.DropDownList("ddlDept", new List<SelectListItem>
{
    new SelectListItem { Text = "-- Select Department --", Value = "0", Selected=true},
    new SelectListItem { Text = "Accounts", Value = "1"},
    new SelectListItem { Text = "Sales", Value = "2"},
    new SelectListItem { Text = "HR", Value = "3"},
    new SelectListItem { Text = "IT", Value = "4"}
})


Second Way 

@{var listItems = new List<SelectListItem>
    {
          new SelectListItem { Text = "-- Select Department --", Value = "0" },
          new SelectListItem { Text = "Accounts", Value="1"  },
          new SelectListItem { Text = "Sales", Value="2" },
          new SelectListItem { Text = "HR", Value="3" },
          new SelectListItem { Text = "IT", Value="4"  }
    };
}
@Html.DropDownList("ddlDept", new SelectList(listItems, "Value", "Text", 0))


Third Way

@{
    List<SelectListItem> listItems = new List<SelectListItem>();
    listItems.Add(new SelectListItem
    {
        Text = "-- Select Department --",
        Value = "0",
        Selected = true
    });
    listItems.Add(new SelectListItem
    {
        Text = "Accounts",
        Value = "1"
    });
    listItems.Add(new SelectListItem
         {
             Text = "Sales",
             Value = "2"

         });
    listItems.Add(new SelectListItem
         {
             Text = "HR",
             Value = "3",
         });
    listItems.Add(new SelectListItem
    {
        Text = "IT",
        Value = "4"
    });
}

@Html.DropDownList("ddlDept", listItems)


Now run the application. You will get dropdownlist as shown in demo image above but generated using different methods.


 Now over to you:
"A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon