Tuesday, 22 March 2022

Tag helpers

 # Tag helpers

1. Tag Helpers are server side components. They are processed on the server to create and render HTML elements in Razor files.
2. There are many built-in Tag Helpers for common tasks such as generating links, creating forms, loading assets etc.
3. To make the built-in tag helpers available for all the views in our entire application, import the tag helpers using _ViewImports.cshtml file. To import tag helpers we use @addTagHelper directive.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

4. Generating Links using Tag Helpers
    manual:  <a href="/home/details/@employee.Id">View</a>
    using tag helper: @Html.ActionLink("View", "details", new { id = employee.Id })

    manual: <a href="/hom/details/5">View</a>
    using tag helper: @Url.Action("details", "home", new { id = employee.Id })

    manual: <a href="/Home/details/5">View</a>
    using tag helper: <a asp-controller="home" asp-action="details" asp-route-id="@employee.Id">View</a>

## Environment Tag Helpers

1. This example loads the non-minified bootstrap css file, if the application environment is "Development"

<environment include="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
</environment>

2. This example loads the minified bootstrap css file from the CDN (Content Delivery Network), if the application environment is "Staging" or "Production".

<environment include="Staging,Production">
    <link rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous">
</environment>

3. Like include on environment tag helper we also have exclude parameter
This example loads the minified bootstrap css file from the CDN (Content Delivery Network), if the application environment IS NOT "Development".

<environment exclude="Development">
    <link rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous">
</environment>

4. If the CDN is down or for some reason, our application is not able to reach the CDN, we want our application to fallback and load the minified bootstrap file (bootstrap.min.css) from our own application web server. Consider the following example

<environment include="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
</environment>

<environment exclude="Development">
    <link rel="stylesheet"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
            href="https://sstackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
            asp-fallback-test-class="sr-only" asp-fallback-test-property="position"
            asp-fallback-test-value="absolute"
            asp-suppress-fallback-integrity="true" />
</environment>
The following 3 attributes and their associated values are used to check if the CDN is down
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"


No comments:

Post a Comment

Search This Blog

Creating your first "Alexa" Skill

Index What is Alexa What is Alexa Skill? Why is it required when Alexa already equipped with voice assistant? Dev...