HTML Tag Helpers in ASP.NET Core
Hello friends, I hope you all are doing great. In today's lecture, we will have a look at HTML Tag Helpers in ASP.NET Core. It's our 12th tutorial in ASP.NET Core series. If you have worked on ASP.NET then you must have been familiar with HTML Helpers. Tag Helpers are quite similar to HTML Helpers with slightest difference in its syntax.
Tag Helpers are new in ASP.NET Core and were not part of ASP.NET. So, let's first understand what are Tag Helpers & why we need to use them and at the end we will also discuss few common tag helpers in detail. So, let's get started with HTML Tag Helpers in ASP.NET Core:
HTML Tag Helpers in ASP.NET Core
- HTML Tag Helpers in ASP.NET Core are server side components and thus executed on the server to create HTML elements of the webpage.
- ASP.NET Core has a lot of built-in Tag Helpers for links, images, forms etc. available in Microsoft.AspNetCore.Mvc.TagHelpers assembly and we need to use @AddTagHelper directive to include them in Views.
- As we want to use these Tag Helpers in all of our Razor Views, so I am going to include this TagHelper assembly in _ViewImports.cshtml file, which we have created in 10th lecture and has all the assemblies importing statements.
- AS you can see in the figure on right side, I have imported Tag Helper assembly using @AddTagHelper directive and it has two parameters.
- I have added * in first parameter, which means I want to import all the Tag Helpers available in TagHelper assembly.
So, after adding this statement, we can now use Tag Helpers in our project. Let's have a look at few commonly used Tag Helpers:
HTML Tag Helpers for Hyperlinks
- In our Bootstrap lecture, we have added three <a> elements in our Info View file but haven't provided the href value.
- So, now let's use Tag Helpers to provide link value for href parameter of <a> tag, as shown in below figure:
- I have marked these 3 links with red box and you can see that I have used 3 link Tag Helpers i.e.
- asp-controller: I have provided the controllers name i.e. home.
- asp-action: I have provided the action method name i.e. Index for first link & Info for second.
- asp-route-id: I have provided the third parameter in it, while id is the name of the parameter.
- All Tag Helpers start with asp- prefix and are embedded in HTML tags as simple parameters.
- Now let's run this app and open this Info link and have a look at the HTML source, as shown in the below figure:
- I have encircled the output links with green box and you can see that we don't have any tag helpers in our output file.
- Instead, these tag helpers generated the HTML code of href parameter and we can see that the first link is of Homepage and the second link is of /Home/Info/3.
- Now, you must be wondering that why we need to use Tag Helpers, as we can easily add the hard coded links.
- The main benefit is, in future if you change your Controllers' names then your links will be changed and if you have placed them hard coded then you have to manually change them one by one.
- But with Tag Helpers, there's no need to change as they will get the update name of Controller or action method and will provide the corrected link.
- Moreover, Tag Helpers are inline with HTML unlike HTML Helpers and are thus easy to use.
HTML Tag Helper for Images
- If we change any existing image on our server without changing its link, the browser will keep on showing the old image, because of Browser Cache.
- So, in order to avoid that we need to use a builtin HTML Tag Helper called asp-append-version in <img> tag, as shown in below figure:
- So, now if the image content is changed on the server then it will make the new image available to the end user.
- If you check the HTML code of your output page, then you will find a unique string appended to your image link, which is calculated using the image content.
- So, if image content is changed then this string will also be calculated again and thus browser will know that there's new content in the image and will load it again from the server, instead of providing it from its cache.
HTML Tag Helper for Environments
- Using Environment Tag Helper, we can execute different content of the webpage, based on application environment.
- We have studied Environment variable in 5th lecture and have seen that we set this variable in lauchSettings.json file.
- In our Development Environment, we need to use non-minified versions of all of our third part client side libraries i.e. Bootstrap, Jquery, Javascript etc.
- But in Staging or Production Environment, we should use minified versions and for better performance, we should get them from their CDN networks.
- So, let's make these changes using Tag Helpers, open your _Layout.cshtml file, placed in Views > Shared folder.
- We have linked Bootstrap file with our project here, so let's add some code in it, as shown in below figure:
- You can see in above figure that in green box, I have placed the link to non-minified version of Bootstrap inside Environment tag helper and I have included Development Environment.
- So, this link will be used only when we are working in Development Environment.
- In the red box, I have excluded Development Environment, so this block will work for all Environments except Development.
- Inside this block, I have placed the Bootstrap CDN link, which you can get from its official site.
- But what if, this external CDN is link is down for some reason, then your server won't be able to fetch those files and thus your site won't work perfectly.
- In such cases, we should fall back to our own server and get the minified version of Bootstrap.
- So, let's add few more Tag Helpers to achieve that, as shown in below figure:
- As you can see in above figure, I have added five tag helpers in <link> tag.
- So if our application is unable to get the CDN link, then it will fallback to our own server & get the minified version of Bootstrap.
- These tag helpers are injecting a JavaScript code to check, whether we got the CDN link or not.
- As we have added this code in our Razor Layout file so it will be applied to all of our Views. ( We will add more Views in coming lectures )
So, that was all for today. I hope you have enjoyed today's lecture. In next tutorial, we will have a look at How to design Bootstrap navigation Menu in ASP.NET Core. Till then take care & have fun !!!