下拉列表在 Asp.net Blazor 組件中不起作用

我正在嘗試學習 ASP.NET Blazor 中的新功能。我正在使用 Visual Studio 2019。我正在嘗試創建一個想法系統資料庫單。因此，我從 Bootstrap 4 中獲取了下拉列表的程式碼。它沒有按預期工作。你能告訴我我哪裡做錯了嗎？

只是有點不知所措，任何建議將不勝感激。

給定程式碼：

<!-- Card Body -->
<div class="card-body">
   <!-- <form   -->
   <form>
       <div class="form-group">
           <label for="exampleFormControlInput1">Title</label>
           <input type="email" class="form-control" id="exampleFormControlInput1">
       </div>
       <div class="form-group">
           <label for="exampleFormControlSelect1">Description</label>
           <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
       </div>
       <!-- Basic dropdown -->
       <div class="form-group">
       <button class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">
           Basic dropdown
       </button>

       <div class="dropdown-menu">
           <a class="dropdown-item" href="#">.Net</a>
           <a class="dropdown-item" href="#">Python</a>
           <a class="dropdown-item" href="#">Data Science</a>
           <div class="dropdown-divider"></div>
       </div>
       </div>
       <!-- Basic dropdown -->

我在哪里工作錯了

1. 根據官方文件]（https://getbootstrap.com/docs/4.0/components/dropdowns/#data-toggledropdown-still-required）：

無論您是通過 JavaScript 呼叫下拉菜單還是使用 data-api，都需要 data-toggle=“dropdown” 出現在下拉菜單的觸發元素上。

我建議您應該將基本下拉列表包裝在以下結構中

**<div class="dropdown">** 
<button **data-toggle="dropdown"** class="..." > ...</button>
<div class="下拉菜單 ...>
...
</div>
</div>

2. 您沒有為選擇添加事件處理程序。至少您應該@onclick為切換按鈕添加一個。點擊此按鈕時，顯示或隱藏dropdown-menu.
3. 最後，如果您想使用 Blazor（不帶 javascript）實現下拉組件，您還應該在有人選擇下拉列表項時替換切換按鈕中的文本內容。

展示：如何創建通用下拉組件

與其簡單地解決問題，我認為創建一個通用下拉組件要好得多，這樣我們總是可以通過以下方式呼叫它們：

@{ var list = new List<string>{ ".NET", "Python","Java" }; }
<Dropdown TItem="string" OnSelected="@OnSelected" >
   <InitialTip>This is a dropdown list</InitialTip>
   <ChildContent>
       <DropdownListItem Item="@list[0]">.NET</DropdownListItem>
       <DropdownListItem Item="@list[1]">Python</DropdownListItem>
       <div class="dropdown-divider"></div>
       <DropdownListItem Item="@list[2]">Java</DropdownListItem>
   </ChildContent>
</Dropdown>

@code {
   private void OnSelected(string selection)
   {
       Console.WriteLine(selection);
   }
}

這裡TItem是一個泛型類型參數，它是每個下拉列表項的類型，可以是任何 .NET 類型。

展示

如何

1. 添加一個Shared/Dropdown.razor組件：

@using Microsoft.AspNetCore.Components.Web
@typeparam TItem
<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle mr-4" data-toggle="dropdown" type="button" @onclick="e => this.show=!this.show " 
           aria-haspopup="true" aria-expanded="false">
           @Tip
   </button>
   <CascadingValue name="Dropdown" Value="@this">
   <div class="dropdown-menu @(show? "show":"")" >
       @ChildContent
   </div>
   </CascadingValue>
</div>

@code {
   [Parameter]
   public RenderFragment InitialTip{get;set;}
   [Parameter]
   public RenderFragment ChildContent{get;set;}
   [Parameter]
   public EventCallback<TItem> OnSelected {get;set;}

   private bool show = false;
   private RenderFragment Tip ;

   protected override void OnInitialized(){ this.Tip = InitialTip; }
   public async Task HandleSelect(TItem item, RenderFragment<TItem> contentFragment)
   {
       this.Tip= contentFragment.Invoke(item);
       this.show=false;
       StateHasChanged();
       await this.OnSelected.InvokeAsync(item);
   }
}

2. 添加一個Shared/DropdownListItem.razor組件：

@using Microsoft.AspNetCore.Components.Web
@typeparam TItem
<a class="dropdown-item" Item="@Item" @onclick="e=> Dropdown.HandleSelect(Item, ChildContent)" >@ChildContent(Item)</a>

@code {
   [CascadingParameter(Name="Dropdown")]
   public Dropdown<TItem> Dropdown {get;set;}

   [Parameter]
   public TItem Item{get;set;}
   [Parameter]
   public RenderFragment<TItem> ChildContent {get;set;}
}

引用自：https://stackoverflow.com/questions/58929072