TagHelperSamples

Alert Tag Helper

contributed by Rick Strahl

This tag helper combines the Bootstrap alert box with font-awesome icons to provide a less verbose alert/error display. Use plain text or text retrieved from your model to display content. If the message and header attributes are empty nothing is displayed, otherwise the alert box shows. Messages are displayed in the bootstrap alert themes and display with an appropriate icon that you can optionally override.

Default Error

Code:

<alert message="@Model.Message"></alert>

With Header

Code:

<alert header="@Model.Header" message="@Model.Message">
</alert>

Icon Modes

Code:

<alert message="Payment has been processed." icon="success">
</alert>
<alert message="Customer information has been saved." icon="info">
</alert>
<alert message="Your account has expired." icon="danger">
</alert>
<alert message="Unable to save customer info." icon="warning">
</alert>

Dismissable Alert

Code:

<alert message="Click on the  button to send a test email."
       dismissible="true"
       icon="info">
</alert>

Html Text in Message

Code:

<alert message="Click on the <b>Test</b> button to send a test email."
       message-as-html="true"
       icon="info" dismissible="true">
</alert>

You can use the message-as-html and header-as-html attributes to specify that the text should not be HTML encoded as it would be otherwise. If you bind from a model make sure you use @Html.RawHtml() into the `header` or `message` attributes and as always be sure this is safe and won't allow for XSS attacks.

No Icon

Code:

<alert message="@Model.Message"> icon="none" alert-class="info"</alert>