8. Nested Layout Views

হ্যালো হাসিব! কোর্স আউটলাইন অনুযায়ী আমরা এখন Section 9: Layout Views-এর একেবারে শেষ লেকচার “Nested Layout Views” (Lecture 111)-এ আছি। এর পরেই শুরু হবে Section 10 (Partial Views)।

চলো, আজকের লেকচারটির বিস্তারিত ব্রেকডাউন দেখে নিই।

সারসংক্ষেপ (Quick Revision List)

Core Concept: Nested Layout View মানে হলো একটি Layout View-এর জন্য আরেকটি Layout View (বা Master Page) ব্যবহার করা।
Why use it? যদি প্রোজেক্টে একাধিক ভিন্ন ভিন্ন Layout থাকে (যেমন: সাধারণ ইউজারদের জন্য একটি, অ্যাডমিন বা প্রোডাক্ট পেজের জন্য আরেকটি), কিন্তু তাদের উভয়েরই কিছু কমন অংশ থাকে (যেমন: গ্লোবাল হেডার বা CSS ফাইল), তখন একটি Master Layout তৈরি করে তা অন্যান্য Layout-এ অ্যাপ্লাই করা হয়।
How to apply: যেকোনো View-এর মতো Layout ফাইলের উপরেও @{ Layout = "_MasterLayout"; } লিখে দিলে সেটি Nested হয়ে যায়।
Folder Specific Layout: নির্দিষ্ট কোনো ফোল্ডারের (যেমন: Products) সব View-এর জন্য আলাদা Layout সেট করতে ঐ ফোল্ডারের ভেতরে একটি আলাদা _ViewStart.cshtml ফাইল তৈরি করতে হয়।
Real-world Use: বাস্তবে এটি খুব একটা ব্যবহৃত হয় না (Rare), তবে ASP.NET Core-এ যে এটি করা সম্ভব তা দেখানোর জন্যই এই লেকচার।

Comprehensive Breakdown

১. Nested Layout View কী এবং কেন? [Importance: 5/10]

সহজ ভাষায়, “Master page for a master page”। ধরে নাও, তোমার প্রোজেক্টে দুটি Layout আছে:

_Layout.cshtml (Home, About, Contact পেজের জন্য)
_ProductsLayout.cshtml (শুধু Products Controller-এর পেজগুলোর জন্য)

এখন এই দুটি Layout-এর ডিজাইন আলাদা হলেও, তুমি চাচ্ছো উভয়ের একেবারে উপরের হেডার অংশটি এবং CSS ইমপোর্ট করার কাজটি একই থাকুক। এই কমন জিনিসগুলো বারবার দুই ফাইলে না লিখে, আমরা একটি _MasterLayout.cshtml তৈরি করতে পারি এবং বাকি দুটি Layout-কে বলতে পারি এই Master Layout-কে ফলো করতে।

২. Step-by-Step Code Implementation [Importance: 8/10]

Step A: Master Layout তৈরি করা প্রথমে Views/Shared ফোল্ডারে _MasterLayout.cshtml নামে একটি Razor Layout ফাইল তৈরি করতে হবে।

VS Code Shortcut: নতুন ফাইল তৈরি করতে Explorer-এ রাইট ক্লিক করে বা Ctrl+N চেপে সেভ করার সময় এক্সটেনশন .cshtml দিতে পারো।

<!-- Views/Shared/_MasterLayout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <title>Master Layout</title>
    <!-- কমন CSS ফাইল এখানে ইমপোর্ট করা হলো -->
    <link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <header>
            <h1>This is the Global Header for All Layouts</h1>
        </header>
 
        <!-- চাইল্ড লেআউটগুলোর কন্টেন্ট এখানে বসবে -->
        @RenderBody() 
    </div>
</body>
</html>

Step B: Child Layout-গুলোতে Master Layout অ্যাপ্লাই করা এখন আমাদের যে দুটি প্রধান Layout আছে, তাদের উপরে বলে দিতে হবে যে তাদের Parent Layout হলো _MasterLayout।

<!-- Views/Shared/_Layout.cshtml -->
@{
    // এই Layout-এর জন্য Master Layout সেট করা হলো
    Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
 
<!-- নিজস্ব কন্টেন্ট -->
<div class="main-content">
    <h2>Main Application Layout</h2>
    @RenderBody() <!-- আসল View (যেমন: Index.cshtml) এখানে রেন্ডার হবে -->
</div>

একইভাবে _ProductsLayout.cshtml-এর উপরেও Layout = "~/Views/Shared/_MasterLayout.cshtml"; লিখে দিতে হবে।

Step C: নির্দিষ্ট ফোল্ডারের জন্য ViewStart কনফিগার করা গ্লোবাল Views/_ViewStart.cshtml ফাইলে আমরা ডিফল্ট হিসেবে _Layout.cshtml সেট করে রাখি। ফলে প্রোজেক্টের সব পেজ সেটিই পায়। কিন্তু আমরা চাই শুধু Products ফোল্ডারের View-গুলো _ProductsLayout.cshtml পাক। এর জন্য:

Views/Products ফোল্ডারে নতুন একটি _ViewStart.cshtml তৈরি করতে হবে।
সেখানে নিচের কোডটি লিখতে হবে:

<!-- Views/Products/_ViewStart.cshtml -->
@{
    Layout = "~/Views/Shared/_ProductsLayout.cshtml";
}

কীভাবে কাজ করছে? ASP.NET Core যখন Products ফোল্ডারের কোনো View রেন্ডার করতে যায়, তখন সে গ্লোবাল _ViewStart এর চেয়ে ফোল্ডারের ভেতরের _ViewStart-কে বেশি প্রাধান্য দেয় (Override করে)।

৩. Execution Flow (কীভাবে রেন্ডার হয়) [Importance: 7/10]

যখন তুমি Products-এর কোনো পেজ (যেমন: Search.cshtml) ব্রাউজারে লোড করবে, তখন ইঞ্জিন যেভাবে কাজ করবে:

Search.cshtml এর কন্টেন্ট গিয়ে বসবে _ProductsLayout.cshtml এর @RenderBody() তে।
এরপর পুরো _ProductsLayout.cshtml গিয়ে বসবে _MasterLayout.cshtml এর @RenderBody() তে।
অবশেষে ক্লায়েন্ট ব্রাউজারে সম্পূর্ণ HTML পেজটি দেখতে পাবে।

৪. Lecturer’s Advice [Importance: 4/10]

লেকচারার স্পষ্ট বলেছেন যে, “It is quite rare to use in real-world projects.” বাস্তবে এত লেভেলের নেস্টিং করা হয় না, কারণ এতে কোড মেইনটেইন করা কঠিন হয়ে যায়। শুধুমাত্র এই ফ্রেমওয়ার্কের ক্ষমতা বোঝানোর জন্যই এটি দেখানো হয়েছে।

Best Practices & .NET 10 Context

Best Practices for Layouts:

Avoid Deep Nesting: Nested Layout ম্যাক্সিমাম ১ লেভেল পর্যন্ত রাখা উচিত (অর্থাৎ Parent -> Child)। এর বেশি নেস্ট করলে পেজ রেন্ডারিং জটিল ও স্লো হতে পারে।
Use Partial Views / View Components: বাস্তবে এই লেকচারের সমস্যাটি (কমন হেডার বা কমন সেকশন) সমাধান করতে Nested Layout-এর বদলে Partial Views বা View Components ব্যবহার করা হয় (যা তুমি পরবর্তী সেকশনে শিখবে)। এটি অনেক বেশি ক্লিন এবং মেইনটেইনেবল।

.NET 10 Updates: ASP.NET Core 10 MVC-তে Nested Layout-এর আর্কিটেকচার বা Razor সিনট্যাক্সে কোনো পরিবর্তন আসেনি। .NET 6 থেকে .NET 10 পর্যন্ত Razor View ইঞ্জিন একইভাবে কাজ করে।

কোড ইমপ্লিমেন্টেশন একদম সেম থাকবে:

@{
    Layout = "_MasterLayout"; // .NET 10 এও এভাবেই লিখতে হয়
}

তবে আধুনিক মডার্ন .NET প্রোজেক্টে যদি UI অনেক কমপ্লেক্স হয়, তবে ডেভেলপাররা সাধারণত Razor Pages বা Blazor Components-এর দিকে শিফট করে, যেখানে Component-based architecture ব্যবহার করে খুব সহজেই লেআউট ম্যানেজ করা যায়।

হাসিব, আমাদের Section 9 এখানেই শেষ! Nested Layout নিয়ে তোমার কি কোনো কনফিউশন আছে, নাকি আমরা পরবর্তী চ্যাপ্টার “Partial Views” শুরু করবো?

Quartz 5

Explorer