Blazor UI 的实体操作扩展

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

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

设置方法

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

创建C#文件

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

我们将使用 Blazor 中的 组件重写系统 。创建继承自 UserManagement 组件的类后，我们将重写 SetEntityActionsAsync 方法并以编程方式添加实体操作。

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

protected override async ValueTask SetEntityActionsAsync()
{
    await base.SetEntityActionsAsync();
    var clickMeAction = new EntityAction()
    {
        Text = "点击我！",
        Clicked = (data) =>
        {
            //TODO: 编写您的自定义代码

            return Task.CompletedTask;
        }
    };
    
    EntityActions.Get<UserManagement>().Add(clickMeAction);
}

在 Clicked 属性中，您可以执行任何需要的操作。

以下是文件的完整内容：

using System.Threading.Tasks;
using Volo.Abp.AspNetCore.Components.Web.Extensibility.EntityActions;
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 SetEntityActionsAsync()
        {
            await base.SetEntityActionsAsync();
            var clickMeAction = new EntityAction()
            {
                Text = "点击我！",
                Clicked = (data) =>
                {
                    //TODO: 编写您的自定义代码

                    return Task.CompletedTask;
                }
            };
            EntityActions.Get<UserManagement>().Add(clickMeAction);
        }
    }
}

自定义实体操作

本节说明如何使用 EntityAction 类型中的属性来自定义实体操作。

以下是 EntityAction 中可使用的属性列表：

• Text：实体操作文本
• Clicked：操作的点击事件处理程序。您可以使用 data 参数访问 DataGrid 中的选中项
• Icon：操作的图标
• Color：操作的颜色
• Visible：基于数据网格项单独确定操作可见性的函数。您可以使操作对某些数据网格项不可见。也可以使用 data 参数访问 DataGrid 中的选中项
• Confirmation：操作的确认消息。您可以使用 data 参数访问 DataGrid 中的选中项

示例

var clickMeAction = new EntityAction()
{
    Text = "点击我！",
    Clicked = (data) =>
    {
        //TODO: 编写您的自定义代码

        return Task.CompletedTask;
    },
    Color = Blazorise.Color.Danger,
    Icon = "fas fa-hand-point-right",
    ConfirmationMessage = (data) => "确定要点击此操作吗？",
    Visible = (data) =>
    {
        //TODO: 编写您的自定义可见性操作
        //var selectedUser = data.As<IdentityUserDto>();
    }
};