Why are my single select lists converting to multi select lists on model binding? - asp.net-core

Question

I'm trying to bind multiple single select lists to one list of strings in my view model I have the property: public List<string> Items {get; set;} and in my view I have 3 select lists with single select option, but when I try to model bind my select list to Items property using asp-for="#Model.Items" all my single select lists converts to multi select lists. Why?
My view:
<form asp-controller="Admin" asp-action="Index" method="post">
<div class="col-12">
<div class="row">
<div class="form-group col-4">
<div class="d-inline-block">
<label>Order By Price:</label>
</div>
<div class="d-inline-block">
<select class="form-control" asp-for="#Model.Items" style="width:150px">
<option value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
</div>
</div>
<div class="form-group col-4">
<div class="d-inline-block">
<label>Order By Name:</label>
</div>
<div class="d-inline-block">
<select class="form-control" asp-for="#Model.Items" style="width:150px">
<option value="A-Z">A-Z</option>
<option value="Z-A">Z-A</option>
</select>
</div>
</div>
<div class="form-group">
<div class="d-inline-block">
<button type="submit" class="btn btn-secondary">Confirm</button>
</div>
</div>
</div>
</div>
</form>
Controller:
[HttpPost]
public IActionResult Index(MangeProductsViewModel vm)
{
return View(new MangeProductsViewModel
{
Products = productRepository.Products.ToList().SortProducts(vm)
});
}
My viewmodel
public IEnumerable<Product> Products { get; set; }
public List<string> Items { get; set; }
And when I select items from lists it adds them correctly the problem is dat user can select multiple options from one list

Answer 1

That's because asp-for invokes a tag helper, and for a prop of type List<string>, the HTML that is generated is going to be a select multiple. However, this wouldn't work for you anyways as it would give all the selects the same name. As a result, they'll simply overwrite each other, not add to each other.
For this, you're going to have to handle things manually via:
<select name="Items[]">
#foreach (var option in Model.SelectList1Options)
{
<option value="#option.Value">#option.Text</option>
}
</select>
For each drop down.

Answer 2

Try this!
In your HttpGet method create a new list with length 3 and assign it to Items property of model and pass the model to view.
And in view write asp-for as follows
asp-for=“#Model.Items[0]”
asp-for=“#Model.Items[1]”
asp-for=“#Model.Items[2]”

Answer 3

The reason is that you have used asp-for="#Model.Items", sicne your item is type of List<string>, so the dropdown list is set as multiple select.
Just use name="Items" instead:
<form asp-controller="Managers" asp-action="SelectTest" method="post">
<div class="col-12">
<div class="row">
<div class="form-group col-4">
<div class="d-inline-block">
<label>Order By Price:</label>
</div>
<div class="d-inline-block">
<select class="form-control" name="Items" style="width:150px">
<option value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
</div>
</div>
<div class="form-group col-4">
<div class="d-inline-block">
<label>Order By Name:</label>
</div>
<div class="d-inline-block">
<select class="form-control" name="Items" style="width:150px">
<option value="A-Z">A-Z</option>
<option value="Z-A">Z-A</option>
</select>
</div>
</div>
<div class="form-group">
<div class="d-inline-block">
<button type="submit" class="btn btn-secondary">Confirm</button>
</div>
</div>
</div>
</div>
</form>
Result: