.NET Core <select> With Default Value?

问题:

My goal is to generate a <select> dropdown with a certain select value (<option>) pre-selected, so the finalized HTML should look like this:

<select>
  <option value = "1">Option1</option>
  <option value = "2" selected>Option2</option>
  <option value = "3">Option3</option>
</select>

Note that the option with a value of 2 has a selected attribute, indicating that it will show before the dropdown is clicked. I cannot (and am trying to) achieve this using .NET Core Tag Helpers.

This is my model (I think you can safely ignore the details):

public class ReportViewModel
{
  [Display(Name = "Pick a form")]
  public IEnumerable<Form> AvailableForms { get; set; }

  public Form SelectedForm { get; set; }

  public List<ReportData> FormResponses { get; set; }
}

Note that the Form object there just has Id and Name properties on it.

This is my select statement:

<label asp-for="SelectedForm.Name" class="form-control-label font-weight-bold"></label>
<select asp-for="SelectedForm.Name"
        class="form-control"
        onchange ="onFormSelected(this.value)"
        asp-items="@(new SelectList(Model.AvailableForms, "Id", "Name"))">
</select>

I don't see the answer in the Microsoft Guide Or in a blog on the topic

回答1:

Basically you need to is set the select to use the SelectedForm.Id property, then specify the value of the form to be selected in your controller. I had to update your code a little but this works for me -

<label asp-for="SelectedForm" class="form-control-label font-weight-bold"></label>
<select asp-for="SelectedForm.Id"
        class="form-control"
        onchange ="onFormSelected(this.value)"
        asp-items="@(new SelectList(Model.AvailableForms, "Id", "Name"))">
</select>

Then in your controller

var vm = new ReportViewModel()
{
    AvailableForms = new List<Form>()
};

var form2 = new Form() { Id = 2, Name = "Bar" };
(vm.AvailableForms as List<Form>).Add(new Form() { Id = 1, Name = "Foo" });
(vm.AvailableForms as List<Form>).Add(form2);
(vm.AvailableForms as List<Form>).Add(new Form() { Id = 3, Name = "Baz" });

vm.SelectedForm = form2;

return View(vm);

回答2:

The SelectList constructor can take an additional argument, namely selectedValue. In your case, you should be able to pass this through, which I think will look something like this:

asp-items="@(new SelectList(Model.AvailableForms, "Id", "Name", Model.SelectedForm.Id))"

I think the reason asp-for isn't working for you is the mismatch between the value of SelectedForm.Name (which is a string), and the value of the Id property you're using in the SelectList constructor (which is an integer?).

You can see partially how this works in the source code. You end up here in GenerateOption:

var selected = item.Selected;
if (currentValues != null)
{
    var value = item.Value ?? item.Text;
    selected = currentValues.Contains(value);
}

At this point, I believe currentValues will contain a single element, which will be a string (Form.Name). I believe also that item.Value will be e.g. "1" and so there's no match.