Blazor 自定义组件下拉框

原创

zlulus 2024-03-25 10:54:49 ©著作权

文章标签 下拉菜单 List 字符串 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者zlulus的原创作品，请联系作者获取转载授权，否则将追究法律责任

在Blazor中，我们可以创建自定义组件来复用代码并增强UI的交互性。
本文将介绍如何创建一个简单的下拉菜单（Dropdown）组件，并使用它。

创建Dropdown组件

首先，我们创建一个名为Dropdown.razor的组件。这个组件继承自ComponentBase，并包含HTML结构和C#代码块。

@inherits ComponentBase

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" @onclick="ToggleDropdown">
        @ButtonText
    </button>
    <div class="dropdown-menu" style="display: @(IsOpen ? "block" : "none")">
        @foreach (var item in DropdownItems)
        {
            <button class="dropdown-item" @onclick="() => SelectItem(item)">@item</button>
        }
    </div>
</div>

@code {
    [Parameter]
    public string ButtonText { get; set; }

    [Parameter]
    public List<string> DropdownItems { get; set; }

    [Parameter]
    public EventCallback<string> OnItemSelected { get; set; }

    private bool IsOpen { get; set; }

    private void ToggleDropdown()
    {
        IsOpen = !IsOpen;
    }

    private async Task SelectItem(string item)
    {
        ButtonText = item;
        IsOpen = false;
        await OnItemSelected.InvokeAsync(item);
    }
}

在这个组件中，我们定义了三个参数：
ButtonText：下拉菜单按钮上显示的文本。
DropdownItems：下拉菜单项列表。
OnItemSelected：当选择一个菜单项时触发的事件回调。
我们还定义了一个私有变量IsOpen来控制下拉菜单的显示与隐藏，以及两个方法ToggleDropdown和SelectItem来处理用户交互。

使用Dropdown组件

接下来，我们在DropdownExample.razor页面中使用这个Dropdown组件。

@page "/dropdown-example"
@rendermode @(new InteractiveServerRenderMode(prerender: true))

<h1>Blazor 下拉菜单示例</h1>

<Dropdown ButtonText="选择一个选项" DropdownItems="@dropdownItems" OnItemSelected="OnDropdownItemSelected" />

<p>你选择的选项是：@selectedItem</p>

@code {
    List<string> dropdownItems = new List<string> { "选项1", "选项2", "选项3" };
    string selectedItem = string.Empty;

    private void OnDropdownItemSelected(string item)
    {
        selectedItem = item;
        // 这里可以添加其他逻辑，比如状态更新或通知其他组件等
    }
}

在DropdownExample.razor页面中，我们声明了一个字符串列表dropdownItems作为下拉菜单的数据源，以及一个字符串变量selectedItem来存储用户选择的选项。我们还定义了一个方法OnDropdownItemSelected来处理用户从下拉菜单中选择项时的事件。

当用户从下拉菜单中选择一个选项时，Dropdown组件会触发OnItemSelected事件回调，并将所选项传递给DropdownExample.razor页面中的OnDropdownItemSelected方法。然后，我们更新selectedItem变量的值，并在页面上显示它。

Blazor 自定义组件下拉框_下拉菜单

通过创建自定义的Dropdown组件，我们可以在Blazor应用程序中轻松实现下拉菜单功能。这个组件具有高度的可复用性，并且可以通过参数和事件回调与父组件进行交互。
在示例页面中，我们展示了如何使用这个组件，并处理了用户选择菜单项时的逻辑。
通过这种方式，我们可以提高代码的可维护性和可重用性，同时为用户提供更好的交互体验。