Post
Ask Question

Different Ways To Bind DropDownList In MVC

Nowadays MVC is popular so I decided to write an article on it looking at its importance.

Create a new ASP.NET MVC Solution, then DropDownBinding as a name of solution.

Webapplication

Select Empty Template and also select View engine as Razor.

ASP.NET Empty website

Add New Controller in Controller Folder.

Controller

Add a View.

Add a View

Add view

Way 1: Dropdown Binding in View -Inline

  1. @Html.DropDownList("Techonolgie", new List < SelectListItem > ()  
  2. {  
  3.     new SelectListItem()  
  4.     {  
  5.         Text = ".Net", Value = "0"  
  6.     },  
  7.     new SelectListItem()  
  8.     {  
  9.         Text = "Java", Value = "1"  
  10.     },  
  11.     new SelectListItem()  
  12.     {  
  13.         Text = "Javascript", Value = "2"  
  14.     },  
  15.     new SelectListItem()  
  16.     {  
  17.         Text = "Angular", Value = "3"  
  18.     },  
  19.     new SelectListItem()  
  20.     {  
  21.         Text = "WCF", Value = "4"  
  22.     }  
  23. }, "-- Select --")  
Binding in View

When we run the application the output should be like the following,

run the Application

Way 2: Dropdown Binding using View Bag
  1. public ActionResult Index()  
  2. {  
  3.     List < SelectListItem > listTechonolgies = new List < SelectListItem > ()  
  4.     {  
  5.         new SelectListItem()  
  6.             {  
  7.                 Text = ".Net", Value = "0"  
  8.             },  
  9.             new SelectListItem()  
  10.             {  
  11.                 Text = "Java", Value = "1"  
  12.             },  
  13.             new SelectListItem()  
  14.             {  
  15.                 Text = "Javascript", Value = "2"  
  16.             },  
  17.             new SelectListItem()  
  18.             {  
  19.                 Text = "Angular", Value = "3"  
  20.             },  
  21.             new SelectListItem()  
  22.             {  
  23.                 Text = "WCF", Value = "4"  
  24.             }  
  25.     };  
  26.     ViewBag.Techonolgie = listTechonolgies;  
  27.     return View();  
  28. }  
Dropdown Binding

In View,

View

select technology

Way 3: Using Model Class

Right lick on Model Folder Add, then TechnologiesModel.cs - Class 

Class

Add the following two classes,
  1. public class TechnologiesList  
  2. {  
  3.     public SelectList lstTechnologies  
  4.     {  
  5.         get;  
  6.         set;  
  7.     }  
  8. }  
  9. public class Technologie  
  10. {  
  11.     public int ID  
  12.     {  
  13.         get;  
  14.         set;  
  15.     }  
  16.     public string TechnologieName  
  17.     {  
  18.         get;  
  19.         set;  
  20.     }  
  21. }  
Namespace

The Controller code should look like the following,
  1. public ActionResult Index()  
  2. {  
  3.     List < Technologie > list = new List < Technologie > ();  
  4.     list.Add(new Technologie()  
  5.     {  
  6.         TechnologieName = ".Net", ID = 0  
  7.     });  
  8.     list.Add(new Technologie()  
  9.     {  
  10.         TechnologieName = "Javascript", ID = 2  
  11.     });  
  12.     list.Add(new Technologie()  
  13.     {  
  14.         TechnologieName = "Angular", ID = 3  
  15.     });  
  16.     list.Add(new Technologie()  
  17.     {  
  18.         TechnologieName = "WCF", ID = 4  
  19.     });  
  20.     TechnologiesList TList = new TechnologiesList();  
  21.     TList.lstTechnologies = new SelectList(list, "ID", "TechnologieName", 2);  
  22.     return View(TList);  
  23. }  
Select list
  1. @model DropDownBinding.Models.TechnologiesList  
  2.   
  3. @{  
  4.     Layout = null;  
  5. }  
  6.   
  7. <!DOCTYPE html>  
  8.   
  9. <html>  
  10. <head>  
  11.     <meta name="viewport" content="width=device-width" />  
  12.     <title>Index</title>  
  13. </head>  
  14. <body>  
  15.     <div>  
  16.         <label>  
  17.             Select Technologie  
  18.         </label>  
  19.         @Html.DropDownList("Tech",Model.lstTechnologies,"--Select--")  
  20.     </div>  
  21. </body>  
  22. </html>  
code

run

In the next article we are going discuss about how to bind drop down list using database with Entity frame work.

 


Similar Articles