AlertTagHelper - Backend Alerts

By Ziya Mollamahmut

• Install package

PM > Install-Package LazZiya.TagHelpers

• Add to _VÝewImports.cshtml:

@addTagHelper *, LazZiya.TagHelpers

In the backend add reference to LazZiya.TagHelpers.Alerts namespace, then use the alert extensions of TempData to send alerts from the backend to the UI.

using LazZiya.TagHelpers.Alerts;

public IndexModel : PageModel
{
    public void OnGet()
    {
        TempData.Success("A success message from the backend");
    }
}

On the front end, just add the alert tag where you want to show it:

<alert></alert>

The alert tag will not render if there is no alerts in the TempData. Backend alerts will be styled with reference to their types (primary, success, warning, ...etc.). Once the alert is displayed it will be removed from the TempData and will not render in the next request.

All front end alerts attributes can be used from the backend as well. Additionally, it is possible to send multiple alerts from the backend, The <alert></alert> html tag will render all of them in order.

Below two alert are sent from the backend:

TempData.Success("This is success alert message from c# backend!");
TempData.Warning("This is a warning alert message", "Alert Header", false);

When sending multiple alerts from the backend, you can group them in a slider in the fromt end.

<alert slide-alerts="true"></alert>

Optional, show icons in the alerts

<alert show-icons="true"></alert>

If you are using bootstrap5.0 or .net6.0 you can use render-mode to specify Bootstrap5

<alert render-mode="Bootstrap5"></alert>

By default the icons source is FontAwesome, other sources: Bootstrap and Bootstrap5.

TempData.Primary
TempData.Secondary
TempData.Success
TempData.Info
TempData.Warning
TempData.Danger
TempData.Light
TempData.Dark