Introduction

In this blog, we will discuss ListBox creation using a select tag helper. There is a single value and multiple value select option in the ListBox. We will learn how we can bind it to the database with a step-by-step example.

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

Here is the code.

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

Step 2: Create the class 'Language' under the Models folder.

  1. using Microsoft.AspNetCore.Mvc.Rendering;
  2. using System.Collections.Generic;
  4. namespace ListBox_Demo.Models
  5. {
  6. public class Language
  7. {
  8. public List<SelectListItem> ProgrammingSkill { get; } = new List<SelectListItem>
  9. {
  10. new SelectListItem { Value = "1", Text = "HTML" },
  11. new SelectListItem { Value = "2", Text = "CSS" },
  12. new SelectListItem { Value = "3", Text = "Bootstrap" },
  13. new SelectListItem { Value = "4", Text = "JavaScript" },
  14. new SelectListItem { Value = "5", Text = "JQuery" },
  15. new SelectListItem { Value = "6", Text = "Angular" },
  16. new SelectListItem { Value = "7", Text = "C#" },
  17. new SelectListItem { Value = "8", Text = "ASP.Net MVC" },
  18. new SelectListItem { Value = "9", Text = "ASP.Net Core" },
  19. new SelectListItem { Value = "10", Text = "Entity Framework" },
  20. new SelectListItem { Value = "11", Text = "Identity" },
  21. new SelectListItem { Value = "12", Text = "LINQ" },
  22. new SelectListItem { Value = "13", Text = "SQL Server" },
  23. };
  24. }
  25. }

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

Step 4: Right-click on index method or use the existing index view which is added under the home folder in view folder.

Step 5: “Add” class Skill in models folder

  1. using System.ComponentModel.DataAnnotations;
  3. namespace ListBox_Demo.Models
  4. {
  5. public class Skill
  6. {
  7. [Key]
  8. public int Id { get; set; }
  10. [Required]
  11. [StringLength(100)]
  12. [Display(Name = "Skills")]
  13. public string ProgrammingLanguage { get; set; }
  14. }
  15. }

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

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

Step 7: Add-migration in the package manager console and update-database. It will be added department table with ID and ProgrammingLanguage.

Step 8: Open the same HomeController or a new controller and write the following code in the controller class.
  1. using ListBox_Demo.Data;
  2. using ListBox_Demo.Models;
  3. using Microsoft.AspNetCore.Mvc;
  4. using Microsoft.AspNetCore.Mvc.Rendering;
  5. using System.Linq;
  7. namespace ListBox_Demo.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. private readonly ApplicationDbContext dbContext;
  13. public HomeController(ApplicationDbContext context)
  14. {
  15. dbContext = context;
  16. }
  18. public IActionResult Index()
  19. {
  20. ViewData["Id"] = new SelectList(dbContext.Skills, "Id", "ProgrammingLanguage");
  21. return View();
  22. }
  24. public IActionResult Skills()
  25. {
  26. var model = new Language();
  27. model.ProgrammingSkill.ToList();
  28. return View(model);
  29. }
  32. }
  33. }

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

Index View:

  1. @model ListBox_Demo.Models.Skill
  3. @{
  4. ViewData["Title"] = "Home";
  5. }
  7. <div class="form-group col-md-4">
  8. <select asp-for="Id" asp-items="ViewBag.Id" size="5" multiple class="form-control"></select>
  9. <span asp-validation-for="ProgrammingLanguage" class="text-danger"></span>
  10. </div>

Skills View:
  1. @model ListBox_Demo.Models.Language
  3. @{
  4. ViewData["Title"] = "Skills";
  5. }
  7. <div class="form-group col-md-4">
  8. <select asp-for="ProgrammingSkill" asp-items="Model.ProgrammingSkill" size="5" multiple class="form-control"></select>
  9. <span asp-validation-for="ProgrammingSkill" class="text-danger"></span>
  10. </div>