Blazor UI: Notification Service

IUiNotificationService is used to show toast style notifications on the user interface.

Quick Example

Simply inject IUiNotificationService to your page or component and call the Success method to show a success message.

namespace MyProject.Blazor.Pages
{
    public partial class Index
    {
        private readonly IUiNotificationService _uiNotificationService;

        public Index(IUiNotificationService uiNotificationService)
        {
            _uiNotificationService = uiNotificationService;
        }

        public async Task DeleteAsync()
        {
            await _uiNotificationService.Success(
                "The product 'Acme Atom Re-Arranger' has been successfully deleted."
            );
        }
    }
}

blazor-notification-sucess

If you inherit your page or component from the AbpComponentBase class, you can use the the Notify property to access the IUiNotificationService as a pre-injected property.

namespace MyProject.Blazor.Pages
{
    public partial class Index : AbpComponentBase
    {
        public async Task DeleteAsync()
        {
            await Notify.Success(
                "The product 'Acme Atom Re-Arranger' has been successfully deleted."
            );
        }
    }
}

You typically use @inherits AbpComponentBase in the .razor file to inherit from the AbpComponentBase, instead of inheriting in the code behind file.

Notification Types

There are four types of pre-defined notifications;

  • Info(...)
  • Success(...)
  • Warn(...)
  • Error(...)

All of the methods above gets the following parameters;

  • message: The message (string) to be shown.
  • title: An optional (string) title.
  • options: An optional (Action) to configure notification options.

Configuration

Per Notification

It is easy to change default notification options if you like to customize it per notification. Provide an action to the options parameter as shown below:

await UiNotificationService.Success(
    "The product 'Acme Atom Re-Arranger' has been successfully deleted.",
    options: (options) =>
    {
        options.OkButtonText =
            LocalizableString.Create<MyProjectNameResource>("CustomOK");
    });

Available Options

Here, the list of all available options;

  • OkButtonText : Custom text for the OK button.
  • OkButtonIcon : Custom icon for the OK button

Global Configuration

You can also configure global notification options to control the it in a single point. Configure the UiNotificationOptions options class in the ConfigureServices of your module:

Configure<UiNotificationOptions>(options =>
{
    options.OkButtonText = LocalizableString.Create<MyProjectNameResource>("CustomOK");
});

The same options are available here.

Per notification configuration overrides the default values.

Contributors


Last updated: November 17, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .Net and ABP Framework

17 Oct, 20:00
Online
Register Now
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More