AlertTagHelper

Generate bootstrap 4 styled alerts from html side or c# backend side.

Sample use cases of AlertTagHelper, based on bootstrap's alerts.

Installation

Install via nuget package manager, 

            Install-Package LazZiya.TagHelpers
Then add LazZiya.TagHelpers to _ViewImports.cshtml 
    
            @addTagHelper *, LazZiya.TagHelpers

Samples

C# backend generated alerts

            
//Index.cshtml.cs

using LazZiya.TagHelpers.Alerts;

//....

TempData.Success("This is success alert message from c# backend!");

And on razor side we need to add one tag helper to render all alerts that is coming from backend:

Notice: LazZiya.TagHelpers versions earlier than v3.0.1 rquires ViewContext parameter to be passed.
Starting from v3.0.1 ViewContext is not required any more.


<!-- Index.cshtml -->
<!-- LazZiya.TagHelpers >= v3.0.1 -->
<alert></alert>

<!-- LazZiya.TagHelpers <= v3.0.0 -->
<!-- <alert view-context="ViewContext"></alert> -->

Result :

All alert methods:

            
TempData.Success("This is success alert message from c# backend!");
TempData.Primary("This is primary alert message from c# backend!");
TempData.Secondary("This is secondary alert message from c# backend!", "Helloo");
TempData.Info("This one has no close button!", "Info", false);
TempData.Warning("This is warning alert message from c# backend!");
TempData.Danger("This is danger alert message from c# backend!");
TempData.Light("This is light alert message from c# backend!");
TempData.Dark("This is dark alert message from c# backend!");

Razor side generated alerts

            
<alert-primary>This is primary alert message!</alert-primary>
<alert-secondary>This is secondary alert message!</alert-secondary>
<alert-success>This is success alert message!</alert-success>
<alert-info>This is info alert message!</alert-info>
<alert-warning>This is warning alert message!</alert-warning>
<alert-danger>This is danger alert message!</alert-danger>
<alert-light>This is light alert message!</alert-light>
<alert-dark>This is dark alert message!</alert-dark>

Result :

Add header

            
<alert-success alert-heading="Yuppeeee!">This is success alert message with header!</alert-success>

Result :

Use html message

            
<alert-info alert-heading="LazZiya.TagHelpers">
    Read more about <a href="http://ziyad.info/en/27-LazZiya_TagHelpers" class="alert-link">LazZiya.TagHelpers</a>.
    <hr/>
    <p class="mb-0">© Ziyad.info 2019</p>
</alert-info>

Result :

Remove close button

            
<alert-primary dismissable="false">This alert has no close button!</alert-primary>

Result :