# 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"
Tuesday, 22 March 2022
Tag helpers
Subscribe to:
Post Comments (Atom)
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...
About Me
Menu
-
Index What is Alexa What is Alexa Skill? Why is it required when Alexa already equipped with voice assistant? Dev...
-
Adding Azure AD B2C to React Native App Register your app in Azure active directory 1. Go to azure ad b2c, app registratio...
-
# Project file 1. .net Core project file no longer contains file or folder reference - all files and folder present within the root fol...
No comments:
Post a Comment