Question

我正在尝试学习ASP.NET Blazor中的新功能。我正在使用Visual Studio2019。我正在尝试创建“想法注册”表单。因此，我从Bootstrap 4中获取了dropdownlist的代码。它未按预期工作。你能告诉我我在哪里做错了吗？

这里有点不知所措，任何建议将不胜感激。

验证码：

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

请记住，引导程序下拉列表需要引用引导程序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 2

我在哪里工作错误

根据官方文档]（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="dropdown-menu ...>
         ...
     </div>
</div>
```
您没有添加用于选择的事件处理程序。至少您应该为切换按钮添加@onclick。单击此按钮时，显示或隐藏dropdown-menu。
最后，如果要使用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类型。

演示

操作方法

添加一个Shared/Dropdown.razor组件：

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

添加一个Shared/DropdownListItem.razor组件：

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

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

2 个答案:

演示：如何创建常规下拉组件