Bind Dropdownlist with TagHelpers

Question

I am trying to create a dropdownlist and bind with viewbag using ASP.NET Core tag helpers.

I can bind the dropdownlist using:

@Html.DropDownList("Area_id", 
                   new SelectList(ViewBag.Areas, "Value", "Text"), 
                   "Select an Area")

But I have hard time to use ASP.NET Core tag helper on HTML "Select":

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

My code always has red line under asp-for="Area_id" saying Area_id is not accessible. I tried to use asp-for="Id" and still doesn't work. The GetAreas() function works fine. Please help!

Model classes:

public class DegreeViewModel
{
    public int Degree_id { get; set; }
    public int Area_id { get; set; }
    public List<SelectListItem> Areas { get; set; }
}
        
public IActionResult Index()
{
    var vm = new DegreeViewModel();
    vm.Areas = GetAreas();
    return View(vm);
}

Controller:

private MyContext _context;

[BindProperty(SupportsGet = true)]
public int Area_id  { get; set; }

[BindProperty(SupportsGet = true)]
public int? Degree_id { get; set; }     

public IActionResult Index()
{
     var vm = new DegreeViewModel();
        vm.Areas = GetAreas();
        return View(vm);
}

public List<SelectListItem> GetAreas()
{
    var Areas = (from a in _context.Degrees
                 select new SelectListItem { Text = a.Area_name, Value = a.Area_id.ToString() }).ToList();
    Areas.Add(new SelectListItem("Select", "0"));
    return Areas;
}

Index.cshtml

@model DegreeViewModel

<form asp-action="GetResult" asp-controller="Home" method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
   
        <label  class="control-label">Areas</label>
        <select asp-for="Area_id" asp-items="@(new SelectList(Model.Areas,"Value","Text"))"  />
        <span asp-validation-for="Area_id" class="text-danger"></span>
    
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

Answer 1

The model's type you passed to page is IEnumerable, So you can't use asp-for="Area_id". You need to use @foreach(var item in model){} and then asp-for="item.Area_id". Because your question is how Bind Dropdownlist with TagHelpers and don't provide the post method, So i will just show how to use TagHelpers to bind dropdownlist.

public IActionResult Index()
        {
            //If you want to use `<select>`, you need to use specific class `SelectListItem`
           
           List<SelectListItem> test = new List<SelectListItem>();
                foreach (var item in GetAreas())
                {
                    test.Add(new SelectListItem { Text = item.Area_name, Value = item.Id.ToString() });
                }

            ViewBag.Areas = test;

            return View();
        }

page

<select asp-items="@ViewBag.Areas" name="xxx" Id="xxx"></select>