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

ASP.NET Core UI 的实体操作扩展

简介

实体操作扩展系统允许您为实体的操作菜单添加新操作。如下图所示，我们在用户管理页面中添加了一个点击我操作：

用户操作扩展-点击我

您可以通过编写自定义代码执行任何操作（打开模态框、发起HTTP API调用、跳转到其他页面等）。在代码中您可以访问当前实体信息。

设置方法

本示例将为身份模块的用户管理页面添加“点击我！”操作并执行JavaScript代码。

创建JavaScript文件

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

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

以下是该JavaScript文件的内容：

var clickMeAction = {
    text: '点击我！',
    action: function(data) {
        //TODO: 编写您的自定义代码
        alert(data.record.userName);
    }
};

abp.ui.extensions.entityActions
    .get('identity.user')
    .addContributor(function(actionList) {
        actionList.addTail(clickMeAction);
    });

在action函数中，您可以执行任何需要的操作。详细用法请参阅API章节。

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

接下来需要将此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模块采用的通用约定。

至此全部完成。运行应用程序即可查看效果。

API

本章节详细说明abp.ui.extensions.entityActions JavaScript API。

abp.ui.extensions.entityActions.get(entityName)

此方法用于访问特定模块的实体操作。接收一个参数：

  • entityName: 相关模块定义的实体名称。

abp.ui.extensions.entityActions.get(entityName).actions

actions属性用于获取实体已定义操作的双向链表。所有贡献者按顺序执行以准备最终操作列表。模块通常调用此方法在网格中显示操作。如果您正在构建自己的可扩展UI，也可以使用此属性。

abp.ui.extensions.entityActions.get(entityName).addContributor(contributeCallback)

addContributor方法涵盖所有场景，例如您需要在列表的不同位置添加操作、修改或移除现有操作项。接收以下参数：

  • contributeCallback: 创建操作列表时调用的回调函数。您可以在此回调方法中自由修改操作列表。

示例

var clickMe2Action = {
    text: '点击我 2！',
    icon: 'fas fa-hand-point-right',
    action: function(data) {
        //TODO: 编写您的自定义代码
        alert(data.record.userName);
    }
};

abp.ui.extensions.entityActions
    .get('identity.user')
    .addContributor(function(actionList) {
        // 从actionList中移除首项
        actionList.dropHead();
        
        // 将新项添加到actionList首部
        actionList.addHead(clickMe2Action);
    });

actionList是链表。您可以使用其方法根据需要构建列操作列表。

在本文档中