Default Selected Value to Dropdown in Asp.Net Core 8 MVC, C#.Net

In today's article I will show you a simple tutorial with an example how you can bind a dropdown list and set or assign the default value of dropdown list on page load in asp.net core mvc using c#.net. Now for this article first we will create a new asp.net core 8 mvc application using c#.net. 

After creating the Asp.Net core mvc application we will a model class file and add the below code in it. 

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

In above code I have defined he properties in the class file. Here please check the EmployeeModel class, in this class I have taken a property named as EmployeeId and a list names as EmployeeList. Here I will use EmployeeId  to manage the selected value of dropdown list and to get the selected value of dropdown at controller end on click on submit button. Now lets add a controller file and add the below code in it. 

 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 added some value to the list. This list I am going to use as data source, in your case you can get data from data base and bind it to list.  Now lets add a HttpGet method and check the code. This HttpGet method of return type IActionResult will act as a page load. This is the most important part of this article here I will explain you to load the drop down on page and pass the default selected value to keep a specific value selected on page load in your asp.net core application. Here I am going to use DropDownListFor to bind the dropdown list.

 [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 });
    }
    //Default selected value to dropdowon list
    empModel.EmployeeId = 2;
    return View(empModel);
} 

In above code I have first created the object of the EmployeeModel and with the help of object of employee model we I have created the object of employee list. After creating the object of list i have added first of default value of the dropdown list. 

Now check the highlighted part of the code. Here I am assigning the  value to the EmployeeId. This will set the default selected value of dropdown list on page load. Now create the view and add the below code in it. 

 @model EmployeeModel
@{
    ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    <div style="font-weight:bold;">Empolyee:</div>
    <div>
        @Html.DropDownListFor(m=>m.EmployeeId,new SelectList(Model.EmployeeList, "Id", "Name"), new { @class = "form-select" })
    </div>
} 

In above view html code I have added the reference of  EmployeeModel  class. In next list I have defined the Form tag with Html.BeginForm. In this I have added the controller name and action name.  

To bind the dropdown list I have used Html helper DropDownListFor. In this with the help of lambda expression I have used EmployeeId property. This will help us to retain the selected value of dropdown which we have passed from controller. In next line I have use Model to get the list of employee data which i am to bind to dropdown list with the help of SelectList. This will accept the list, value field name and text field name. Now we have done lets run the code and check the output. 

In above you can see I have assigned value 2. This is the default value which is goin to be get selected after the page load is completed. Now press F5 to check the final output.