使用 C# 在 Blazor 中的 Select Dropdown Check Box 中獲取檢查項列表

Question

在 Blazor 項目中，我們需要一個 DropDownCheckBox，為此我從 Blazor 創建了 HTML 模板。 你可以在這張照片中看到：

如果選中某一項或未選中其中一項，則會執行console.log(this.selectedOptions)方法，並在瀏覽器的日志部分顯示選項列表。

<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>

Blazor 中的 C# 代碼部分：

@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; }
    }
}

如何將console.log(this.selectedOptions)方法發送的列表傳遞給C#參數或變量，並在程序中使用。 感謝您的善意和關注。 html sprace 與 java 等文件的鏈接： https ://github.com/admirhodzic/multiselect-dropdown

Answer 1

@onchange="CheckboxChanged">

如果您想管理選定或未選定的列表項，您必須收集它們，例如在列表中並跟蹤它們的修改。

更新嗨，我不知道你想要什么，但它對我有用：

<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);
}

對不起，如果再次誤解。

Answer 2

我建議使用comboBox ，例如，您可以綁定您在組合框中選擇的任何內容

<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();
}

在您的按鈕中，您可以循環諸如foreach selectedValues之類的值

請參閱他們網站上的示例

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

Answer 3

好的，這就是你正在做的：

當用戶選擇一個新選項時，您在控制台中寫入列表。 這是非常非常簡單的問題。

您需要在代碼部分聲明一個列表，然后當 onclick 事件單擊時，而不是通過控制台編寫列表，而是調用另一個方法，例如onchange="@MyMethod(this.selectedOptions)"

然后

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

myList 是你定義的列表，需要@表示這是c#代碼