در این جلسه از آموزش ASP.NET Core / 5.0 قصد داریم تا به معرفی Image Tag Helper بپردازیم و برای وب‌اپلیکشن خود یک منوی رسپانسیو ایجاد نماییم. در جلسه 37 در نمای Detail از تگ Img استفاده نمودیم و همچنین توانستیم یک Html Helper شخصی‌سازی شده برای این تگ ایجاد نماییم. در این جلسه به بررسی استفاده از Tag Helper در تگ img اشاره خواهیم نمود و نحوه استفاده از آنرا شرح خواهیم داد.
دانلود تصاویر توسط مرورگر در صورت تغییر محوای تصویر با کمک Image Tag Helper
در صورت استفاده از تگ img در نماهای وب‌اپلیکشن، تصاویر پس از اولین بارگزاری در حافظه کش مرورگر ذخیره میگردد و در بارگزاری های بعدی آن صفحه یا نما، مرورگر از تصاویر درون حافظه جهت افزایش سرعت بارگزاری نما و کاهش مصرف اینترنت استفاده میکند. مدت زمان نگهداری تصاویر در حافظه کش بستگی به تنظیمات مرورگر خواهد داشت. پس ممکن است در صورت تغییر محتوای تصویر، ما همچنان تصویر قبلی را مشاهده نماییم و این موصوع تا زمانی که حافظه کش مرورگر منقضی گردد و یا ما حافظه کش مرورگر را پاک نماییم ادامه خواهد داشت. البته برای هر صفحه خاص، میتوان با زدن کلیدهای Ctrl+F5 به مرورگر این پیغام را بدهیم که کل صفحه را به جای حافظه ی کش از سرور واکشی نماید.
البته یک راه حرفه‌ایی دیگر برای رفع این مشکل استفاده از تگ هلپر asp-append-version میباشد. با اضافه نمودن این Tag Helper به تگ image و دادن مقدار True به آن، هر تصویر حاوی یک کد Hash خواهد بود که نسخه تصویر را نشان میدهد. در صورت تغییر محتوای تصویر مورد نظر، کد ورژن تصویر تغییر خواهد کرد. این تغییر نسخه تصویر به مرورگر این امکان را میدهد که با مقایسه کدهای نسخه تصویر، تشخیص دهد که محتوای تصویر تغییر نموده یا خیر. در نتیجه مرورگر در صورت تشیص این موضوع اقدام به واکشی آن تصویر خاص از سرور خواهد نمود. در این حالت، کاربران وب‌اپلیکیشن و یا وب‌سایت ما همیشه تصاویر بروز را مشاهده خواهند کرد.
@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>کد فوق نحوه استفاده از Image Tag Helper را در نمای Detail نشان میدهد.
نحوه ی ایجاد منوی رسپانسیو در ASP.NET 5.0 / Core MVC
در ادامه قصد داریم تا نحوه‌ی ایجاد یک منو رسپانسیو برای کل وب‌اپلیکشن خود را توسط کلاسهای Bootstrap ارائه دهیم. توجه داشته باشید که اگر بخواهیم منو در تمامی نماها قابل مشاهده باشد، بهتر است آنرا در Layout View پیاده سازی نماییم. همچنین برای مسیردهی به کنترلرها و اکشن‌متد‌های مختلف میتوانیم از تگ‌هلپرهای asp-controller و asp-action و در صورت نیاز asp-route استفاده نماییم.
<!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>همانگونه که در کد فوق مشاهده میکنید با استفاده از تگ nav و کلاسهای Bootstrap توانستیم یک منوی رسپانسیو در _MainLayout ایجاد نماییم که در تمامی نماها قابل مشاهده خواهد بود.
در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید. ضمنا لیست کامل جلسات در این قسمت در دسترس شما میباشد و سورس کد این جلسه را میتوانید از GitHub ما دانلود نمایید.
دانلود اسلایدهای آموزشی این جلسه از اینجا