Different ways of using Select Tag Helper in ASP.NET 3.1

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.

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.