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

How to bind a dropdown list using DropDownListFor and get selected value of Dropdown control at controller end in aspo.net core 8 mvc using c#.net.
In today's article I will show a simple tutorial with an example how you can get the selected value of a bind dropdown list value in asp.net core mvc using c#.net from view to controller. Here first we will create a new asp.net core 8 mvc application and add a model class file and add he 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 declared the model class property. This is the list which we will bind with the dropdown list. Now add a controller file and add the below code in it. 
 [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;
    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);
}
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 defined three methods first is HttpGet method, second one is HttpPost Method and third is representing to add the data in the list. Now let me explain you each method one by one. 
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;
} 
The above method I an using to get the data which we are going to populate in the Dropdown List.  You can use your code in this methos to get the data from the database.
 [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);
}
The above method will act as a page load method in this methos i have created the object of the EmployeeModel class file. In next list I have added a value in the list with Id=0. This will act as a default value in the dropdown list. 
In next step i have declared a variable and where i have accessed the method EmployeeData() to get the data.
[HttpPost]
public IActionResult Index(EmployeeModel empModel)
{
    ViewBag.EmployeeId = empModel.EmployeeId;
    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 method I have declared to capture the user selected value in the model class property named as EmployeeId. After defining assigning the value to i have reassign the list.  If we don't do this, we will get null exception. This value I have passed in the viewbag and to display in view. 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;">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 first I have declared the Form tag in this tag I have added the action name and the controller name. After that I have used DropDownListFor. In this i have used Lambda expression to addign the property, after that I have use SelectList to bind the collection the dropdown list with value field and text field. Last but the least an input submit button and a section to display the selected value. Now we have done run the code to check the output.DDL List Data

In above image you can see the count of item in the list. 

Dropdown In View

Now expand the Dropdown and check the values. 

Expand the Dropdown
Noe selects a value and click on submit.

Dropdown Selected Value

Now click on Submit button. out break point will hit and we will get the id of the selected item of dropdown list. 
Dropdown Selected Value

Now press F5 to check the output.

Dropdown Selected Value in View

Post a Comment