Post
Ask Question

.Net Core 5 DropDownList

Introduction

 
In this article, we will see how to create a simple dropdown list in ASP.NET Core 5 MVC. Although, we know we have several ways to create a dropdown list, like using Html.DropdownlListFor helper or using the simple select tag using the jQuery. But whenever a framework update, it would be updated, with some new features and a few ones from the last update.
 
So as like this, here we learn the way to bind dropdown list in .NET Core 5.
 

Overview

 
Here, we bind an employee list in the dropdown. Yet, we are filling the employee dropdown with the static data. But you can fill this with your database. We are going to create the dropdown list like this,
 
.Net Core 5 DropDownList
We are mostly binding the dropdown list using the simple MVC HTML.DropdownListFor helper, it's good to fill the dropdown list. I am also using this method. But because of using MVC helpers, our ".cshtml page" becomes heavier. If any error occurred due to this, It would be directly redirected to the crashed page, which is not good for the client. It will leave a wrong impact on the client.
 
So, here we are creating the dropdown list using the select HTML helper, which is a lighter HTML element compare to the MVC HTML helper. .Net Core provides us the facility of using the "select tag's" asp-items property for directly binding the data with Text and Value. 
 
So let's learn the new and simple way to bind dropdown using the Select HTML tag helper in .Net Core.
 
Step 1
 
First, create a simple ASP.NET Core web application(MVC) project define its name SimpleWebAppication. Select the target framework .Net 5.0 and then click on create.
 
.Net Core 5 DropDownList
 
.Net Core 5 DropDownList
Step 2
 
Now, we create an EmployeeViewModel.cs class. In this class, we will define the two properties EmployeeId, EmployeesList(contains the list of employees). As we know, that the SelectListItem gets the two values Text and Value property. So, like this, we will create our new class Item list that contains a similar text, Value properties.
 
In the constructor of EmployeeViewModel class, We will assign the EmployeesList property with the data of List<Itemlist>() type.
 
EmployeeViewModel.cs class
  1. public class EmployeeViewModel  
  2. {  
  3.     public EmployeeViewModel()  
  4.     {  
  5.         EmployeesList = new List<Itemlist>() {  
  6.         new Itemlist { Text = "Khushbu", Value = 1 },  
  7.         new Itemlist { Text = "Mohan", Value = 2 },  
  8.         new Itemlist { Text = "John", Value = 3 },  
  9.         new Itemlist { Text = "Martin", Value = 4 },  
  10.         new Itemlist { Text = "Due", Value = 5 },  
  11.         };  
  12.     }  
  13.     public int EmployeeId { get; set; }  
  14.   
  15.     public List<Itemlist> EmployeesList { get; set; }  
  16. }  
Itemlist.cs class
  1. public class Itemlist  
  2. {  
  3.     public string Text { get; set; }  
  4.     public int Value { get; set; }  
  5. }  
Step 3
 
Create an EmployeeDropdown action on the home controller and pass the EmployeeViewModel to the view.
  1. public IActionResult EmployeeDropdown()  
  2. {  
  3.     EmployeeViewModel model = new EmployeeViewModel();  
  4.     return View(model);  
  5. }  
If you are getting data from the database, then you can bind it like below,
  1. model.EmployeesList= data.Select(x => new Itemlist { Value = x.EmployeeId, Text = x.EmployeeName }).ToList();  
Step 4
 
Now, create EmployeeDropdown.cshtml page for displaying the employee dropdown list.
  1. @model DotNet5DropDownList.Models.EmployeeViewModel  
  2. @{  
  3.     ViewData["Title"] = "Employee List";  
  4. }  
  5.   
  6. <div class="text-center">  
  7.     <h1 class="display-4">Employee Dropdown</h1>  
  8.   
  9.     <form asp-action="EmployeeDropdown" asp-controller="home" method="post">  
  10.   
  11.         <div class="row">  
  12.             <div class="col-md-4">  
  13.                 <select id="drpEmpList" class="form-control" asp-for="EmployeeId" asp-items="@(new SelectList(Model.EmployeesList, "Value", "Text"))">  
  14.                     <option value="">--Select--</option>  
  15.                 </select>  
  16.                 <input type="hidden" asp-for="EmployeeId" />  
  17.                  
  18.             </div>  
  19.             <div class="col-md-2">  
  20.                 <input type="submit" name="btnSubmit" value="Submit" class="btn btn-success" />  
  21.             </div>  
  22.         </div>  
  23.   
  24.     </form>  
  25. </div>  
 .Net Core 5 DropDownList
 
After submitting the dropdown, if we want to get the selected EmployeeId on the post method of the EmployeeDropdown action then, we can get it to value into the EmployeeId property of the EmployeeViewModel model.  If you are not getting Id in property EmployeeId, then you forget to bind the property EmployeeId, into the hidden field over the page.
  1. <input type="hidden" asp-for="EmployeeId" />  
  1. [HttpPost]  
  2.        public IActionResult EmployeeDropdown(EmployeeViewModel model)  
  3.        {  
  4.            var EmployeeId = model.EmployeeId;  
  5.            return RedirectToAction("EmployeeDropdown");  
  6.        }  

Summary

 
In the above article, we will learn to create the simple .Net core 5 dropdown list using the select HTML helper and bind the data into the asp-items attribute so that the page becomes lighter and easy to manage.


Similar Articles