ASP.Net Core 2.1 MVC SelectList in View is not get

Question

I am working on an ASPNet Core 2.1 MVC website and I am trying to get a select list to populate with a list of Companies (value = Id, text = CompanyName). I can see that the data exists in the List in the ViewModel but no matter what I try, I can't get the data to show in the dropdown list in the view.

I am following the first variation of the SelectList recommendation from this SO post

Here is my EditSite ViewModel class

public class EditSite
{
    public int Id { get; set; }

    [Required]
    [StringLength(50, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 2)]
    [Display(Name = "Site Name")]
    public string SiteName { get; set; }

    [Display(Name = "Enabled")]
    public bool IsEnabled { get; set; }

    public string ReturnUrl { get; set; }

    public List<CompanySelect> CompanyList { get; set; }

}

Here is my CompanySelect moodel class

public class CompanySelect
{
    public int Id { get; set; }

    public string CompanyName { get; set; }

}

Here is my Edit action in my Sites Controller;

    public async Task<IActionResult> Edit([FromQuery] int id, string returnUrl = null)
    {
        await SetCurrentUser();
        ViewData["Role"] = _currentRole;

        var tokenSource = new CancellationTokenSource();
        var token = tokenSource.Token;

        var response = await _client.GetSiteAsync(id, $"api/companies/{SetCompanyId()}/sites/{id}", token);
        if (response == null)
        {
            return NotFound($"Unable to find a record for Company ID [{id}].");
        }
        var site = _mapper.Map<EditSite>(response.Site);
        if (_currentRole != UserRoles.SysAdmin) return View(site);
        site.CompanyList = await GetCompaniesForSelectList();
        return View(site);

    }

Here is a screenshot when I debug, showing that the site.CompanyList is populated with data.

Here is the Select in my my View

<div class="form-group">
    <label asp-for="CompanyName"></label>
    <select asp-for="Id" asp-item="@(new SelectList(Model.CompanyList, "Id","CompanyName"))" class="form-control">
        <option>Please select a Company</option>
    </select>
</div>

Here is a screenshot showing the viewmodel has the data populated at this point in the view.

And here is a screenshot when I open the dropdown list on the web page, showing no companies.

This seems like it should be very straight forward. What am I missing here?

Answer 1

<select asp-for="Id" asp-item="@(new SelectList(Model.CompanyList, "Id","CompanyName"))" ...>

The select tag helper is written like asp-item but it should be asp-items.

The select tag helper asp-for specifies the model property name for the select element and asp-items specifies the option elements.

See this documentation here: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-2.1