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:

blazor-page-alert-example

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.

Contributors


Last updated: November 19, 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, 17: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