Blazor binding multiple select to a value

Question

I am trying to bind a multiple select to a value which is then passed to a model, but currently it is only returning one value, I tried changing it from a string to a string array but got many errors and couldn't find a solution.

Does anyone know how I can return all the values the user has selected?

Thank You!

<div class="form-group col-md-6">
   <label for="dur">Duration</label>
   <select @bind="Duration" class="custom-select" id="dur" multiple>
      <option value="12" selected>One Year</option>
      <option value="24">Two Year</option>
      <option value="36">Three Year</option>
      <option value="48">Four year</option>
      <option value="60">Five Year</option>
   </select>
   <small class="form-text text-muted">Hold <b>'CTRL'</b> to select multiple.</small>
</div>

@code {

 private string _Duration;

       private string Duration
        {
            get => _Duration;
            set
            {
                if (value != _Duration)
                {
                    _Duration = value;
                    UpdateModel();
                }
            }
        }
}

Checkout this workaround that might help out. It covers how to bind to individual indices in an array which might work for you. — DekuDesu
– DekuDesu, Commented Jun 7, 2021 at 11:20
What are the "many errors" you encountered ? Could you add the error(s) to the question to help clarify? — XouDo
– XouDo, Commented Jun 7, 2021 at 11:52
@Joshua Bullock - this is a known problem with a live Issue on the AspNetCore team github.com/dotnet/aspnetcore/issues/5519. There's a workaround in the issue, there's Cem Erim answer below or you can change your approach and use say checkboxes. — MrC aka Shaun Curtis
– MrC aka Shaun Curtis, Commented Jun 7, 2021 at 14:13

Matthias Müller · Accepted Answer · 2022-02-02 13:44:14Z

3

<select multiple >
@foreach (var item in myVar)
{
   <option value="@item.SlctValue" @onclick=@((e) => OptionClickEvent(@item.SlctValue,e))>@item.SlctName</option>
}
</select>

@foreach (var holderItem in myHolder)
{
   @holderItem
}



@code  {
   private List<string> myHolder = new List<string>();

   private List<SelectModel> myVar = new List<SelectModel>()
   {
      new SelectModel(){ SlctValue = 1, SlctName="One Year" },
      new SelectModel(){ SlctValue = 2, SlctName="Two Year" },
      new SelectModel(){ SlctValue = 3, SlctName="Three Year"},
      new SelectModel(){ SlctValue = 4, SlctName="Four Year" },
   };

   public void OptionClickEvent(int values,MouseEventArgs evnt)
   {
       if (evnt.CtrlKey)
       {
           myHolder.Add(values.ToString());
       }
   }

   public class SelectModel
   {
       public string SlctName { get; set; }
       public int SlctValue { get; set; }
   }

}

edited Feb 2, 2022 at 13:44

Matthias Müller

5728 silver badges24 bronze badges

answered Jun 7, 2021 at 12:06

Cem Erim

541 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Sven Eberth Over a year ago

Welcome to Stack Overflow! Code-only answers are not particularly helpful. Please add some descriptions of how this code solves the problem.

jerrevds Over a year ago

as of net core 6 it should by possible by default: devblogs.microsoft.com/dotnet/…

Collectives™ on Stack Overflow

Blazor binding multiple select to a value

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related