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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@using DailyCostWebApplication.CustomHtmlHelpers @model CostDetailViewModel @{ //Layout = null; ViewBag.Title = "Cost Detail"; } <div class="row"> <div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-12"> <div class="card"> <div class="card-header"> @Model.PageTitle </div> <img src="@Model.CostData.PhotoPath" alt="@Model.CostData.AltText" class="card-img-top" asp-append-version="true"/> <div class="card-body"> <p class="card-text">ID: @Model.CostData.ID</p> <p class="card-text">Amount: @Model.CostData.Amount</p> <p class="card-text">Category: @Model.CostData.Category</p> <p class="card-text">Comment: @Model.CostData.Comment</p> <a href="#" class="btn btn-primary">Cost List</a> </div> </div> </div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/lib/jquery/jquery.js"></script> <script src="~/lib/bootstrap/js/bootstrap.js"></script> <title>@ViewBag.Title</title> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" asp-controller="home" asp-action="index"> <img src="~/images/cost.png" alt="" width="82" height="51"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" aria-current="page" asp-controller="home" asp-action="index">Home</a> </li> <li class="nav-item"> <a class="nav-link" asp-controller="cost" asp-action="list">Cost List</a> </li> </ul> </div> </div> </nav> @RenderBody() </div> @*@RenderSection("Scripts", required: false)*@ @if (IsSectionDefined("Scripts")) { @RenderSection("Scripts", required: true) } </body> </html> |
As you can see in above code, we use nav Html tag and Bootstrap classes for our responsive nav bar menu inside _MainLayout.cshtml.