Image Tag Helper & Responsive Menu – Session 42

Image Tag Helper & Responsive Menu - Session42

In this session of ASP.NET Core / 5.0 tutorial, we introduce Image Tag Helper and talk about its benefits, also we show you how you can create a Responsive Menu for your web application. In session 37, we use img Html tag in the Detail View, also we created a custom Html Helper that render img tag. In this session, we review Tag Helper for img Html tag and show you the way that you can use it.

Download image just when its content changed with Image Tag Helper

When we use img html tag in the Views, browsers cache the images of that View during first page load. Then, next time that we call that view, browser use the cached image to increase page load and reduce the Internet consumption. The period that each browser keep the cache data depends on the browser settings. Hence, during that period, if the content of the image is changed, the browser still displays previous content. Thus, we can solving this issue by clearing the browser cache or we can disable browser caching which is not recommended. Also, we can press Ctrl+F5 to tell the browser to download the content from the server.

Yet, we can solve this issue by adding asp-append-version tag helper to the image tag and set its value to True. This tag, add a Hashed value to each image as the version of the image. Thus, if the content of the image is changed this hashed value is updated and browser can realize that the image content is changed. As a result, browser just download the image from the server when its content change.

You can see how we can use Tag Helper in Image Tag in Detail View.

Responsive Menu in ASP.NET Core / 5.0 MVC Web Application

In this session, we show you how you can use Bootstrap classes to create a responsive menu for your web application. Worth mentioning that, if you decide to have the menu in all the views, we recommended creating the menu in Layout View. Also, we can use asp-controller, asp-action and asp-route for routing in the Anchor Elements.

As you can see in above code, we use nav Html tag and Bootstrap classes for our responsive nav bar menu inside _MainLayout.cshtml.

If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Moreover, you can have access to list of all sessions HERE and you can download this session source code from our GitHub.

You can download this Session Slides form HERE.

0.00 avg. rating (0% score) - 0 votes


0 0 votes
Article Rating

Inline Feedbacks
View all comments