Introduction

In this blog, we will learn how to use the select tag helper in an ASP.NET Core application. We will discuss the select tag helper for a gender dropdown list, Department with SelectListItem, and finally from a database.

Here is the code.

Select Tag Helper: The select tag helper renders as a select tag element with the select element option inside. It can be used alternative to Html.DropdownListFor and Html.ListBoxFor of MVC.

Step 1: Create an ASP.NET web application project in Visual Studio 2019.

Step 2: Create the class employee under Models folder.

  1. using Microsoft.AspNetCore.Mvc.Rendering;
  2. using System.Collections.Generic;
  4. namespace TagHelpers_Demo.Models
  5. {
  6. public class Employee
  7. {
  8. public int Id { get; set; }
  10. public string Gender { get; set; }
  12. public string Department { get; set; }
  14. public List<SelectListItem> Departments { get; } = new List<SelectListItem>
  15. {
  16. new SelectListItem { Value = "1", Text = "Account" },
  17. new SelectListItem { Value = "2", Text = "Finance" },
  18. new SelectListItem { Value = "3", Text = "HR" },
  19. new SelectListItem { Value = "4", Text = "IT" },
  20. new SelectListItem { Value = "5", Text = "Marketing" },
  21. new SelectListItem { Value = "6", Text = "Sales" },
  22. };
  23. }
  24. }

Step 3: “Add” controller or use created HomeController.

  1. public IActionResult Index()
  2. {
  3. var model = new Employee();
  4. model.Departments.ToList();
  5. return View(model);
  6. }
Step 4: Right click on the index method or use the existing index view which is added under the home folder in view folder.
  1. <div class="form-group col-md-4">
  2. <label asp-for="Gender" class="control-lable"></label>
  3. <select asp-for="Gender" class="custom-select">
  4. <option value="">Choose Gender</option>
  5. <option value="1">Male</option>
  6. <option value="2">Female</option>
  7. </select>
  8. </div>
  1. <div class="form-group col-md-4">
  2. <label asp-for="Department" class="control-lable"></label>
  3. <select asp-for="Department" asp-items="Model.Departments" class="custom-select">
  4. <option value="">Choose Department</option>
  5. </select>
  6. </div>

Step 5: “Add” class Department in models folder

  1. using System.ComponentModel.DataAnnotations;
  3. namespace TagHelpers_Demo.Models
  4. {
  5. public class Department
  6. {
  7. [Key]
  8. public int Id { get; set; }
  10. [Required]
  11. [StringLength(100)]
  12. public string DepartmentName { get; set; }
  13. }
  14. }

Step 6: “Add” DbSet in ApplicationDbContext which is located under the data folder of your project.

  1. using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
  2. using Microsoft.EntityFrameworkCore;
  3. using TagHelpers_Demo.Models;
  5. namespace TagHelpers_Demo.Data
  6. {
  7. public class ApplicationDbContext : IdentityDbContext
  8. {
  9. public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
  10. : base(options)
  11. {
  12. }
  14. public DbSet<Department> Departments { get; set; }
  15. }
  16. }

Step 7: Add-migration in package manager console and update-database. It will add a department table with ID and DepartmentName.

Step 8: Open the same HomeController or a new controller and write the following code on controller class.

  1. using Microsoft.AspNetCore.Mvc;
  2. using Microsoft.AspNetCore.Mvc.Rendering;
  3. using TagHelpers_Demo.Data;
  5. namespace TagHelpers_Demo.Controllers
  6. {
  7. public class HomeController : Controller
  8. {
  9. private readonly ApplicationDbContext dbContext;
  11. public HomeController(ApplicationDbContext context)
  12. {
  13. dbContext = context;
  14. }
  16. public IActionResult Index()
  17. {
  18. ViewData["Departments"] = new SelectList(dbContext.Departments, "Id", "DepartmentName");
  19. return View();
  20. }
  22. }
  23. }

Step 9: Similarly, use the same index view or “Add” a new view if you wish.

  1. @model TagHelpers_Demo.Models.Department
  2. @{
  3. ViewData["Title"] = "Home Page";
  4. }
  6. <form asp-action="">
  7. <div class="form-group col-md-4">
  8. <label asp-for="DepartmentName" class="control-lable"></label>
  9. <select asp-for="Id" asp-items="ViewBag.Id" class="custom-select">
  10. <option value="">Choose Department</option>
  11. </select>
  12. </div>
  13. </form>

Summary

In this blog, I cover select tag helpers with some examples. I hope it will be helpful for your projects.