ASP.NET

Different Ways Of Binding Razor DropdownList In ASP.NET MVC 5

Introduction 
 
There are many ways in which we can populate a DropDownList control with data. In this article, I will demonstrate the simple ways to populate a DropDownList using ViewBag, ViewData, TempData, jQuery, Model, Database, jQuery AJAX, and hardcoding in View.
 
Article Flow  
  • Populate a DropdownList using Hardcoded data in view  
  • Populate a DropdownList using Viewbag 
  • Populate a DropdownListusing ViewData
  • Populate a DropdownList using TempData 
  • Populate a DropdownList using Enum
  • Populate a DropdownList using Database with Entity Framework
  • Populate a DropdownList using Jquery Ajax with JSON Data
  • Populate a DropdownList using Model 
  • Populate a DropdownList using Global Static Data in View
Before moving on this, Create an empty ASP.NET MVC project and whenever we create a controller it creates an empty index action. Add a view page for this index action by right clicking on Index(controller action) and adding View (Index). If you are not aware of the process to create ASP.NET MVC empty project, follow the steps 1 to 3 Here.
 
Here, I mentioned a project name "VariousWayBindingDropDownListInMVC5" and controller name is DropDownListController. Okay! let's see one by one.

Right now, the below one is our empty Controller.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace VariousWayBindingDropDownListInMVC5.Controllers {  
  7.     public class DropDownListController: Controller {  
  8.         //  
  9.         // GET: /DropDownList/  
  10.         public ActionResult Index() {  
  11.             return View();  
  12.         }  
  13.     }  
  14. }  
Populate a DropwonList using Hardcoded data in view
 
We can have a DropDownList bound with some static values in View itself. Just add an Html helper for DropDownList and provide the static list of SelectListItem. Now bind the hardcoded values to DropDownList as below in view
  1. <tr>  
  2. <td> Populating With Hardcoded Data</td>  
  3. <td>  
  4. @Html.DropDownList("MySkills", new List<SelectListItem>  
  5. {  
  6.    new SelectListItem{ Text="ASP.NET MVC", Value = "1" },  
  7.    new SelectListItem{ Text="ASP.NET WEB API", Value = "2" },  
  8.    new SelectListItem{ Text="ENTITY FRAMEWORK", Value = "3" },  
  9.    new SelectListItem{ Text="DOCUSIGN", Value = "4" },  
  10.    new SelectListItem{ Text="ORCHARD CMS", Value = "5" },  
  11.    new SelectListItem{ Text="JQUERY", Value = "6" },  
  12.    new SelectListItem{ Text="ZENDESK", Value = "7" },  
  13.    new SelectListItem{ Text="LINQ", Value = "8" },  
  14.    new SelectListItem{ Text="C#", Value = "9" },  
  15.    new SelectListItem{ Text="GOOGLE ANALYTICS", Value = "10" },  
  16. })  
  17. </td>  
  18. </tr>  
Now run your application, in below image, you can see that DropDownList has populated with hardcoded data
 
 
 Populate a DropwonList using Viewbag
 
To populate DropDownList using Viewbag, let's create some collection list with selectListItem types and assign to the Viewbag with appropriate name
  1. public ActionResult Index() {#  
  2.     region ViewBag  
  3.     List < SelectListItem > mySkills = new List < SelectListItem > () {  
  4.         new SelectListItem {  
  5.             Text = "ASP.NET MVC", Value = "1"  
  6.         },  
  7.         new SelectListItem {  
  8.             Text = "ASP.NET WEB API", Value = "2"  
  9.         },  
  10.         new SelectListItem {  
  11.             Text = "ENTITY FRAMEWORK", Value = "3"  
  12.         },  
  13.         new SelectListItem {  
  14.             Text = "DOCUSIGN", Value = "4"  
  15.         },  
  16.         new SelectListItem {  
  17.             Text = "ORCHARD CMS", Value = "5"  
  18.         },  
  19.         new SelectListItem {  
  20.             Text = "JQUERY", Value = "6"  
  21.         },  
  22.         new SelectListItem {  
  23.             Text = "ZENDESK", Value = "7"  
  24.         },  
  25.         new SelectListItem {  
  26.             Text = "LINQ", Value = "8"  
  27.         },  
  28.         new SelectListItem {  
  29.             Text = "C#", Value = "9"  
  30.         },  
  31.         new SelectListItem {  
  32.             Text = "GOOGLE ANALYTICS", Value = "10"  
  33.         },  
  34.     };  
  35.     ViewBag.MySkills = mySkills;#  
  36.     endregion  
  37.     return View();  
  38. }  
And now bind the ViewBag.MySkills values to DropDownlist as below code in view
  1. <tr>  
  2.     <td> Populating With ViewBag Data </td>  
  3.     <td> @Html.DropDownList("MySkills", (IEnumerable  
  4.         <SelectListItem>)ViewBag.MySkills) </td>  
  5. </tr>  
Now run your application, in below image, you can see that DropDownList populated with ViewBag values

 
Populate a DropwonList using ViewData
 
To populate DropDownList using ViewData lets create some collection list with selectListItem types and assign to the ViewData with appropriate name  
  1. public ActionResult Index() {#  
  2.     region ViewData  
  3.     List < SelectListItem > mySkills = new List < SelectListItem > () {  
  4.         new SelectListItem {  
  5.             Text = "ASP.NET MVC", Value = "1"  
  6.         },  
  7.         new SelectListItem {  
  8.             Text = "ASP.NET WEB API", Value = "2"  
  9.         },  
  10.         new SelectListItem {  
  11.             Text = "ENTITY FRAMEWORK", Value = "3"  
  12.         },  
  13.         new SelectListItem {  
  14.             Text = "DOCUSIGN", Value = "4"  
  15.         },  
  16.         new SelectListItem {  
  17.             Text = "ORCHARD CMS", Value = "5"  
  18.         },  
  19.         new SelectListItem {  
  20.             Text = "JQUERY", Value = "6"  
  21.         },  
  22.         new SelectListItem {  
  23.             Text = "ZENDESK", Value = "7"  
  24.         },  
  25.         new SelectListItem {  
  26.             Text = "LINQ", Value = "8"  
  27.         },  
  28.         new SelectListItem {  
  29.             Text = "C#", Value = "9"  
  30.         },  
  31.         new SelectListItem {  
  32.             Text = "GOOGLE ANALYTICS", Value = "10"  
  33.         },  
  34.     };  
  35.     ViewData["MySkills"] = mySkills;#  
  36.     endregion  
  37. }  
And now bind the ViewData["MySkills"] values to DropDownlist as below code in View 
  1. <tr>  
  2.     <td> Populating With ViewData Data </td>  
  3.     <td> @Html.DropDownList("MySkills", (IEnumerable  
  4.         <SelectListItem>)ViewData["MySkills"]) </td>  
  5. </tr>  
Now run your application, in below image, you can see that DropDownList populated with ViewData values
 
 
Populate a DropwonList using TempData
 
To populate DropDownList using TempData lets create some collection list with selectListItem type and assign to the TempData with appropriate name
  1. #region TempData  
  2. List < SelectListItem > mySkills = new List < SelectListItem > () {  
  3.     new SelectListItem {  
  4.         Text = "ASP.NET MVC", Value = "1"  
  5.     },  
  6.     new SelectListItem {  
  7.         Text = "ASP.NET WEB API", Value = "2"  
  8.     },  
  9.     new SelectListItem {  
  10.         Text = "ENTITY FRAMEWORK", Value = "3"  
  11.     },  
  12.     new SelectListItem {  
  13.         Text = "DOCUSIGN", Value = "4"  
  14.     },  
  15.     new SelectListItem {  
  16.         Text = "ORCHARD CMS", Value = "5"  
  17.     },  
  18.     new SelectListItem {  
  19.         Text = "JQUERY", Value = "6"  
  20.     },  
  21.     new SelectListItem {  
  22.         Text = "ZENDESK", Value = "7"  
  23.     },  
  24.     new SelectListItem {  
  25.         Text = "LINQ", Value = "8"  
  26.     },  
  27.     new SelectListItem {  
  28.         Text = "C#", Value = "9"  
  29.     },  
  30.     new SelectListItem {  
  31.         Text = "GOOGLE ANALYTICS", Value = "10"  
  32.     },  
  33. };  
  34. TempData["MySkills"] = mySkills;  
  35. #endregion  
And now bind the TempData["MySkills"] values to DropDownlist as below code in View
  1. <tr>  
  2.     <td> Populating With TempData Data </td>  
  3.     <td> @Html.DropDownList("MySkills", (IEnumerable  
  4.         <SelectListItem>)TempData["MySkills"]) </td>  
  5. </tr>  
Now run your application, In below image, you can see that DropDownList populated with ViewData values

 
Populate a DropwonList using Enum 

To populate DropDownList using Enum. Let's first create an enum say MySkills which holds my multiple skills. 
  1. public enum MySkills {  
  2.     ASPNETMVC,  
  3.     ASPNETWEPAPI,  
  4.     CSHARP,  
  5.     DOCUSIGN,  
  6.     JQUERY  
  7. }  
We will create a structure which we can we use for entire application
  1. public struct ConvertEnum {  
  2.     public int Value {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public String Text {  
  7.         get;  
  8.         set;  
  9.     }  
  10. }  
Now create the list of myskill by using MySkills enum foreach, and assign to ViewBag.MySkillEnum
  1. var myskill = new List < ConvertEnum > ();  
  2. foreach(MySkills lang in Enum.GetValues(typeof(MySkills)))  
  3. myskill.Add(new ConvertEnum {  
  4.     Value = (int) lang, Text = lang.ToString()  
  5. });  
  6. ViewBag.MySkillEnum = myskill;  
In view, binding is same as earlier, and need to be mention the Columns to Populate
  1. <tr>  
  2.     <td> Populating From Enum </td>  
  3.     <td> @Html.DropDownList("MySkills", new SelectList(ViewBag.MySkillEnum, "Value", "Text")) </td>  
  4. </tr> 
Now run your application, In below image, you can see that DropDownList is populated with enum values 
 
 
Populate a DropwonList using Database with Entity Framework
 
Now we will see how to bind the database value to dropdownlist using entity framework, and the database table dummy values as below 
 
 
Now write the below login in your controller to bind it to the dropdownlist,
  1. using(CSharpCornerEntities cshparpEntity = new CSharpCornerEntities()) {  
  2.     var fromDatabaseEF = new SelectList(cshparpEntity.MySkills.ToList(), "ID", "Name");  
  3.     ViewData["DBMySkills"] = fromDatabaseEF;  
  4. }  
And the view will be
  1. <tr>  
  2.     <td> Populating With Database and EF </td>  
  3.     <td> @Html.DropDownList("MySkills", (IEnumerable  
  4.         <SelectListItem>)ViewData["DBMySkills"]) </td>  
  5. </tr>  
Now run your application
 
 
 Populate a DropwonList using Jquery Ajax with JSON Data
 
We already saw the database table dummy values, so now we will write the code and load the data in controller
  1. public JsonResult ReturnJSONDataToAJax() //It will be fired from Jquery ajax call  
  2. {  
  3.     CSharpCornerEntities cshparpEntity = new CSharpCornerEntities();  
  4.     var jsonData = cshparpEntity.MySkills.ToList();  
  5.     return Json(jsonData, JsonRequestBehavior.AllowGet);  
  6. }  
Inside the document ready event handler of the jQuery, first, the MVC action "ReturnJSONDataToAJax" is called using jQuery AJAX function.Inside the Success event handler of the jQuery AJAX function, first, the ASP.Net DropDownList is referenced and a default Item (Option) is added to it.Then a jQuery each loop is executed over the JSON array and one by one each item is added as an Option element to the DropDownList.
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  2. <script type="text/javascript">  
  3.     $(document).ready(function() {  
  4.         $.ajax({  
  5.             url: "ReturnJSONDataToAJax",  
  6.             type: "GET",  
  7.             contentType: "application/json; charset=utf-8",  
  8.             datatype: JSON,  
  9.             success: function(result) {  
  10.                 $(result).each(function() {  
  11.                     $("#FromJson").append($("<option></option>").val(this.ID).html(this.Name));  
  12.                 });  
  13.             },  
  14.             error: function(data) {}  
  15.         });  
  16.     });  
  17. </script>  
and now create the DropDownList controller in Razor view
  1. <tr>  
  2.     <td> Populating With Json Data </td>  
  3.     <td> @Html.DropDownList("FromJson", new SelectList(Enumerable.Empty  
  4.         <SelectListItem>())) </td>  
  5. </tr>  
The result will be

 

Populate a DropwonList using Model Data
 
To hold the data from database and bind to the DropDownList let's create a model 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace VariousWayBindingDropDownListInMVC5.Models {  
  7.     public class MySkills {  
  8.         public int ID {  
  9.             get;  
  10.             set;  
  11.         }  
  12.         public string Name {  
  13.             get;  
  14.             set;  
  15.         }  
  16.         public IEnumerable < SelectListItem > Skills {  
  17.             get;  
  18.             set;  
  19.         }  
  20.     }  
  21. }  
Now write the logic to load the data from database using entity framework
  1. var model = new VariousWayBindingDropDownListInMVC5.Models.MySkills();  
  2. using(CSharpCornerEntities cshparpEntity = new CSharpCornerEntities()) {  
  3.     var dbData = cshparpEntity.MySkills.ToList();  
  4.     model.Skills = GetSelectListItems(dbData);  
  5. }  
Here, GetSelectListItems methods totakes a list of skills and returns a list of SelectListItem objects
  1. private IEnumerable < SelectListItem > GetSelectListItems(IEnumerable < MySkill > elements) {  
  2.     var selectList = new List < SelectListItem > ();  
  3.     foreach(var element in elements) {  
  4.         selectList.Add(new SelectListItem {  
  5.             Value = element.ID.ToString(),  
  6.                 Text = element.Name  
  7.         });  
  8.     }  
  9.     return selectList;  
  10. }  
And create a DropDownList in View
  1. @model VariousWayBindingDropDownListInMVC5.Models.MySkills  
  2. <tr>  
  3.     <td> Populating With Model Data </td>  
  4.     <td> @Html.DropDownList("FromModel", Model.Skills) </td>  
  5. </tr>  
Now run your application 
 
 
Populate a DropwonList using Global Static Data in View
 
Now just create the global static SelectListItem items in  view and assign it to the DropDownList 
  1. @ {  
  2.     List < SelectListItem > listItems = new List < SelectListItem > ();  
  3.     listItems.Add(new SelectListItem {  
  4.         Text = "ASP.NET MVC",  
  5.             Value = "1"  
  6.     });  
  7.     listItems.Add(new SelectListItem {  
  8.         Text = "ASP.NET WEB API",  
  9.             Value = "2",  
  10.             Selected = true  
  11.     });  
  12.     listItems.Add(new SelectListItem {  
  13.         Text = "DOCUSIGN",  
  14.             Value = "3"  
  15.     });  
  16.     listItems.Add(new SelectListItem {  
  17.         Text = "C#",  
  18.             Value = "4"  
  19.     });  
  20. } < tr > < td > Populating With Global static Data < /td> < td > @Html.DropDownList("StaticData", listItems) < /td> < /tr>  
Now run your application

 
Controller Controller (DropDownListController.cs)
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using VariousWayBindingDropDownListInMVC5.Models;
namespace VariousWayBindingDropDownListInMVC5.Controllers
{
public class DropDownListController : Controller
{
//
// GET: /DropDownList/
public ActionResult Index()
{
#region ViewBag
List<SelectListItem> mySkills = new List<SelectListItem>()
{
new SelectListItem{ Text="ASP.NET MVC", Value = "1" },
new SelectListItem{ Text="ASP.NET WEB API", Value = "2" },
new SelectListItem{ Text="ENTITY FRAMEWORK", Value = "3" },
new SelectListItem{ Text="DOCUSIGN", Value = "4" },
new SelectListItem{ Text="ORCHARD CMS", Value = "5" },
new SelectListItem{ Text="JQUERY", Value = "6" },
new SelectListItem{ Text="ZENDESK", Value = "7" },
new SelectListItem{ Text="LINQ", Value = "8" },
new SelectListItem{ Text="C#", Value = "9" },
new SelectListItem{ Text="GOOGLE ANALYTICS", Value = "10" },
};
ViewBag.MySkills = mySkills;
#endregion
#region ViewData
ViewData["MySkills"] = mySkills;
#endregion
#region TempData
TempData["MySkills"] = mySkills;
#endregion
#region Enum
var myskill = new List<ConvertEnum>();
foreach (MySkills lang in Enum.GetValues(typeof(MySkills)))
myskill.Add(new ConvertEnum { Value = (int)lang, Text = lang.ToString() });
ViewBag.MySkillEnum = myskill;
#endregion
#region Database with EF
using (CSharpCornerEntities cshparpEntity = new CSharpCornerEntities())
{
var fromDatabaseEF = new SelectList(cshparpEntity.MySkills.ToList(), "ID", "Name");
ViewData["DBMySkills"] = fromDatabaseEF;
}
#endregion
#region Model
var model = new VariousWayBindingDropDownListInMVC5.Models.MySkills();
using (CSharpCornerEntities cshparpEntity = new CSharpCornerEntities())
{
var dbData = cshparpEntity.MySkills.ToList();
model.Skills = GetSelectListItems(dbData);
}
#endregion
return View(model);
}
private IEnumerable<SelectListItem> GetSelectListItems(IEnumerable<MySkill> elements)
{
var selectList = new List<SelectListItem>();
foreach (var element in elements)
{
selectList.Add(new SelectListItem
{
Value = element.ID.ToString(),
Text = element.Name
});
}
return selectList;
}
public JsonResult ReturnJSONDataToAJax() //It will be fired from Jquery ajax call
{
CSharpCornerEntities cshparpEntity = new CSharpCornerEntities();
var jsonData = cshparpEntity.MySkills.ToList();
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
public enum MySkills
{
ASPNETMVC,
ASPNETWEPAPI,
CSHARP,
DOCUSIGN,
JQUERY
}
public struct ConvertEnum
{
public int Value { get; set; }
public String Text { get; set; }
}
}
}
 
Complete View (index.cshtml)
 
@model VariousWayBindingDropDownListInMVC5.Models.MySkills
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "ReturnJSONDataToAJax",
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: JSON,
success: function (result) {
$(result).each(function () {
$("#FromJson").append($("<option></option>").val(this.ID).html(this.Name));
});
},
error: function (data) { }
});
});
</script>
<style>
table, th, td {
border: 1px solid black;
padding: 15px;
}
thead {
background-color: skyblue;
color: white;
}
</style>
@{
List<SelectListItem> listItems = new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = "ASP.NET MVC",
Value = "1"
});
listItems.Add(new SelectListItem
{
Text = "ASP.NET WEB API",
Value = "2",
Selected = true
});
listItems.Add(new SelectListItem
{
Text = "DOCUSIGN",
Value = "3"
});
listItems.Add(new SelectListItem
{
Text = "C#",
Value = "4"
});
}
<table>
<thead>
<tr>
<td>Binding Way</td>
<td>DropdownList</td>
</tr>
</thead>
<tr>
<td> Populating With Hardcoded Data</td>
<td>
@Html.DropDownList("MySkills", new List<SelectListItem>
{
new SelectListItem{ Text="ASP.NET MVC", Value = "1" },
new SelectListItem{ Text="ASP.NET WEB API", Value = "2" },
new SelectListItem{ Text="ENTITY FRAMEWORK", Value = "3" },
new SelectListItem{ Text="DOCUSIGN", Value = "4" },
new SelectListItem{ Text="ORCHARD CMS", Value = "5" },
new SelectListItem{ Text="JQUERY", Value = "6" },
new SelectListItem{ Text="ZENDESK", Value = "7" },
new SelectListItem{ Text="LINQ", Value = "8" },
new SelectListItem{ Text="C#", Value = "9" },
new SelectListItem{ Text="GOOGLE ANALYTICS", Value = "10" },
})
</td>
</tr>
<tr>
<td>
Populating With ViewBag Data
</td>
<td>
@Html.DropDownList("MySkills", (IEnumerable<SelectListItem>)ViewBag.MySkills)
</td>
</tr>
<tr>
<td>
Populating With ViewData Data
</td>
<td>
@Html.DropDownList("MySkills", (IEnumerable<SelectListItem>)ViewData["MySkills"])
</td>
</tr>
<tr>
<td>
Populating With TempData Data
</td>
<td>
@Html.DropDownList("MySkills", (IEnumerable<SelectListItem>)TempData["MySkills"])
</td>
</tr>
<tr>
<td>
Populating With Jquery Data
</td>
<td>
@Html.DropDownList("MySkills", (IEnumerable<SelectListItem>)TempData["MySkills"])
</td>
</tr>
<tr>
<td>
Populating From Enum
</td>
<td>
@Html.DropDownList("MySkills", new SelectList(ViewBag.MySkillEnum, "Value", "Text"))
</td>
</tr>
<tr>
<td>
Populating With Database and EF
</td>
<td>
@Html.DropDownList("MySkills", (IEnumerable<SelectListItem>)ViewData["DBMySkills"])
</td>
</tr>
<tr>
<td>
Populating With Json Data
</td>
<td>
@Html.DropDownList("FromJson", new SelectList(Enumerable.Empty<SelectListItem>()))
</td>
</tr>
<tr>
<td>
Populating With Model Data
</td>
<td>
@Html.DropDownList("FromModel", Model.Skills)
</td>
</tr>
<tr>
<td>
Populating With Global static Data
</td>
<td>
@Html.DropDownList("StaticData", listItems)
</td>
</tr>
</table>
 
Model(MySkills.cs)
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace VariousWayBindingDropDownListInMVC5.Models
{
public class MySkills
{
public int ID { get; set; }
public string Name { get; set; }
public IEnumerable<SelectListItem> Skills { get; set; }
}
}
 
 
I hope you understood the different ways of  DropDownList binding. I did attach the demo project without package for entity framework 6.0 due to file size exceeded more than 25MB. 
 
Summary
 
In this Article, you learned different ways of  DropDownList binding. I hope it's helpful and your valuable feedback and comments about this article are always welcome. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs