How to use select tag helper in ASP.NET MVC 6

Tag Helpers were introduced in ASP.NET MVC 6, and one the tag helper is Select tag helper. Select tag helper is used to generate dropdown list and it’s an alternative for Html.DropDownList. In this post, we will see how to use select tag helper and how to bind select tag helper to model data or enum values. Also read How to use image tag helper in ASP.NET Core MVC 1.0

How to use select tag helper in ASP.NET MVC 6?

Select tag helper uses asp-for which extracts the name of the specified model property into the rendered HTML. For example,

<select asp-for="TimeZone"></select>

Then your model should have a property defined “TimeZone”.

public class RegisterViewModel
{
    [Display(Name = "TimeZone")]
    public string TimeZone { get; set; }
}

But this will be a empty list without any option as we didn’t define any options for the select list. There are couple of ways to add options to select tag helper.

Define directly in Markup

You can directly define your options in markup.

<select asp-for="TimeZone">
   <option value="-12">(UTC-12:00)</option>
   <option value="-11">(UTC-11:00)</option>
</select>

And selected option will be marked as “selected” when the page will be rendered.

Define using a data source

It’s a most common scenario when you want to bind your select list options either from any database table or any server side list. In such case, asp-items tag helper attribute should be used.

<select asp-for="TimeZone" asp-items="ViewBag.TimeZoneList"></select>

Now, we need to put TimeZoneList in ViewBag. Let’s first create a List and add options to it.

public List<SelectListItem> TimeZoneList { get; private set; }
public RegisterViewModel()
{
     TimeZoneList = new List<SelectListItem>();
     TimeZoneList.Add(new SelectListItem
     {
         Text = "Select",
         Value = ""
     });
     foreach (TimeZoneInfo z in TimeZoneInfo.GetSystemTimeZones())
     {
          TimeZoneList.Add(new SelectListItem
          {
               Text = z.DisplayName,
               Value = z.Id
          });
     }
}

And from your controller, add the list to ViewBag.

// GET: /Account/Register
[HttpGet]
[AllowAnonymous]
public IActionResult Register()
{
    RegisterViewModel rs = new RegisterViewModel();
    ViewBag.TimeZoneList = rs.TimeZoneList;
    return View();
}

Bind enum values

You can also bind enum values to select list.

public List<SelectListItem> PriorityList { get; private set; }
public RegisterViewModel()
{
    PriorityList = new List<SelectListItem>();
    PriorityList.Add(new SelectListItem
    {
       Text = "Select",
       Value = ""
    });
    foreach (ePriority eVal in Enum.GetValues(typeof(ePriority)))
    {
      PriorityList.Add(new SelectListItem { Text = Enum.GetName(typeof(ePriority), eVal), Value = eVal.ToString() });
    }
}

You can also use a static function to bind the select list, instead of using ViewBag.

public static List<SelectItemList> GetTimeZoneList()
{
    List<SelectListItem> TimeZoneList = new List<SelectListItem>();
    TimeZoneList.Add(new SelectListItem
    {
       Text = "Select",
       Value = ""
    });
    foreach (TimeZoneInfo z in TimeZoneInfo.GetSystemTimeZones())
     {
          TimeZoneList.Add(new SelectListItem
          {
               Text = z.DisplayName,
               Value = z.Id
          });
     }
    return TimeZoneList;
}

As static functions can be accessed only via classname. So in our case, it would be RegisterViewModel.GetTimeZoneList()

<select asp-for="TimeZone" 
   asp-items="RegisterViewModel.GetTimeZoneList()"></select>

Summary

In this post, I demonstrated how to use select tag helper and how to bind it using enum values as well as other data source. And that covers all the functionality provided by the select tag helper in MVC 6.

PS: If you found this content valuable and want to return the favour, then