Bind Multiple Dropdown List from Database in Asp.Net Core MVC, C#.Net

In today's article I will show a simple tutorial with example how you can bind or populate value in multiple dropdown list from Ms SQL server database in asp.net core 8 mvc using c#.net with entity framework. Here we will use model class to bind the dropdown with Html.DropdownListFor control. So, for this article first we will create tow table in your MS SQL Database and add some data in it.

Table 1:

Table 2:

Here we are having two tables these two tables we are going to bind with two different dropdown one belongs to Employee and second one belongs to Project table. Now let's create a new asp.net core 8 mvc application. After this add a controller class file and add the below code in it.

public class EmployeeModel
{
    public int EmployeeId { get; set; } 
    public List<EmployeeDetail> Employees { get; set; }
    public int ProjectId { get; set; }
    public List<ProjectDetail> Projects { get; set; }
}
public class EmployeeDetail
{
    public int Id { get; set; }
    public string Employee_Name { get; set; }
}
public class ProjectDetail
{
    public int Id { get; set; }
    public string Project_Name { get; set; }
}

In above code I have taken two class one as Employee and second one as Project. In EmployeeModel class I have taken list and of project and employee and a property with two value which will return the dropdown list selected value. Now let's add a controller file and add a httpget method.

 [HttpGet]
public IActionResult Index()
{
    EmployeeModel employeeModel = new EmployeeModel();
    employeeModel.Employees = new List<EmployeeDetail>();
    employeeModel.Projects = new List<ProjectDetail>();

    EmployeeContext employeeContext = new EmployeeContext();
    //Employee dropdown list data
    var empData = employeeContext.Employees.ToList();
    employeeModel.Employees.Add(new EmployeeDetail
    {
        Id = 0,
        Employee_Name = "Select Employee"
    });
    foreach (var item in empData)
    {
        employeeModel.Employees.Add(new EmployeeDetail
        {
            Id = item.Id,
            Employee_Name = item.EmployeeName
        });
    }
    //Projects dropdown list data
    var projectData= employeeContext.Projects.ToList();
    employeeModel.Projects.Add(new ProjectDetail
    {
        Id = 0,
        Project_Name = "Select Project"
    });
    foreach (var item in projectData)
    {
        employeeModel.Projects.Add(new ProjectDetail
        {
            Id = item.Id,
            Project_Name = item.ProjectName
        });
    }
    return View(employeeModel);
}

In above HttpGet method I have created the object of Model class. After creating the object of model class I have created the object of DBContect. With the help of object o dbcontext I have got the detail from the database and added to the data to the employee and project list. Now let's create a View and add the below code in it.

 @model EmployeeModel
@{
	ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
	<span>Select Employee:</span>
	@Html.DropDownListFor(m => m.EmployeeId, new SelectList(Model.Employees, "Id", "Employee_Name"), new { @class = "form-select"})
	<br />
	<span>Select Project:</span>
	@Html.DropDownListFor(m => m.ProjectId, new SelectList(Model.Projects, "Id", "Project_Name"), new { @class = "form-select"})
	<br />
	<input type="submit" value="Submit" />
    <br />
    @ViewBag.SelectedValue
}

In above code first I have added model class file reference and after that I have taken the form tag. In this form tag I have added the controller name and the action name. Finally, I have used Html.DropDownListFor to bind the dropdown list in view. ViewBag is used to display the selected value in view. Now let's create httppost method to get the selected value at controller end.

[HttpPost]
public IActionResult Index(EmployeeModel employeeModel)
{
    employeeModel.Employees = new List<EmployeeDetail>();
    employeeModel.Projects = new List<ProjectDetail>();
    EmployeeContext employeeContext = new EmployeeContext();
    var data = employeeContext.Employees.ToList();
    employeeModel.Employees.Add(new EmployeeDetail
    {
        Id = 0,
        Employee_Name = "Select Employee"
    });
    foreach (var item in data)
    {
        employeeModel.Employees.Add(new EmployeeDetail
        {
            Id = item.Id,
            Employee_Name = item.EmployeeName
        });
    }
    var projectData = employeeContext.Projects.ToList();
    employeeModel.Projects.Add(new ProjectDetail
    {
        Id = 0,
        Project_Name = "Select Project"
    });
    foreach (var item in projectData)
    {
        employeeModel.Projects.Add(new ProjectDetail
        {
            Id = item.Id,
            Project_Name = item.ProjectName
        });
    }
    ViewBag.SelectedValue = "Employee: " + employeeModel.EmployeeId + " Project: " + employeeModel.ProjectId;
    return View(employeeModel);
}

In above code i have passed the model class EmployeeModel parameter in the HttpPost method. This will help us to get selected value at controller end. Now let's run the code by putting the breakpoint.