Remove multiple selection from asp.net core application

Question

I have List<SelectListItem> variable with two values. I want to represent it as dropdown box in html so I'm doing like this.

<div class="form-group row">
    <label asp-for="Roles" class="col-sm-2 col-sm-offset-2 form-control-label"></label>
    <div class="col-md-6">
        <select asp-for="Roles" asp-items="@Model.Roles" class="form-control selectpicker bs-select-hidden"></select>
    </div>           
</div>

and this code shows me the list with those two items, but it also generates

multiple="multiple"

attribute for select tag.

How can I make not to generate multiple attribute?

Melody

Whatever you're pointing asp-for at can apparently contain multiple values. So, if it currently contains, say, two items (and your asp-items has more than two items in it), how is it meant to know which one item to mark as selected? What happens to the other item when your form is submitted? – Surmise

Answer 1

The Select Tag Helper automatically makes the select element multiple if your asp-for property is an IEnumerable. The way to avoid that is to use your base class (not a collection) as the asp-for property. The asp-items property should still be a collection since these are the items that will become options in the select list.

In your example this is simply changing your asp-for="Roles" to asp-for="Role"

<div class="form-group row">
<label asp-for="Roles" class="col-sm-2 col-sm-offset-2 form-control-label"></label>
<div class="col-md-6">
    <select asp-for="Role" asp-items="@Model.Roles" class="form-control selectpicker bs-select-hidden"></select>
</div>           

You may need to adjust your view model being passed to the view so that it has access to the base class Role, as well as the collection of Roles to be enumerated

ASP NET Core Select Tag Helper Reference

Botryoidal

thanks, this helped "The Select Tag Helper automatically makes the select element multiple if your asp-for property is an IEnumerable". I added SelectedRole property inside the viewmodel to be binded with asp-for attribute – Modestamodeste

Answer 2

The select tag helper will automatically generate a multi-select if the property specified in the asp-for attribute is an IEnumerable check this link

So you can easily solve this problem by using string for name and list for items as follow:

 public SelectList Roles { get; set; }
 public string Role { get; set; }

Then in view

<select asp-for="Role" asp-items="Model.Roles">
</select>

Tinnitus

it works...but the select list becomes a dropdown box....is there a way to maintain a select list look but to let it only select 1 single item – Minneapolis

You need to use js library to do that for example select2.org – Tinnitus

Answer 3

You can remove this attribute multiple with javascript:

Model:

public int RoleId { get; set; }

public SelectList Roles { get; set; }

Add helper css class for example: single-select

<select asp-for="RoleId" asp-items="@Model.Roles" class="single-select">
</select>

Javascript:

$(function(){
    $(".single-select").removeAttr("multiple");
});

Note: If you submit the form you can check the property called RoleId. The property called Roles is probably only for display all items.

Neurologist

Answer 4

Set multiple=false in your select

Cumming

asp-for="Roles" where the roles come form? it it array or list – Cumming

The Roles Properties that you specify in asp-for="Roles" is list. if you pass list or array to this attributes then razor automatically set muliple='multiple' to set muliple to false please pass string property from you model in asp-for attributes From more info please check this link github.com/aspnet/Razor/issues/586 – Cumming

Answer 5

Try following

<select multiple="multiple" size="1">

Fantast