How to preselect an item in a dropdown using ASP.NET Core Razor pages

Question

If it helps we are using ASP.NET Core 2.1 and Razor pages (not traditional MVC)

I am having issues having the select work. We are generating a list of options for our page using list of SelectListItem that brings in the enums and we place it in our asp-items and that works awesome. For our asp-for we are using a label that increments because have loop of a few dropdowns.

<select asp-for="@Model.Answers[answerOptionIndex].AnswerText" 
        asp-items="@Model.CriticalIllnessTierSelectListItems" 
        class="form-control">
    <option></option>
</select>

For doing a product add, this works great, the asp-for generates Answers[0].AnswerText for name and Answers_0__AnswerText for id and that's wonderful.

The trouble is we need to be able to edit an existing form so in order to prepopulate the values, I found that you can use the asp-for for that, so I put in @answerTextForQuestion for asp-for and now the correct option is preselected on page load... but then it messes up my the IDs and Name.

When I do that I get this:

<select name="answerTextForQuestion" class="form-control" 
        id="answerTextForQuestion">

What's strange is it doesn't put the value answerTextForQuestion is, it just puts the variable.

I try to manually set name and ID to @Model.Answers[answerOptionIndex].AnswerText and leave the asp-for as @answerTextForQuestion but it ignores it and still puts in @answerTextForQuestion for the question and answer.

I don't know how have my cake and eat it to. I need my asp-for to be @Model.Answers[answerOptionIndex].AnswerText but I also need it to choose whichever value is @answerTextForQuestion. Because we are using SelectListItem I can't just throw a selected attribute on the right one.

I found a Stack Overflow that tried to use a loop where if that item in selected matched answerTextForQuestion then make the selected attribute true but that wasn't working and I read in the comments that selected is read only, so that won't work. I bolded this because I am worried it would get downvoted as a duplicate post.

Edit: a better title may have been is there another attribute I can use to tell the browser which option should be preselected without using ASP-FOR. We have a lot of our AJAX built around the name and ID that ASP-FOR uses but I just need this one function. I looked at the C# docs but didn't see anything.

Perhaps I'm missing the point, but can't you just put the value that you want to pre-select inside the option tag? (i.e. <option>@answerTextForQuestion</option> ) — Peter

Xueli Chen Xueli Chen · Accepted Answer · 2018-08-27T08:13:39

For preselecting an item in dropdownlist, you could refer a part of the code for the simple example as shown below

1.In Edit.cshtml

<div class="form-group">
            <label asp-for="Movie.Genre" class="control-label"></label>
            <select  asp-for="Movie.Genre.Id" asp-items='(List<SelectListItem>)ViewData["Genres"]'></select>
        </div>

2.In Edit.cshtml.cs

Model Binding

[BindProperty]
    public Movie Movie { get; set; }

    public Genre Genre { get; set; }

OnGetAsync()

 Movie = await _context.Movie
                     .Include(m => m.Genre)
                     .SingleOrDefaultAsync(m => m.Id == id);

 ViewData["Genres"] = _context.Genre.Select(g => new SelectListItem { Value = g.Id.ToString(), Text = g.Name }).ToList();

How to preselect an item in a dropdown using ASP.NET Core Razor pages

1 Answers