1. Creating Layout Views - 01

হ্যালো হাসিব! চলো আজকের “Creating Layout Views - Part 1” লেকচারটি নিয়ে বিস্তারিত আলোচনা করি। এটি ASP.NET Core MVC-এর অন্যতম গুরুত্বপূর্ণ একটি টপিক।

📝 শর্ট সামারি (Quick Revision)

• Layout View: একাধিক View-এর জন্য কমন UI (যেমন Header, Footer, Sidebar) তৈরি করার টেমপ্লেট।
• Project Setup: ASP.NET Core Empty অ্যাপ তৈরি করে Program.cs-এ MVC এবং Static Files এনাবল করা।
• Static Files (wwwroot): প্রজেক্টের CSS, JS বা Image ফাইল রাখার জন্য wwwroot ফোল্ডার তৈরি করা।
• Controllers: HomeController এবং ProductsController তৈরি করা এবং প্রতিটিতে Action Methods ও Route ডিফাইন করা।
• Shared Views: একাধিক Controller-এ ব্যবহৃত View গুলোকে Views/Shared ফোল্ডারে রাখা।
• Naming Convention: Shared বা Layout Views চেনার সুবিধার্থে নামের আগে আন্ডারস্কোর (_) ব্যবহার করা (যেমন: _Layout.cshtml)।
• @RenderBody(): Layout View-এর ভেতরে এটি একটি Placeholder হিসেবে কাজ করে, যেখানে নির্দিষ্ট View-এর কনটেন্ট এসে রেন্ডার হয়।

---

🚀 বিস্তারিত আলোচনা (Comprehensive Breakdown)

১. Layout View কী এবং কেন প্রয়োজন? (Priority: 10/10)

কেন (Why): ধরো তোমার প্রজেক্টে ১০টি আলাদা Webpage (বা View) আছে। প্রতিটি পেজে একটি কমন Header (যেখানে Navigation Bar বা Logo থাকবে) এবং একটি Footer (যেখানে Copyright ইনফো থাকবে) দেখাতে চাও। এখন ১০টি পেজে আলাদাভাবে একই HTML কোড লেখাটা DRY (Don’t Repeat Yourself) প্রিন্সিপালের পরিপন্থী।

কী (What): এই সমস্যার সমাধান হলো Layout View। এটি একটি Master Page বা Common Template হিসেবে কাজ করে। কমন UI এলিমেন্টগুলো আমরা Layout View-তে লিখে রাখি এবং অন্যান্য View গুলো এই লেআউটটিকে ব্যবহার করে।

২. প্রজেক্ট সেটআপ এবং Program.cs কনফিগারেশন (Priority: 8/10)

লেকচারে একটি ASP.NET Core Empty প্রজেক্ট তৈরি করে Controllers এবং Views এনাবল করা হয়েছে।

.NET 10 (Updated Approach): পুরোনো ভার্সনে Startup.cs ব্যবহৃত হলেও, আধুনিক ASP.NET Core (.NET 6 থেকে শুরু করে .NET 10 পর্যন্ত) Top-level statements ব্যবহার করে। Program.cs-এর আপডেট কোডটি নিচে দেওয়া হলো:

// Program.cs
var builder = WebApplication.CreateBuilder(args);
 
// Add services to the container.
builder.Services.AddControllersWithViews(); // MVC Service অ্যাড করা হলো
 
var app = builder.Application;
 
// Configure the HTTP request pipeline.
app.UseStaticFiles(); // wwwroot ফোল্ডারের ফাইল অ্যাক্সেস করার জন্য
 
app.UseRouting(); // Routing এনাবল করা
 
app.MapControllers(); // Controllers-এর রুট ম্যাপ করা
 
app.Run();
 

৩. Static Files এবং wwwroot ফোল্ডার (Priority: 7/10)

প্রজেক্টের রুট ডিরেক্টরিতে wwwroot নামে একটি ফোল্ডার তৈরি করতে হবে। কেন (Why): ASP.NET Core ডিফল্টভাবে বাইরের কোনো ফোল্ডার থেকে CSS বা JS ফাইল ব্রাউজারকে পড়তে দেয় না। সিকিউরিটির জন্য শুধুমাত্র wwwroot ফোল্ডারটি ক্লায়েন্ট সাইড থেকে অ্যাক্সেসযোগ্য থাকে। লেকচার অনুযায়ী, একটি stylesheet.css ফাইল এই ফোল্ডারে রাখতে হবে, যা পুরো অ্যাপ্লিকেশনের ডিজাইন নিয়ন্ত্রণ করবে।

৪. Controllers তৈরি করা (Priority: 9/10)

আমরা দুটি Controller তৈরি করব: HomeController এবং ProductsController। প্রতিটি Action Method-এর জন্য আলাদা আলাদা Route ডিফাইন করা হয়েছে।

HomeController.cs:

using Microsoft.AspNetCore.Mvc;
 
namespace LayoutViewsExample.Controllers
{
    public class HomeController : Controller
    {
        [Route("/")]
        public IActionResult Index()
        {
            return View();
        }
 
        [Route("/about-company")]
        public IActionResult About()
        {
            return View();
        }
 
        [Route("/contact-support")]
        public IActionResult Contact()
        {
            return View();
        }
    }
}
 

ProductsController.cs:

using Microsoft.AspNetCore.Mvc;
 
namespace LayoutViewsExample.Controllers
{
    public class ProductsController : Controller
    {
        [Route("/products")]
        public IActionResult Index()
        {
            return View();
        }
 
        [Route("/search-products")]
        public IActionResult Search()
        {
            return View();
        }
 
        [Route("/order-product")]
        public IActionResult Order()
        {
            return View();
        }
    }
}
 

৫. Shared Views এবং _Layout.cshtml তৈরি (Priority: 10/10)

যেহেতু Layout View কোনো নির্দিষ্ট Controller-এর অংশ নয়, এটি পুরো অ্যাপ্লিকেশনের জন্য কমন, তাই একে Views/Shared ফোল্ডারের ভেতরে রাখতে হয়।

• প্রথমে Views ফোল্ডার তৈরি করো।
• তার ভেতরে Shared ফোল্ডার তৈরি করো।
• এখানে _Layout.cshtml নামে একটি Razor Layout ফাইল তৈরি করো।

Naming Convention (Why _ prefix?): ফাইলের নামের আগে আন্ডারস্কোর (_) দেওয়াটা বাধ্যতামূলক নয়, তবে এটি একটি স্ট্যান্ডার্ড প্র্যাকটিস। এটি দেখে সহজেই বোঝা যায় যে, এটি কোনো রেগুলার View নয়, বরং এটি একটি Shared View, Partial View বা Layout View।

৬. _Layout.cshtml এর ভেতরে HTML এবং @RenderBody() (Priority: 10/10)

Layout View-তে আমরা পুরো পেজের স্ট্রাকচার (HTML, Head, Body) ডিফাইন করি।

@RenderBody() কী এবং কেন? এটি একটি স্পেশাল Razor Method, যা শুধুমাত্র Layout View-তেই ব্যবহার করা যায়। যখন কোনো View (যেমন Home/Index) এক্সিকিউট হয়, তখন সেই View-এর নিজস্ব কনটেন্টগুলো ঠিক ঐ জায়গায় এসে বসে যায়, যেখানে @RenderBody() লেখা থাকে।

_Layout.cshtml এর ইমপ্লিমেন্টেশন:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ASP.NET Core Demo App</title>
    <!-- wwwroot থেকে CSS লিঙ্ক করা -->
    <link href="~/stylesheet.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <!-- Navigation Bar -->
        <nav class="navbar">
            <div class="navbar-brand">ASP.NET Core Demo App</div>
            <ul>
                <!-- href এ Route গুলো ঠিকঠাক দিতে হবে -->
                <li><a href="/">Home</a></li>
                <li><a href="/about-company">About</a></li>
                <li><a href="/contact-support">Contact</a></li>
                <li><a href="/products">Products</a></li>
                <li><a href="/search-products">Search Products</a></li>
                <li><a href="/order-product">Order</a></li>
            </ul>
        </nav>
 
        <!-- Main Content Area -->
        <div class="page-content">
            <!-- নির্দিষ্ট View এর কনটেন্ট এখানে রেন্ডার হবে -->
            @RenderBody()
        </div>
    </div>
</body>
</html>
 

নোট: Layout View নিজে নিজে এক্সিকিউট হতে পারে না। যখন কোনো রেগুলার View কল করা হয়, তখনই সেই View-এর সাথে Layout View মার্জ হয়ে ব্রাউজারে রেসপন্স পাঠায়।

৭. এডিটর শর্টকাট (Priority: 5/10)

লেকচারে কোড ফরম্যাট করার জন্য Visual Studio-এর একটি শর্টকাট দেখানো হয়েছে।

• Visual Studio: Ctrl + K + D (কোড সুন্দরভাবে এলাইন/ফরম্যাট করার জন্য)।
• Visual Studio Code (VS Code): তুমি যদি VS Code ব্যবহার করো, তবে শর্টকাটটি হলো Shift + Alt + F। (ম্যাকে Shift + Option + F)।

---

💡 Best Practices (MVC Layout Views)

• ViewImports এবং ViewStart ব্যবহার: লেআউট ফাইলটিকে প্রতিটা View-তে বারবার ডিক্লেয়ার না করে _ViewStart.cshtml ফাইলে গ্লোবালি সেট করে দেওয়া উচিত।
• ক্লিন Layout: _Layout.cshtml ফাইলটিকে যথাসম্ভব ক্লিন রাখতে হবে। অনেক বড় Navigation মেনু বা ফুটার থাকলে সেগুলোকে আলাদা Partial View তে (যেমন _Navbar.cshtml, _Footer.cshtml) ভাগ করে Layout-এ কল করা স্মার্ট উপায়।
• Tilde (~) এর ব্যবহার: CSS, JS বা ইমেজ ফাইলের পাথ ডিক্লেয়ার করার সময় পাথের শুরুতে ~/ ব্যবহার করা উচিত (যেমন href="~/stylesheet.css")। এটি অ্যাপ্লিকেশনের Root ডিরেক্টরি (wwwroot) থেকে এক্স্যাক্ট লোকেশন বের করে আনে, ফলে রাউটিং বা সাব-ডিরেক্টরি চেঞ্জ হলেও 404 এরর আসে না।
• Title ডাইনামিক করা: Hardcoded Title (“ASP.NET Core Demo App”) ব্যবহার না করে ViewData["Title"] ব্যবহার করা উচিত, যেন প্রতিটি পেজ তার নিজস্ব Title Layout-এ পাঠাতে পারে। (এটি পরবর্তী লেকচারগুলোতে দেখতে পাবে)।