项目

Blazor UI:消息服务

UI消息服务用于以模态对话框的形式向用户展示美观的消息提示。

快速示例

只需在页面或组件中注入IUiMessageService,然后调用Success方法即可显示成功消息。

namespace MyProject.Blazor.Pages
{
    public partial class Index
    {
        private readonly IUiMessageService _uiMessageService;

        public Index(IUiMessageService uiMessageService)
        {
            _uiMessageService = uiMessageService;
        }

        public async Task SaveAsync()
        {
            await _uiMessageService.Success(
                "您的修改已成功保存!",
                "操作成功");
        }
    }
}

这将在UI上显示一个对话框:

blazor-message-success

如果您的页面或组件继承自AbpComponentBase类,则可以直接使用预注入的Message属性来访问IUiMessageService

namespace MyProject.Blazor.Pages
{
    public partial class Index : AbpComponentBase
    {
        public async Task SaveAsync()
        {
            await Message.Success(
                "您的修改已成功保存!",
                "操作成功");
        }
    }
}

通常建议在.razor文件中使用@inherits AbpComponentBase来继承基类,而不是在代码后置文件中继承。

信息类消息

提供四种类型的信息消息方法:

  • Info(...) - 信息提示
  • Success(...) - 成功提示
  • Warn(...) - 警告提示
  • Error(...) - 错误提示

所有这些方法都接收三个参数:

  • message:要显示的消息内容(字符串)
  • title:可选的标题(字符串)
  • options:可选的配置选项(Action委托)

示例:显示错误消息

_uiMessageService.Error('您的信用卡号码无效!');

blazor-message-success

确认消息

IUiMessageService.Confirm(...)方法可用于获取用户的确认。

示例

使用以下代码获取用户确认结果:

public async Task DeleteAsync()
{
    var confirmed = await _uiMessageService.Confirm("确定要删除'admin'角色吗?");
    if(confirmed)
    {
        //在此处删除'admin'角色
    }
}

生成的UI将如下所示:

blazor-message-confirm

如果用户点击按钮,Confirm方法的返回值将为true

配置

如果您需要针对特定消息更改默认选项,可以轻松实现。如下所示,向options参数提供一个action委托:

await _uiMessageService.Success(
    "您的修改已成功保存!",
    "操作成功",
    (options) =>
    {
        options.MessageIcon = "msg-icon-new";
        options.CenterMessage = false;
    });

可通过action参数修改的选项列表:

  • CenterMessage:(默认:true)如果为true,消息对话框将在屏幕中央显示
  • ShowMessageIcon:(默认:true)如果为true,消息对话框将显示当前消息类型的大图标
  • MessageIcon:覆盖内置的消息图标
  • OkButtonText:确定按钮的自定义文本
  • OkButtonIcon:确定按钮的自定义图标
  • ConfirmButtonText:确认按钮的自定义文本
  • ConfirmButtonIcon:确认按钮的自定义图标
  • CancelButtonText:取消按钮的自定义文本
  • CancelButtonIcon:取消按钮的自定义图标

"确认"、"取消"和"是"等文本会根据当前语言自动进行本地化。

在本文档中