How to Bind Dropdown List in Asp.Net Core 8 MVC Using C#.Net

In today's article I will show you a tutorial with example how you can bind a DropDownList or DropDownList For control in view by passing list value form controller in asp.net core 8 mvc using c#.net. Here we will not fetch data from the database. We will simply use the predefined list value to populate dropdown list control with default value (Select Option). This article you can use in multiple versions of the asp.net core mvc like asp.net core 6, 7 and 8 and any other version. 

Now for this article first asp.net core 8 mvc application and add a model class file in this we will add the below code. Here we are going to define the properties. 

 public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}
public class EmployeeModel
{
    public List<Employee> EmployeeList  { get; set; }
} 

In above code I have defined some property for the Employee. and in next piece of code in EmployeeModel I have make a list of Employee class. After adding the model class file, we will add a controller class file and in the controller class file we will add a method, in this method we will add some value to the Employee.

 public List<Employee> EmployeeData()
{
    List<Employee> employeeModels = new List<Employee>() {
        new Employee{Id=1,Name="Pawan Singh" },
        new Employee{Id=2,Name="Rajan Singh" },
        new Employee{Id=3,Name="Golden Sah" },
        new Employee{Id=4,Name="Sahoo Datta" },
    };
    return employeeModels;
} 

Above list is having the data for the employee. This data we will bind with DropDownList. You can pull the data from the database and place the values in this list and pass it further to bind it to dropdown.

 [HttpGet]
public IActionResult Index()
{
    EmployeeModel empModel = new EmployeeModel();
    empModel.EmployeeList = new List<Employee>();
    //Default value
    empModel.EmployeeList.Add(new Employee { Id = 0, Name = "Select Employee" });
    var empList = EmployeeData();
    foreach (var item in empList)
    {
        empModel.EmployeeList.Add(new Employee { Id = item.Id, Name = item.Name });
    }
    return View(empModel);
}
[HttpPost]
public IActionResult Index(EmployeeModel empModel)
{
    ViewBag.EmployeeId = empModel.EmployeeId;
    return View(empModel);
}
public List<Employee> EmployeeData()
{
    List<Employee> employeeModels = new List<Employee>() {
        new Employee{Id=1,Name="Pawan Singh" },
        new Employee{Id=2,Name="Rajan Singh" },
        new Employee{Id=3,Name="Golden Sah" },
        new Employee{Id=4,Name="Sahoo Datta" },
    };
    return employeeModels;
 }

In above code I have taken the HttpGet Method and HttpPost ActionResult method.  Now let's discuss the HttpGet Method. In this method I have crated the object of EmployeeModel class and after that with reference to object of EmployeeModel  I have created the object of EmployeeList. After creating the object, I have referred the method which is holding the employee list. Here i have used foreach loop to add the value to the list. This is to keep the default value. 

Now please check the above line written where i am adding the value at zero index. This value will be treated as the default value. After adding the collection, we will pass the model class object to View. 

In HttpPost method I have passed the selected Employee Id in the View. This value you can use in your code.  Now let's create the view and add the below code. 

Code to Bind DropDownList

 @model EmployeeModel
@{
    ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    <div style="font-weight:bold;">Select Empolyee:</div>
    <div>
        @Html.DropDownList("EmployeeId", new SelectList(Model.EmployeeList, "Id", "Name"), new { @class = "form-select" })
    </div>
    <br />
    <div><input type="submit" value="Submit" /></div>
    <div>Dropdown Selectd Value</div>
    <div style="color:brown;font-weight:bold;">
        @ViewBag.EmployeeId
    </div>
} 

Please check the highlighted part of the above code.  In this I have taken Html.DropdownList. In this I have taken the name of the control same as the property defined in the model class EmployeeModel. This we need to keep same because if we want to capture the user selected of dropdown list at controller end, we need to keep the control name, and the property of model class passed in the HtppPost method. 

Code to Bind DropDownListFor

 @model EmployeeModel
@{
    ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    <div style="font-weight:bold;">Select Empolyee:</div>
    <div>
        @Html.DropDownListFor(m=>m.EmployeeId,new SelectList(Model.EmployeeList, "Id", "Name"), new { @class = "form-select" })
    </div>
    <br />
    <div><input type="submit" value="Submit" /></div>
    <div>Dropdown Selectd Value</div>
    <div style="color:brown;font-weight:bold;">
        @ViewBag.EmployeeId
    </div>
} 

In above code i have user DropDownListFor to bind the dropdown control. Here the mail difference between Html.DropDownList  and Html.DropDownListFor is the selection of the selected property name. In Html.DropDownList we pass the name as string andin Html.DropDownListFor we use lambda expression to select the property. Which help to get the selected value at controller end. 

Now we have done let's run the code to check the output.

Now let's check what exactly happen at controller end. 

In above code you can see there are total of 5 element int the list.  This list we are passing to view. Now lets expand the dropdown control and check the output.