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

Question

我正在尝试学习 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 -->

Answer 1

我哪里做错了

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

Answer 2

请记住，引导程序下拉菜单需要引用引导程序 javascript。Blazor 模板默认不引用它。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>