AlertTagHelper
Generate bootstrap 4 styled alerts from html side or c# backend side.
Sample use cases of AlertTagHelper, based on bootstrap's alerts.
- Read the related article here.
- Github repository : LazZiya.TagHelpers
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 :
This is success 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 :
This is primary alert message from html side!
This is secondary alert message from html side!
This is success alert message from html side!
This is info alert message from html side!
This is warning alert message from html side!
This is danger alert message from html side!
This is light alert message from html side!
This is dark alert message from html side!
Add header
<alert-success alert-heading="Yuppeeee!">This is success alert message with header!</alert-success>
Result :
Yuppeeee!
This is success alert message with header!
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 :
This alert has no close button!