হাসিব, চলো আজকের টপিকটি নিয়ে বিস্তারিত আলোচনা করি। আউটলাইন অনুযায়ী এটি তোমার কোর্সের ৯১ নম্বর লেকচার (Section 8: Views - MVC Architecture Pattern), যার শিরোনাম “Literal”। এই লেকচারে Razor View-এর C# কোড ব্লকের ভেতরে সাধারণ Static text কীভাবে প্রিন্ট করতে হয় এবং Razor-এ Comment করার নিয়ম নিয়ে আলোচনা করা হয়েছে।
নিচে পুরো লেকচারের বিস্তারিত ব্রেকডাউন দেওয়া হলো:
📝 Summary (সারসংক্ষেপ)
- The Problem: Razor-এর C# কোড ব্লকের (যেমন @foreach বা @{ … }) ভেতরে সরাসরি কোনো Static text লিখলে Syntax error দেখায়, কারণ Razor এটিকে C-sharp code হিসেবে ধরে নেয়।
- Solution 1 ( tag): লাইনের নির্দিষ্ট কোনো অংশকে Static text হিসেবে প্রিন্ট করতে চাইলে … ট্যাগ ব্যবহার করতে হয়।
- Solution 2 (@: operator): পুরো একটি লাইনকে Static text হিসেবে ডিক্লেয়ার করতে লাইনের শুরুতে @: ব্যবহার করতে হয়।
- Solution 3 (HTML tags): Static text-কে যেকোনো HTML tag (যেমন বা ) এর ভেতরে রাখলে Razor স্বয়ংক্রিয়ভাবে বুঝে নেয় এটি HTML।
- Razor Comments: Razor View-তে কমেন্ট করার জন্য @* … *@ ব্যবহার করা হয়।
📌 The Problem: Text inside Razor Code Blocks [Priority: 8/10]
Why it happens: Razor View (.cshtml) ফাইল মূলত HTML এবং C#-এর একটি মিশ্রণ। যখন তুমি @ সিম্বল দিয়ে কোনো লুপ বা কোড ব্লক শুরু করো (যেমন @foreach বা @{ }), তখন Razor Engine প্রত্যাশা করে যে এর ভেতরে তুমি ভ্যালিড C-sharp code লিখবে।
যদি তুমি এর ভেতরে সরাসরি “Hello to” এর মতো কোনো Static text লিখে দাও, Razor সেটিকে C# Variable বা Keyword হিসেবে কম্পাইল করার চেষ্টা করে এবং ব্যর্থ হয়ে Error থ্রো করে।
@foreach (var person in people)
{
// ❌ Error: Razor এটিকে C# কোড ভাবছে
Hello to @person.Name
<div>...</div>
}
এই সমস্যা সমাধানের জন্য ইনস্ট্রাক্টর ৩টি পদ্ধতির কথা বলেছেন।
📌 Method 1: Using the Tag [Priority: 7/10]
যদি তুমি চাও লাইনের শুধুমাত্র একটি নির্দিষ্ট অংশ (Specific portion) Static text হিসেবে কাজ করুক, তবে তুমি সেই অংশটুকুকে ট্যাগের ভেতরে রাখতে পারো।
Note: এটি কোনো আসল HTML tag নয়, এটি শুধুমাত্র Razor-এর একটি ইন্টারনাল ট্যাগ যা ব্রাউজারে (Network tab-এ) রেন্ডার হয় না।
@foreach (var person in people)
{
<text>Hello to </text> <span>@person.Name</span>
}
আউটপুট: ব্রাউজার শুধু Hello to Hasib পাবে। ট্যাগটি গায়েব হয়ে যাবে।
📌 Method 2: Using the @: (At-Colon) Operator [Priority: 8/10]
তুমি যদি চাও পুরো একটি লাইনই Static text হিসেবে রেন্ডার হোক, তাহলে লাইনের শুরুতে @: (At সিম্বল এবং কোলন) ব্যবহার করতে পারো।
Limitations: এই নিয়মের একটি সীমাবদ্ধতা হলো, @: ব্যবহার করলে ওই একই লাইনে তুমি আর কোনো C-sharp code বা লজিক (যেমন C# Variable ডিক্লারেশন) লিখতে পারবে না। লিখলে সেটিও সাধারণ টেক্সট হিসেবে প্রিন্ট হয়ে যাবে।
@foreach (var person in people)
{
@:Hello to @person.Name
<div>Welcome to our platform.</div>
}
📌 Method 3: Using standard HTML Tags (The Best Way) [Priority: 10/10]
ইনস্ট্রাক্টর ভিডিওর শেষে বলেছেন, উপরের দুটি পদ্ধতি ব্যবহার না করে সবচেয়ে ভালো উপায় হলো Static text-কে কোনো স্ট্যান্ডার্ড HTML tag-এর ভেতরে রাখা। যেমন: , বা ।
যখন Razor কোনো C# ব্লকের ভেতরে একটি ওপেনিং HTML tag (যেমন ) দেখে, তখন সে স্বয়ংক্রিয়ভাবে C# মোড থেকে HTML মোডে সুইচ করে ফেলে।
@foreach (var person in people)
{
<span>Hello to @person.Name</span>
}
রিয়েল-ওয়ার্ল্ড প্রজেক্টে এই পদ্ধতিটিই সবচেয়ে বেশি ব্যবহার করা হয়।
📌 Razor Comments & Keyboard Shortcuts [Priority: 9/10]
HTML-এ আমরা এবং C#-এ // comment ব্যবহার করি। কিন্তু Razor View-তে C# এবং HTML উভয়ের জন্যই নিজস্ব Comment syntax রয়েছে। এটি হলো @* … *@। এটি Single-line এবং Multi-line উভয়ের জন্যই কাজ করে।
@*
This is a multi-line Razor comment.
The browser will never see this code.
*@
⌨️ Editor Shortcuts:
লেকচারে Visual Studio-এর জন্য Toolbar এবং Keyboard shortcut দেখানো হয়েছে। নিচে Visual Studio এবং Visual Studio Code উভয়ের শর্টকাট দেওয়া হলো:
Visual Studio (Windows):
- Comment করা: কোড সিলেক্ট করে Ctrl + K, তারপর Ctrl + C
- Uncomment করা: কোড সিলেক্ট করে Ctrl + K, তারপর Ctrl + U
Visual Studio Code (Windows / Linux):
- Comment / Uncomment (Toggle): Ctrl + / (যেকোনো লাইনের জন্য)
- Block Comment (Razor): Shift + Alt + A
💡 Smarter Approach in .NET 10
.NET 10 এবং আধুনিক MVC প্যাটার্নে বা @: এর ব্যবহার প্রায় বিলুপ্তির পথে। কারণ, UI ডিজাইনের ক্ষেত্রে যেকোনো Static text-কে Semantic HTML (যেমন , , ) এর ভেতরে রাখাই স্ট্যান্ডার্ড, যাতে CSS এবং Accessibility (Screen readers) ঠিকঠাক কাজ করে।
তাছাড়া, যদি অনেক বেশি String manipulation করতে হয়, তবে View-তে সেটা না করে Controller-এ C# String Interpolation ব্যবহার করে একটি প্রোপার্টিতে স্টোর করে View-তে পাঠানো হয়।
Modern MVC Approach:
@* View-তে সরাসরি @: বা <text> ব্যবহার না করে Semantic HTML ব্যবহার করা *@
@foreach (var person in Model)
{
<p class="greeting-text">
Hello to <span class="fw-bold">@person.Name</span>
</p>
}
⭐ Best Practices for Razor Literals & Comments (MVC Context)
- Prefer HTML Tags over @: and : সব সময় Static text-কে বা এর মতো HTML tag-এ র্যাপ (Wrap) করবে। এটি CSS স্টাইলিং এবং DOM ম্যানিপুলেশনের জন্য নিরাপদ। শুধুমাত্র যখন তুমি HTML Structure ভাঙতে চাও না (যেমন ব্লকের ভেতর ডায়নামিক ডেটা ইনজেক্ট করা), তখন বা @: ব্যবহার করবে।
- Use Razor Comments for Security: View-এর ভেতরে কোনো সংবেদনশীল লজিক বা কোড ব্লক হাইড করতে চাইলে কখনোই HTML Comment () ব্যবহার করবে না। কারণ HTML Comment ব্রাউজারের “View Page Source”-এ দেখা যায়। সবসময় Razor Comment (@* … *@) ব্যবহার করবে, এটি সার্ভারেই রিমুভ হয়ে যায়।
<!-- ❌ Bad: User can see this in page source -->
<!-- The admin role ID is 5 -->
@* ✅ Good: User cannot see this in browser *@
@* The admin role ID is 5 *@