Get the list of check items in Select Drobdown Check Box In Blazor with C#

Question

In the Blazor project, we needed a DropDownCheckBox for which I created the HTML template from Blazor. and you can see in this picture:

If an item checked or one of the items is unchecked, the console.log(this.selectedOptions) method will be executed and the list of choices will be displayed in the log section of the browser.

<div class="information__set toggle_module">
    <div class="information_wrapper form--fields row">
        <div class="col-md-6" style="padding-left: 0px;padding-right: 0px;">
            <div class="form-group">
                <div>

                    <div class="container">
                        <h1>Multiselect-dropdown demo!</h1>
                        <div class="row">
                            <div class="col ">
                                <hr />
                                @if (Items != null)
                                {
                                    <label>Select 2</label>
                                    <select name="field2" id="field2" multiple multiselect-search="true" multiselect-select-all="false" multiselect-max-items="1" onchange="console.log(this.selectedOptions)">
                                        @foreach (var itm in Items)
                                        {
                                            if (!itm.Selected)
                                            {
                                                <option value="@itm.ItemID">@itm.SelItms</option>
                                            }
                                            else
                                            {
                                                <option selected value="@itm.ItemID">@itm.SelItms</option>
                                            }
                                        }
                                    </select>
                                }
                            </div>
                        </div>

                        <br /><br /><br />
                        <button class="btn btn-light" onclick="field2.innerHTML='<option value=1>New option 1</option><option selected value=2>New option 2</option><option value=3>New option 3</option>';field2.loadOptions()">Load new options</button>

                        <input type="text" id="ttt" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The C# code part in Blazor:

@code
{
    [Parameter]
    public List<MultiSelectList> Items { get; set; } = null!;

    MultiSelectList fref = new MultiSelectList();

    string IntSelectedCountryID;

    string IntSelectedCountryIDMain
    {
        get
        {
            return IntSelectedCountryID;
        }
        set
        {
            IntSelectedCountryID = value;
            Console.WriteLine(value.ToString() + "------------------");
        }
    }


    protected override async Task OnInitializedAsync()
    {
        Items = new List<MultiSelectList>();
        MultiSelectList m;
        for (int i = 0; i <= 5; i++)
        {
            m = new MultiSelectList();
            if (i == 3)
            {
                m.Selected = true;
            }
            else
            {
                m.Selected = false;
            }
            m.ItemID = i + 1;
            m.SelItms = "Item " + i.ToString();
            Items.Add(m);
        }
    }



    private void CheckboxChanged(ChangeEventArgs e)
    {
        Console.WriteLine(e.Value.ToString());
    }

    public class MultiSelectList
    {
        public int ItemID { get; set; }
        public string SelItms { get; set; }
        public Boolean Selected { get; set; }
    }
}

How can I transfer the list sent by the console.log(this.selectedOptions) method to C# parameters or variables and use it in the program. Thank you for your kindness and attention. The link of html spurce with java and other files: https://github.com/admirhodzic/multiselect-dropdown

Answer 1

@onchange="CheckboxChanged">

If you want to manage the selected or unselected list items you have to collect them for example in a List and tracking their modifications.

UPDATE Hi, I do not know what you want but it works for me:

<div class="container">
  <h1>Multiselect-dropdown demo!</h1>
  <div class="row"><div class="col ">
    <label>Select 1</label>
    <select name="field1" id="field1" multiple 
        @onchange="CheckboxChanged"
        multiselect-hide-x="true">
      <option value="1">Audi</option>
      <option selected value="2">BMW</option>
      <option selected value="3">Mercedes</option>
      <option value="4">Volvo</option>
      <option value="5">Lexus</option>
      <option value="6">Tesla</option>
    </select>
  </div></div>

private void CheckboxChanged(ChangeEventArgs e)
{
    var listOfSelectedElements= ((IList<string>)e.Value);
}

Sorry, If misunderstood again.

Answer 2

I would suggest using MudBlazor that way you can bind anything you've selected in the comboBox for example

<MudSelect IconSize='Size.Small'Dense="true" MultiSelection=true @bind-SelectedValues='selectedValues'>
    @for(var i=0;i<5;i++)
    {
    <MudSelectItem>item @i</MudSelectItem>
    }
</MudSelect>

@code
{
private IEnumerable<string> selectedValues {get; set;} = new HashSet<string();
}

In your button you can loop the values like foreach selectedValues

Please see the example on their website

https://mudblazor.com/components/select#variants

Answer 3

Ok, this is what you are doing:

When the user selects a new option you write in the console the list. It is very, very simple your problem.

you need to declare a list in the code section, then when onclick event clicks, instead of writing the list through the console, you call another method something like onchange="@MyMethod(this.selectedOptions)"

then

@code{
.....
void MyMethod(...){
myList = myparameter;
}
...}

myList is the list you have defined, you need the @ to say that this is c# code