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.
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.
- using Microsoft.AspNetCore.Mvc.Rendering;
- using System.Collections.Generic;
-
- namespace TagHelpers_Demo.Models
- {
- public class Employee
- {
- public int Id { get; set; }
-
- public string Gender { get; set; }
-
- public string Department { get; set; }
-
- public List<SelectListItem> Departments { get; } = new List<SelectListItem>
- {
- new SelectListItem { Value = "1", Text = "Account" },
- new SelectListItem { Value = "2", Text = "Finance" },
- new SelectListItem { Value = "3", Text = "HR" },
- new SelectListItem { Value = "4", Text = "IT" },
- new SelectListItem { Value = "5", Text = "Marketing" },
- new SelectListItem { Value = "6", Text = "Sales" },
- };
- }
- }
Step 3: “Add” controller or use created HomeController.
- public IActionResult Index()
- {
- var model = new Employee();
- model.Departments.ToList();
- return View(model);
- }
Step 4: Right click on the index method or use the existing index view which is added under the home folder in view folder.
- <div class="form-group col-md-4">
- <label asp-for="Gender" class="control-lable"></label>
- <select asp-for="Gender" class="custom-select">
- <option value="">Choose Gender</option>
- <option value="1">Male</option>
- <option value="2">Female</option>
- </select>
- </div>
- <div class="form-group col-md-4">
- <label asp-for="Department" class="control-lable"></label>
- <select asp-for="Department" asp-items="Model.Departments" class="custom-select">
- <option value="">Choose Department</option>
- </select>
- </div>
Step 5: “Add” class Department in models folder
- using System.ComponentModel.DataAnnotations;
-
- namespace TagHelpers_Demo.Models
- {
- public class Department
- {
- [Key]
- public int Id { get; set; }
-
- [Required]
- [StringLength(100)]
- public string DepartmentName { get; set; }
- }
- }
Step 6: “Add” DbSet in ApplicationDbContext which is located under the data folder of your project.
- using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
- using Microsoft.EntityFrameworkCore;
- using TagHelpers_Demo.Models;
-
- namespace TagHelpers_Demo.Data
- {
- public class ApplicationDbContext : IdentityDbContext
- {
- public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
- : base(options)
- {
- }
-
- public DbSet<Department> Departments { get; set; }
- }
- }
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.
- using Microsoft.AspNetCore.Mvc;
- using Microsoft.AspNetCore.Mvc.Rendering;
- using TagHelpers_Demo.Data;
-
- namespace TagHelpers_Demo.Controllers
- {
- public class HomeController : Controller
- {
- private readonly ApplicationDbContext dbContext;
-
- public HomeController(ApplicationDbContext context)
- {
- dbContext = context;
- }
-
- public IActionResult Index()
- {
- ViewData["Departments"] = new SelectList(dbContext.Departments, "Id", "DepartmentName");
- return View();
- }
-
- }
- }
Step 9: Similarly, use the same index view or “Add” a new view if you wish.
- @model TagHelpers_Demo.Models.Department
- @{
- ViewData["Title"] = "Home Page";
- }
-
- <form asp-action="">
- <div class="form-group col-md-4">
- <label asp-for="DepartmentName" class="control-lable"></label>
- <select asp-for="Id" asp-items="ViewBag.Id" class="custom-select">
- <option value="">Choose Department</option>
- </select>
- </div>
- </form>
Summary
In this blog, I cover select tag helpers with some examples. I hope it will be helpful for your projects.