抠丁客 抠丁客
项目
编辑 (2025/12/24)

ASP.NET Core UI 页面工具栏扩展

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

页面工具栏按钮

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

配置方法

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

向用户管理页面添加新按钮

在Web模块类的ConfigureServices方法中编写以下代码：

Configure<AbpPageToolbarOptions>(options =>
{
    options.Configure<Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel>(toolbar =>
    {
        toolbar.AddButton(
            LocalizableString.Create<MyProjectNameResource>("ImportFromExcel"),
            icon: "file-import",
            id: "ImportUsersFromExcel",
            type: AbpButtonType.Secondary
        );
    });
});

AddButton是添加按钮组件的快捷方法。注意需要在本地化字典（json文件）中添加ImportFromExcel以实现文本本地化。

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

创建JavaScript文件

接下来我们可以在客户端处理新按钮的点击事件。首先在解决方案中添加新的JavaScript文件。我们在.Web项目的/Pages/Identity/Users文件夹内添加：

解决方案中的用户操作扩展

JavaScript文件内容如下：

$(function () {
    $('#ImportUsersFromExcel').click(function (e) {
        e.preventDefault();
        alert('TODO: 从Excel导入用户');
    });
});

在click事件中，您可以执行任何需要的操作。

将文件添加到用户管理页面

接下来需要将此JavaScript文件添加到用户管理页面。您可以利用打包与压缩系统的功能。

在模块类的ConfigureServices方法中编写以下代码：

Configure<AbpBundlingOptions>(options =>
{
    options.ScriptBundles.Configure(
        typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName,
        bundleConfiguration =>
        {
            bundleConfiguration.AddFiles(
                "/Pages/Identity/Users/my-user-extensions.js"
            );
        });
});

此配置将my-user-extensions.js添加到身份认证模块的用户管理页面。typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName是用户管理页面中的包名称。这是所有ABP模块使用的通用约定。

高级使用场景

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

向页面工具栏添加视图组件

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

页面工具栏自定义组件

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

MyToolbarItemViewComponent.cs内容：

public class MyToolbarItemViewComponent : AbpViewComponent
{
    public IViewComponentResult Invoke()
    {
        return View("~/Pages/Identity/Users/MyToolbarItem/Default.cshtml");
    }
}

Default.cshtml内容：

<span>
    <button type="button" class="btn btn-dark">点击我</button>
</span>
  • .cshtml文件可以包含任意类型的组件，这是典型的视图组件
  • 如有需要，MyToolbarItemViewComponent可以注入并使用任何服务

然后将MyToolbarItemViewComponent添加到用户管理页面：

Configure<AbpPageToolbarOptions>(options =>
{
    options.Configure<Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel>(
        toolbar =>
        {
            toolbar.AddComponent<MyToolbarItemViewComponent>();
        }
    );
});
  • 如果组件接受参数（在Invoke/InvokeAsync方法中），可以将参数作为匿名对象传递给AddComponent方法

权限控制

如果您的按钮/组件需要基于权限/策略进行访问控制，可以向AddButton和AddComponent方法传递requiredPolicyName参数来指定权限策略名称。

添加页面工具栏贡献者

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

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

        return Task.CompletedTask;
    }
}
  • 如有需要，可以使用context.ServiceProvider解析依赖项

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

Configure<AbpPageToolbarOptions>(options =>
{
    options.Configure<Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel>(
        toolbar =>
        {
            toolbar.Contributors.Add(new MyToolbarContributor());
        }
    );
});
在本文档中