SelectTagHelper not displaying selected item without explicit Id property in Model

Question

I'm trying to create a dropdown list in MVC Core (2.2) for an Edit action.

I want to use an Enumerable of SelectListItems as my data source without adding an extra property to my ViewModel to hold the current selected value(s) as these are already stored in the SelectListItems.

I was using a customised SelectTagHelper (which removed the multiple attribute) which I thought might be the problem but I've tested with the standard SelectTagHelper and I can't find a way to capture the selected item(s) from the SelectListItems.

Is there a way to make the default SelectTagHelper work like this or do I need to extend the custom SelectTagHelper?

I've tried with a SelectList and an IEnumerable of SelectListItems and neither work the way I'd have thought would be possible.

When debugging, the items are returned correctly (with one having a selected value of true in the example below). I'm assuming there's something in the standard SelectTagHelper that prevents the selected item being parsed from the Items collection.

Code as follows:

Model (with SelectListItems):

public class TaskEditViewModel
{
    public int Id { get; set; }
    public string Description { get; set; }
    public IEnumerable ProjectId { get; set; }
    public string Week { get; set; }
}

Controller:

[HttpGet]
public IActionResult Edit(int Id)
{
    var model = _repo.GetTaskEdit(Id);                       

    if (model != null)
    {
        return View(model);
    }

    return NotFound();            
}

Repository:

public TaskEditViewModel GetTaskEdit(int Id)
{
    var query = _context.Task.Where(t => t.Id == Id);

    var model = query
                .ProjectTo(_mapper.ConfigurationProvider)
                .Single();

    if (model != null)
    {
        var selected = query.First().ProjectId; //gets currently selected value as int
        var list = _context.Project.Select(x => new SelectListItem(x.Name, x.Id.ToString(), true ? x.Id == selected : false));

        model.ProjectId = list;

        return model;
    }

    return null;
}

HTML:

Debugger:

Generated HTML:


   Project

melkisadek · Accepted Answer

I decided to extend the custom TagHelper I was using to cover this as I wanted to provide a single TagHelper to cover both Create and Edit instances of the Select input.

This custom TagHelper removes the multiple attribute and creates an option list with the selected value taken from the SelectListItems passed via the model.

TagHelper:

[HtmlTargetElement("selectOne", Attributes = "asp-for")]
    public class SingleSelectTagHelper : SelectTagHelper
    {
        public SingleSelectTagHelper(IHtmlGenerator generator)
            : base (generator)
        {

        }       

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);

            output.TagName = "select";           

            var index = output.Attributes.IndexOfName("multiple");
            output.Attributes.RemoveAt(index);

            output.PreContent.AppendHtml("");          

            output.PostContent.Reinitialize();

            foreach(var item in Items)
            {
                if(item.Selected)
                {
                    output.PostContent.AppendHtml($"");
                }
                else
                {
                    output.PostContent.AppendHtml($"");
                }                
            }  
        }
    }

Usage:

Renders as:

        
            Project

SelectTagHelper not displaying selected item without explicit Id property in Model

Answers (2)

Related Questions