Blazor UI 页面工具栏扩展

页面工具栏系统允许您向任意页面的工具栏添加组件。页面工具栏位于页面标题右侧的区域。下图展示了在用户管理页面添加的按钮（"从Excel导入用户"）：

您可以向页面工具栏添加任意类型的视图组件项，或修改现有项。

设置方法

本示例将为身份模块的用户管理页面添加"从Excel导入用户"按钮并执行C#代码。

创建C#文件

首先在解决方案中添加新的C#文件。我们在.Blazor项目的/Pages/Identity/文件夹内添加：

我们将使用Blazor中的组件重写系统。创建继承自UserManagement组件的类后，我们将重写SetToolbarItemsAsync方法并以编程方式添加工具栏项。

以下是重写的SetToolbarItemsAsync方法内容：

protected override async ValueTask SetToolbarItemsAsync()
{
    await base.SetToolbarItemsAsync();
    Toolbar.AddButton("从Excel导入用户", () =>
    {
        //TODO: 编写自定义代码
        return Task.CompletedTask;
    }, "file-import", Blazorise.Color.Secondary);
}

要使用AddButton扩展方法，需要为Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars命名空间添加using语句。

以下是文件的完整内容：

using System.Threading.Tasks;
using Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars;
using Volo.Abp.DependencyInjection;
using Volo.Abp.Identity.Blazor.Pages.Identity;

namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity
{
    [ExposeServices(typeof(UserManagement))]
    [Dependency(ReplaceServices = true)]
    public class CustomizedUserManagement : UserManagement
    {
        protected override async ValueTask SetToolbarItemsAsync()
        {
            await base.SetToolbarItemsAsync();
            Toolbar.AddButton("从Excel导入用户", () =>
            {
                //TODO: 编写自定义代码
                return Task.CompletedTask;
            }, "file-import", Blazorise.Color.Secondary);
        }
    }
}

运行应用程序时，您将看到按钮已添加到当前按钮列表旁。AddButton方法还有其他参数（例如使用Order设置按钮组件相对于其他组件的顺序）。

高级使用场景

虽然通常您会希望在页面工具栏添加按钮操作，但实际上可以添加任何类型的Blazor组件。

向页面工具栏添加Blazor组件

首先在项目中创建新的Blazor组件：

本示例中，我们在/Pages/Identity/文件夹下创建了MyToolbarComponent组件。

MyToolbarComponent.razor内容：

<Button Color="Color.Dark">点击我</Button>

我们将保持MyToolbarComponent.razor.cs文件为空。

然后将MyToolbarComponent添加到用户管理页面工具栏：

protected override async ValueTask SetToolbarItemsAsync()
{
    await base.SetToolbarItemsAsync();
    Toolbar.AddComponent<MyToolbarComponent>();
}

如果您的组件需要接收参数，可以使用arguments参数以键值对形式传递。

权限控制

如果您的按钮/组件需要基于权限/策略进行显示控制，可以将权限/策略名称作为RequiredPolicyName参数传递给AddButton和AddComponent方法。

添加页面工具栏贡献者

如果在向页面工具栏添加项时需要执行高级自定义逻辑，可以创建实现IPageToolbarContributor接口或继承PageToolbarContributor的类：

public class MyToolbarContributor : PageToolbarContributor
{
    public override Task ContributeAsync(PageToolbarContributionContext context)
    {
        context.Items.Insert(0, new PageToolbarItem(typeof(MyToolbarComponent)));
        return Task.CompletedTask;
    }
}

如果需要解析依赖项，可以使用context.ServiceProvider。

然后将您的类添加到Contributors列表：

protected override async ValueTask SetToolbarItemsAsync()
{
    await base.SetToolbarItemsAsync();
    Toolbar.Contributors.Add(new PageContributor());
}