How To Bind DropDownList In ASP.NET MVC 5

Background

 

There are many ways to bind DropDownList in MVC. In this article we will learn how to bind simple dropdownlist using SelectListItem class. So let us learn in brief about SelectListItem class

What is SelectListItem Class 

SelectListItem is a class which represents the selected item in an instance of the System.Web.Mvc.SelectList class.

It has the following properties.

• Text - It represent any text.
• Value - Its is the value against the particular text.
• Group - Group of items in single element .
• Disabled - Whether the selection item is disabled or not, default is false.
• Selected - Decides whether the item in list is by default selected or not, default is false.

Now let's implement the above description practically by creating the MVC application through the following steps:

 

Step 1 - Create an MVC application

1. "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
   
2. "File", then "New" and click "Project" then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click on OK.
   
3. Choose MVC empty application option and click OK.

If you don't know how to create an MVC application, then please watch the following video.

• How to Create MVC Application Step by Step in Visual Studio 2015
  

Step 2 - Add controller class.

Right click on the Controller folder in the created MVC application and give the class name. I have given the class name Home and clicked OK.

HomeControlle.cs

public class HomeController : Controller
{
        // GET: Home
        public ActionResult Index()
        {
            List<SelectListItem> ObjItem = new List<SelectListItem>()
            {
          new SelectListItem {Text="Select",Value="0",Selected=true },
          new SelectListItem {Text="ASP.NET",Value="1" },
          new SelectListItem {Text="C#",Value="2"},
          new SelectListItem {Text="MVC",Value="3"},
          new SelectListItem {Text="SQL",Value="4" },
            };
            ViewBag.ListItem = ObjItem;
            return View();
        }
}

In the above code I have added items in SelectedListItem class of MVC as a List and saved into the ViewBag. Now open the Index.cshtml view and write the following code.

 

Step 3 - Add View

 

Right click on the solution explorer of our created project and add the empty view. Now write the following code into the created view.

@{
ViewBag.Title = "Index";
}
<br /><br />
<p>Dropdown Using viewbag with Html.DropDownList </p>
<br />
@Html.DropDownList("ListItem")

In the above code, we have passed the Viewbag name as string to the Html helper dropdownlist and now run the application the output will look like the following screenshot:

 

 

From all the above examples, we have learned how to bind the DropDownList in MVC.

 

Note

• Download the Zip file of the sample application for a better understanding.
• You can bind the list from the database, since this is an example so it did not used any database.
  
• Since this is a demo, it might not be using proper standards, so improve it depending on your skills.
• Handle the exception in the database or text file as per you convenience, since in this article I have not implemented it.

Summary

I hope this article is useful for all the readers. In my next article we will learn another technique to bind dropdownlist. If you have any suggestion please contact me.