In this post from my series exploring the ASP.NET Core MVC tag helpers, I will be covering the select tag helper.

The select tag helper is used to generated select and associated option elements for properties of your models. This is an alternative to the _Html.DropDownListFor _HTML helper method.

Select Tag Helper

The select tag helper is used by adding the asp-for attribute to a select element. For example consider a simple view model class containing a CountryCode property:

public class SimpleViewModel
{
    public string CountryCode { get; set; }
}

You can bind a select element to the CountryCode property as follows:

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

…which would generate the following HTML:

<select name="CountryCode" 
           id="CountryCode">
</select>

Now this is not overly useful because it is an empty drowdown list. You will probably want to add some options to your select.

Adding options

There are a couple ways you can add options to the select. You can simply add options directly in the markup:

<select asp-for="CountryCode">
    <option value="CA">Canada</option>
    <option value="US">US</option>
    <option value="--">Other</option>
</select>

In this case, the options specified in markup will be included in the generated HTML. The selected option will automatically be determined based on the value of the model property. For example, if the CountryCode property is set to ‘CA’ in the model, then the following HTML would be generated:

<select name="CountryCode" id="CountryCode">
    <option selected="selected" value="CA">Canada</option>
    <option value="US">US</option>
    <option value="--">Other</option>
</select>

If the list of options is dynamically loaded from a data source, you can use the asp-items tag helper attribute. All you need to do is set the asp-items attribute to an IEnumerable. For example, if we had a list of countries available on the ViewBag, we could specify the select options as follows:

<select asp-for="CountryCode" 
         asp-items="ViewBag.Countries">
</select>

This will generate a select with options for each of the SelectListItems in the Countries collection.

Multiple Select

The select tag helper will automatically generate a multi-select if the property specified in the asp-for attribute is an IEnumerable. For example, given the following model class:

public class SimpleViewModel
{
    public IEnumerable<string> CountryCodes { get; set; }
}

Binding the asp-for attribute to the CountryCodes property as follows:

<select asp-for="CountryCodes" 
        asp-items="ViewBag.Countries">
</select>

…would generate the following HTML:

<select name="CountryCodes" 
        id="CountryCodes" 
        multiple="multiple">
    <option selected="selected" 
            value="CA">Canada</option>
    <option value="USA">United States</option>
    <option value="--">Other</option>
</select>

Conclusion

That covers all the functionality provided by the select tag helper in ASP.NET Core MVC, which provides a clean syntax for generating select elements based on the values in your model. In the next post, I will cover the Form tag helper.