হ্যালো হাসিব! তুমি এখন Section 13: Environments-এর চতুর্থ লেকচার “Environment Tag Helper” (Lecture 146)-এ আছো।
আগের লেকচারগুলোতে আমরা Program.cs এবং Controller-এর ভেতরে C# কোড দিয়ে Environment চেক করা শিখেছি। কিন্তু আজকের লেকচারে আমরা শিখবো কীভাবে সরাসরি HTML/Razor View (.cshtml) ফাইলের ভেতরে খুব সহজে Environment অনুযায়ী নির্দিষ্ট কন্টেন্ট (যেমন: বাটন, স্ক্রিপ্ট, বা <div>) হাইড বা শো করা যায়।
এর জন্য ASP.NET Core-এ একটি দারুণ বিল্ট-ইন টুল আছে, যার নাম Environment Tag Helper। চলো, লেকচারটি ডিকোড করি।
সারসংক্ষেপ (Quick Revision List)
-
The Goal: View (
.cshtml) ফাইলের নির্দিষ্ট কোনো HTML কন্টেন্ট শুধুমাত্র নির্দিষ্ট Environment (যেমন Development বা Production)-এ দেখানো বা লুকানো। -
The Tool:
<environment>Tag Helper ব্যবহার করে এটি করা হয়। -
Attributes:
-
include: যে Environment-এ কন্টেন্টটি দেখাতে চাও (যেমন:include="Development"). -
exclude: যে Environment বাদে অন্য সব জায়গায় কন্টেন্টটি দেখাতে চাও (যেমন:exclude="Development"). -
Pre-requisite: Tag Helper ব্যবহার করার জন্য অবশ্যই
_ViewImports.cshtmlফাইলে@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpersলাইনটি ইমপোর্ট করা থাকতে হবে।
Comprehensive Breakdown
১. Tag Helper ইমপোর্ট করা (The Pre-requisite) [Priority: 10/10]
ASP.NET Core-এ Tag Helpers অনেকটা কাস্টম HTML ট্যাগের মতো কাজ করে, যা সার্ভার-সাইড লজিক এক্সিকিউট করতে পারে। কিন্তু এগুলো বাই-ডিফল্ট এক্টিভ থাকে না।
প্রথমে Views ফোল্ডারে _ViewImports.cshtml নামের একটি ফাইল তৈরি করে নিচের কোডটি লিখতে হবে, যাতে প্রোজেক্টের সব View ফাইল ট্যাগ হেল্পারগুলো চিনতে পারে।
Code Implementation (Views/_ViewImports.cshtml):
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
২. <environment include="... "> ব্যবহার করা [Priority: 10/10]
ধরো, তুমি এমন একটি “Database Migrations” বাটন বানাতে চাও, যা শুধু তুমি (Developer) দেখবে, সাধারণ ইউজাররা দেখবে না।
এর জন্য বাটনটিকে <environment> ট্যাগের ভেতরে রেখে include অ্যাট্রিবিউট ব্যবহার করতে হবে।
Code Implementation (Views/Home/Index.cshtml):
<!-- ১. Include Example: শুধুমাত্র Development Environment-এ এই বাটনটি রেন্ডার হবে -->
<environment include="Development">
<button class="button button-blue-back">
Only for Development
</button>
</environment>
How it works:
যদি launchSettings.json-এ Environment-এর নাম “Development” থাকে, তবেই এই বাটনটি HTML-এ রেন্ডার হবে। অন্যথায় (যেমন Staging বা Production হলে), সার্ভার এই পুরো ব্লকটাকে ইগনোর করবে এবং ব্রাউজারে এর কোনো অস্তিত্বই থাকবে না।
৩. <environment exclude="... "> ব্যবহার করা [Priority: 9/10]
ধরো, তুমি প্রোডাকশন সার্ভারে Google Analytics-এর ট্র্যাকিং কোড বা লাইভ চ্যাটের উইজেট বসাতে চাও, কিন্তু তুমি চাও না যে তুমি লোকাল মেশিনে (Development) কাজ করার সময় তোমার নিজের ভিজিটগুলো ট্র্যাকিংয়ে কাউন্ট হোক।
এখানে exclude ব্যবহার করতে হবে।
Code Implementation (Views/Home/Index.cshtml):
<!-- ২. Exclude Example: Development বাদে বাকি সব Environment-এ এই বাটনটি রেন্ডার হবে -->
<environment exclude="Development">
<button class="button button-green-back">
Except for Development (Appears in Staging/Prod)
</button>
</environment>
How it works: এই কোডটি Development Environment-এ রান করলে কিছুই দেখাবে না। কিন্তু যেই তুমি Environment চেঞ্জ করে Staging, Production বা অন্য কোনো নাম দেবে, তখন এই বাটনটি দৃশ্যমান হবে।
৪. The Kestrel Restart Reminder [Priority: 10/10]
লেকচারার আগের লেকচারের মতোই আবার রিমাইন্ডার দিয়েছেন যে, তুমি যদি অ্যাপ রান করা অবস্থায় (Running mode) launchSettings.json-এ Environment-এর নাম চেঞ্জ করো (যেমন Development থেকে Staging), তবে সেই চেঞ্জটা সাথে সাথে ব্রাউজারে রিফ্লেক্ট হবে না।
- Fix: তোমাকে অবশ্যই কন্সোল উইন্ডো বা Kestrel সার্ভারটি ক্লোজ করে পুনরায় রান (Restart) করতে হবে।
VS / VS Code Shortcuts
- Format HTML: HTML বা Razor ফাইলে কোড এলোমেলো থাকলে
Shift + Alt + Fচাপলে কোড সুন্দরভাবে এলাইন (Format) হয়ে যাবে।
Best Practices & .NET 10 Context
Best Practices for Environment Tag Helper:
- Multiple Environments: তুমি চাইলে কমা (
,) দিয়ে একাধিক Environment-এর নাম একসাথে দিতে পারো। যেমন:<environment include="Development, Staging">। - Minified Scripts in Production: রিয়েল-ওয়ার্ল্ড প্রোজেক্টে এই ট্যাগ হেল্পারের সবচেয়ে পপুলার ব্যবহার হলো CSS/JS ফাইল অপটিমাইজেশন।
<!-- Development-এ অরিজিনাল ফাইল লোড হবে, ডিবাগিংয়ের সুবিধার জন্য -->
<environment include="Development">
<script src="~/js/site.js"></script>
</environment>
<!-- Production-এ Minified (ছোট) ফাইল লোড হবে, যাতে সাইট ফাস্ট হয় -->
<environment exclude="Development">
<script src="~/js/site.min.js"></script>
</environment>
.NET 10 Context:
ASP.NET Core 10-এ এই <environment> ট্যাগ হেল্পারের সিনট্যাক্স এবং লজিক .NET Core-এর শুরু থেকেই ১০০% অপরিবর্তিত আছে। এটি মডার্ন ডটনেটেও খুব বেশি ব্যবহৃত হয়, বিশেষ করে স্ক্রিপ্ট এবং স্টাইলশিট ম্যানেজমেন্টের জন্য।
হাসিব, View ফাইলে Environment দিয়ে কন্টেন্ট হাইড/শো করার এই টেকনিক কি ক্লিয়ার হয়েছে? রেডি থাকলে আমরা এই সেকশনের একদম শেষ লেকচার “Process Level Environment”-এ মুভ করতে পারি, যেখানে আমরা দেখবো সার্ভারে আপলোড করার পর (launchSettings.json ছাড়া) কীভাবে Environment চেঞ্জ করতে হয়!