ASP.NET Core MVC / Razor Pages UI：JavaScript 消息 API

消息API用于以模态对话框的形式向用户展示美观的提示信息。该API由ABP框架提供抽象层，默认基于SweetAlert库实现。

快速示例

使用 abp.message.success(...) 函数显示成功消息：

abp.message.success('您的修改已成功保存！', '操作成功');

这将在界面上显示如下对话框：

信息类消息

提供四种类型的信息提示函数：

• abp.message.info(...) - 信息提示
• abp.message.success(...) - 成功提示
• abp.message.warn(...) - 警告提示
• abp.message.error(...) - 错误提示

所有方法均接受两个参数：

• message：要显示的消息内容（字符串）
• title：可选的标题（字符串）

示例：显示错误消息

abp.message.error('您的信用卡号码无效！');

确认对话框

abp.message.confirm(...) 函数可用于获取用户确认。

示例

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

abp.message.confirm('确定要删除"admin"角色吗？')
.then(function(confirmed){
  if(confirmed){
    console.log('待办：正在删除角色...');
  }
});

生成的界面将如下所示：

如果用户点击了是按钮，then回调函数中的confirmed参数将为true。

"确定吗？"是默认标题（根据当前语言本地化），您可以覆盖它。

返回值

abp.message.confirm(...)函数返回一个Promise对象，因此您可以像上面示例那样链式调用then回调。

参数说明

abp.message.confirm(...)函数接受以下参数：

• message：向用户显示的消息（字符串）
• titleOrCallback（可选）：标题字符串或回调函数。如果传入字符串，则作为标题显示；如果传入回调函数（接受布尔参数），则直接调用该函数并传入结果
• callback（可选）：如果第二个参数传入了标题，可以将回调函数作为第三个参数传入

使用回调函数是替代then回调的另一种方式。

示例：提供所有参数并通过回调函数获取结果

abp.message.confirm(
  '确定要删除"admin"角色吗？',
  '请谨慎操作！',
  function(confirmed){
    if(confirmed){
      console.log('待办：正在删除角色...');
    }
  });

输入提示框

abp.message.prompt(...)可用于获取用户输入的文本（或其他类型输入）。

简单用法：

abp.message.prompt('请输入姓名：', (value)=> console.log('输入的姓名：', value));

示例（then方式）：

let options = { title: "修改姓名", icon: "info", inputValue: "张三"};
abp.message.prompt('请输入新姓名以修改您的名称', options)
  .then(function(value){
    if (value) {
      console.log('输入的姓名：', value);
    }
  });

示例（await方式）：

(async function(){
  let options = { title: "邮箱注册", icon: "info", input: "email"};
  const email = await abp.message.prompt('请输入您的邮箱：', options);
  if (email) {
    console.log('输入的邮箱：', email);
  }
})();

返回值

abp.message.prompt(...)函数返回一个Promise，解析结果为用户输入的值（字符串），如果对话框被取消/关闭则返回null。

参数说明

abp.message.prompt(...)函数接受以下参数：

• message：向用户显示的消息（字符串）
• titleOrOptionsOrCallback（可选）：
  • 可以是字符串标题，或
  • 包含SweetAlert选项的对象（如input、inputAttributes、inputPlaceholder），或
  • 接收结果值（或null）的回调函数
• callback（可选）：如果第二个参数传入了标题，可以将回调函数作为第三个参数传入

使用回调函数是替代返回Promise的另一种方式。

SweetAlert 配置

消息API默认使用SweetAlert库实现。如需修改其配置，可以在abp.libs.sweetAlert.config对象中设置选项。默认配置对象如下：

{
    'default': {
    },
    info: {
        icon: 'info'
    },
    success: {
        icon: 'success'
    },
    warn: {
        icon: 'warning'
    },
    error: {
        icon: 'error'
    },
    confirm: {
        icon: 'warning',
        title: '确定吗？',
        buttons: ['取消', '是']
    }
}

"确定吗？"、"取消"和"是"文本会根据当前语言自动本地化。

例如，如果您想设置warn类型的图标，可以这样设置：

abp.libs.sweetAlert.config.warn.icon = 'error';

有关所有配置选项，请参阅 SweetAlert文档 。