Blazor UI: Page Alerts

It is common to show error, warning or information alerts to inform the user. An example Service Interruption alert is shown below:

Quick Example

Simply inject IAlertManager to your page or component and call the Alerts.Warning method to show a success message.

namespace MyProject.Blazor.Pages
{
    public partial class Index
    {
        private readonly IAlertManager _alertManager;

        public Index(IAlertManager alertManager)
        {
            this._alertManager = alertManager;
        }

        protected override void OnInitialized()
        {
            _alertManager.Alerts.Warning(
                "We will have a service interruption between 02:00 AM and 04:00 AM at October 23, 2023!",
                "Service Interruption");
            base.OnInitialized();
        }
    }
}

If you inherit your page or component from the AbpComponentBase class, you can use the Alerts property to add alerts.

namespace MyProject.Blazor.Pages
{
    public partial class Index : AbpComponentBase
    {
        protected override void OnInitialized()
        {
            Alerts.Warning(
                "We will have a service interruption between 02:00 AM and 04:00 AM at October 23, 2023!",
                "Service Interruption");
            base.OnInitialized();
        }
    }
}

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

Alert Types

Warning is used to show a warning alert. Other common methods are Info, Danger and Success.

Beside the standard methods, you can use the Alerts.Add method by passing an AlertType enum with one of these values: Default, Primary, Secondary, Success, Danger, Warning, Info, Light, Dark.

Dismissible

All alert methods gets an optional dismissible parameter. Default value is true which makes the alert box dismissible. Set it to false to create a sticky alert box.