下拉列表在 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" 始终需要出现在下拉菜单的触发元素上。

   我建议您应该将基本下拉列表包装在以下结构中

   data-toggle="dropdown" class="..." > ...

   这里的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;}
      }
      

   【讨论】：

   • 它是非常有用的。你能告诉如何通过点击下拉列表之外的任何地方来关闭它吗？
   • Joe - 我自己解决了这个问题。要在关闭点击时关闭，请在下拉菜单中处理主 div 上的 @onblur 事件 - 在此事件方法中，将“show”变量设置为 false 并调用 StateHasChanged()
   • 嗨，Joe & Wanabrutbeer，我已经按照上面的方法实现了，它工作正常，但在点击外部时无法处理关闭下拉菜单。我在主 div 中尝试过 @onblur 事件，但它无法触发。你能指导我实现这一目标吗？提前致谢。
   • 对于 DropdownListItem.razor，将“@onclick”更改为 @onmousedown。对于“@onclick”内的 Dropdown.razor，将 !this.show 更改为 true 并添加“@onblur”事件。使用带有 body 的方法将 show 设置为 false 并调用 StateHasChanged()。

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>

Answer 3

接受的答案很棒。但是，正如许多人指出的那样，如果未选择某个选项，则下拉菜单不会关闭。创建@unblur 事件的建议并不能解决问题，因为@unclick 和@unblur 在.NET 5 中似乎不能一起工作（我在某处读到它在新的.NET 6 中工作）-@unblur 阻止@取消点击即可触发。

我找到了这个解决方案 (@onblur prevents @onclick in blazor server side app)，将 @onclick 更改为 @onmousedown，然后创建 @onblur 事件（按照建议）为我解决了这个问题。