Quartz 5

7. Image Tag Helpers

4 min read

হ্যালো হাসিব! এই লেকচারটি মূলত ওয়েবের একটি খুব কমন সমস্যা—Image Caching—সমাধান করার ওপর ফোকাস করেছে। যখন আমরা ওয়েবসাইটের কোনো ছবি (যেমন: লোগো বা ব্যানার) আপডেট করি, কিন্তু ব্রাউজারে পুরনো ছবিটাই দেখায়, তখন এই সমস্যার সমাধান হিসেবে asp-append-version Tag Helper ব্যবহার করা হয়। একে ওয়েব ডেভেলপমেন্টের ভাষায় “Cache Busting” বলা হয়। লেকচারের শেষে UI-তে একটু ছোট চেঞ্জও করা হয়েছে।

চলো লেকচারটির একটি কুইক সামারি দেখে নিই।

📌 Quick Summary for Revision

  • The Problem: ব্রাউজার ছবি ক্যাশ (Cache) করে রাখে। সার্ভারে ছবি আপডেট হলেও ব্রাউজার পুরনো ছবিই দেখাতে থাকে, কারণ ছবির ফাইলের নাম (URL) চেঞ্জ হয়নি।
  • The Solution: <img> ট্যাগে asp-append-version="true" ব্যবহার করা।
  • How it Works: ASP.NET Core রানটাইমে ছবিটির কন্টেন্টের ওপর ভিত্তি করে একটি SHA-512 Hash জেনারেট করে এবং সেটি URL-এর শেষে ?v=... হিসেবে জুড়ে দেয় (যেমন: logo.png?v=abc123xyz)।
  • Cache Busting: যদি ছবির কন্টেন্ট সামান্যও পরিবর্তন হয়, তবে হ্যাশ ভ্যালু চেঞ্জ হয়ে যাবে। ফলে URL চেঞ্জ হবে এবং ব্রাউজার বাধ্য হয়ে সার্ভার থেকে নতুন ছবিটি ডাউনলোড করবে।
  • UI Update: Create.cshtml ফর্মে w-50 ক্লাসের বদলে center-box ক্লাস ব্যবহার করা হয়েছে, যাতে ফর্মটি স্ক্রিনের মাঝখানে থাকে এবং রেসপনসিভ হয়।

🚀 Comprehensive Breakdown & The “Why”

নিচে লেকচারের প্রতিটি কনসেপ্ট বিস্তারিত এবং কারণসহ এক্সপ্লেইন করা হলো:

১. Image Caching প্রবলেম [Priority: 10/10]

The “Why”: ওয়েবসাইটের স্পিড বাড়ানোর জন্য ব্রাউজারগুলো (Chrome, Firefox ইত্যাদি) স্ট্যাটিক ফাইল যেমন ইমেজ, CSS, JS ডাউনলোড করে নিজেদের মেমোরিতে সেভ করে রাখে। পরবর্তীতে পেজ রিলোড দিলে ব্রাউজার সার্ভারে রিকোয়েস্ট না পাঠিয়ে মেমোরি থেকেই ছবিটা দেখায়। সমস্যা হলো, আমরা যদি সার্ভারে logo.png রিমুভ করে নতুন ডিজাইনের আরেকটি logo.png আপলোড করি, ব্রাউজার মনে করবে, “আরে, আমার কাছে তো logo.png আগে থেকেই আছে!” তাই সে পুরনো ছবিটাই দেখাতে থাকবে। ক্লায়েন্ট বা ইউজাররা তখন অভিযোগ করবে যে তারা আপডেট দেখতে পাচ্ছে না।

২. asp-append-version Tag Helper [Priority: 10/10]

The “Why”: এই ক্যাশিং সমস্যা সমাধানের উপায় হলো URL চেঞ্জ করা। কিন্তু ম্যানুয়ালি ফাইলের নাম চেঞ্জ করা (যেমন logo_v2.png) খুব বিরক্তিকর কাজ। asp-append-version="true" এই কাজটাই ডাইনামিক্যালি করে দেয়। এটি ছবির সাইজ বা কন্টেন্ট রিড করে একটি ইউনিক “হ্যাশ” বানায়।

Implementation (_Layout.cshtml):

<img src="~/logo.png" width="25" />
 
<img src="~/logo.png" asp-append-version="true" width="25" />

Browser Output (Inspect Element করলে যা দেখা যায়):

<img src="/logo.png?v=f2a3b9c8d7e6f5a4..." width="25" />
  • ম্যাজিকটা হলো: যতক্ষণ ছবি সেম থাকবে, হ্যাশ সেম থাকবে, ব্রাউজার ক্যাশ থেকে ছবি দেখাবে। যেই মুহূর্তে তুমি নতুন ছবি ওভাররাইট করবে, ফ্রেমওয়ার্ক নতুন হ্যাশ জেনারেট করবে। URL চেঞ্জ হওয়ায় ব্রাউজার নতুন ছবি ডাউনলোড করতে বাধ্য হবে।

৩. UI Enhancement (Center Box) [Priority: 5/10]

The “Why”: লেকচারের শেষে Create.cshtml এর ফর্মটি স্ক্রিনের মাঝখানে আনার জন্য একটি কাস্টম CSS ক্লাস center-box ব্যবহার করা হয়েছে। এই ক্লাসটিতে width এবং margin: auto দেওয়া আছে।

Implementation (Create.cshtml):

<div class="center-box">
    <form asp-controller="Persons" asp-action="Create" method="post">
        </form>
</div>

🆕 .NET 10 & Modern Approaches

asp-append-version ফিচারটি .NET 10-এ একদম হুবহু একইভাবে কাজ করে এবং এটি স্ট্যাটিক ফাইল ম্যানেজমেন্টের অন্যতম বেস্ট প্র্যাকটিস।

Advanced Tip: এই ট্যাগ হেল্পারটি শুধু <img> এর জন্যই নয়, বরং CSS (<link>) এবং JavaScript (<script>) এর ক্ষেত্রেও একইভাবে ব্যবহার করা যায়। এবং রিয়েল-লাইফ প্রোজেক্টে কাস্টম CSS/JS ফাইলেও এটি দেওয়া উচিত!

<link href="~/stylesheet.css" rel="stylesheet" asp-append-version="true" />
 
<script src="~/custom-script.js" asp-append-version="true"></script>

⌨️ IDE Shortcuts

  • Snipping Tool (Windows): লেকচারার লোগো স্ক্রিনশট নেওয়ার জন্য Snipping Tool ব্যবহার করেছেন। এর মডার্ন শর্টকাট হলো: Windows Key + Shift + S।
  • Hard Reload (Browser Cache Bypass): ব্রাউজারে ক্যাশ বাইপাস করে পেজ রিলোড করার জন্য: Ctrl + F5 অথবা Shift + F5। (ডেভেলপমেন্টের সময় এটি খুব কাজে লাগে)।

💡 Best Practices (Static Files)

১. Use it everywhere for local assets: প্রজেক্টের wwwroot এর ভেতরে থাকা নিজস্ব ইমেজ, সিএসএস বা জেএস ফাইলের ক্ষেত্রে সব সময় asp-append-version="true" ব্যবহার করবে। ২. Do NOT use on external URLs: এটি শুধুমাত্র লোকাল ফাইলের জন্য কাজ করে। CDN বা বাইরের কোনো লিংকে এটি দিলে কাজ করবে না।

তাহলে আমাদের Create View-এর কাজ পুরোপুরি শেষ। লেকচারের শেষে বলা হয়েছে, এরপরের লেকচারটি হবে Edit View বা আপডেট অপারেশন নিয়ে।

এই Cache Busting নিয়ে তোমার কি আর কোনো প্রশ্ন আছে, নাকি আমরা Edit View-তে মুভ করবো?

Graph View

Backlinks