Quartz 5

2. Creating Layout Views - 02

4 min read

হ্যালো হাসিব! “Creating Layout Views - Part 2” লেকচারে স্বাগতম। আগের লেকচারে আমরা Layout View তৈরি করেছিলাম, আর এই লেকচারে আমরা দেখব কীভাবে একটি সাধারণ View-কে সেই Layout View-এর সাথে যুক্ত করতে হয় এবং এর পেছনের Execution Flow কীভাবে কাজ করে।

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

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

  • Connecting Layout: যেকোনো View-এর শুরুতে Razor Code Block (@{ ... }) ব্যবহার করে Layout প্রপার্টিতে Layout View-এর পাথ বলে দিতে হয়।
  • Execution Sequence: প্রথমে Controller-এর Action Method রান করে ➡️ এরপর View এক্সিকিউট হয় ➡️ সবার শেষে Layout View এক্সিকিউট হয় এবং View-এর কনটেন্ট Layout-এর ভেতর মার্জ হয়।
  • Tilde (~) Symbol: এটি অ্যাপ্লিকেশনের Root ডিরেক্টরি (Domain Address) নির্দেশ করে।
  • Network Response: ব্রাউজার কখনোই Layout View এবং View আলাদাভাবে পায় না। এটি একটি সম্পূর্ণ Merged HTML Document রিসিভ করে।
  • @RenderBody() Error: Layout View-তে @RenderBody() ডিক্লেয়ার করা বাধ্যতামূলক, অন্যথায় Compile-time Error আসবে।

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

১. View তৈরি করা এবং Layout-এর সাথে কানেক্ট করা (Priority: 10/10)

কী (What): HomeController-এর Index Action Method-এর জন্য আমরা একটি Index.cshtml ফাইল তৈরি করব। এরপর এই View-কে জানাবো যে তার Layout বা Master Page কোনটি। কেন (Why): ডিফল্টভাবে যেকোনো View-এর Layout প্রপার্টির ভ্যালু null থাকে। অর্থাৎ, ফ্রেমওয়ার্ক নিজে থেকে বোঝে না যে এই View-টি কোনো Layout ব্যবহার করবে কি না। তাই পাথ বলে দেওয়া জরুরি।

Code Implementation:

@{
    // Tilde (~) মানে হলো প্রজেক্টের রুট বা ডোমেইন অ্যাড্রেস
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<!-- এই অংশটুকু হলো আমাদের নির্দিষ্ট View এর নিজস্ব কনটেন্ট -->
<h1>Home Page</h1>
<p>Welcome to our ASP.NET Core MVC Application. This content comes from the Index view.</p>

২. Execution Flow বা কোড এক্সিকিউশনের সিকোয়েন্স (Priority: 10/10)

লেকচারে Breakpoint ব্যবহার করে কোডের Execution Sequence চমৎকারভাবে বোঝানো হয়েছে। ইন্টারভিউয়ের জন্য এটি খুবই গুরুত্বপূর্ণ একটি কনসেপ্ট।

কীভাবে কাজ করে (Step-by-Step):

  1. Controller Action: যখন ব্রাউজার থেকে রিকোয়েস্ট আসে (যেমন: localhost:5000/), তখন সবার আগে HomeController-এর Index() Action Method এক্সিকিউট হয়।
  2. View Execution: Action Method যখন return View() কল করে, তখন ফ্রেমওয়ার্ক Index.cshtml ফাইলটি খুঁজে বের করে এবং এক্সিকিউট করা শুরু করে।
  3. Layout Declaration: View ফাইলটি এক্সিকিউট হওয়ার সময় সে দেখে যে তার একটি Layout প্রপার্টি সেট করা আছে। কিন্তু সে সাথে সাথে Layout-এ চলে যায় না। আগে সে তার নিজের ভেতরের সব HTML এবং Razor Expression এক্সিকিউট করে একটি রেজাল্ট তৈরি করে।
  4. Layout Execution: View-এর এক্সিকিউশন শেষ হলে, কন্ট্রোল চলে যায় _Layout.cshtml ফাইলে। Layout View তার নিজস্ব HTML রেন্ডার করে এবং ঠিক যেই লাইনে @RenderBody() লেখা আছে, সেখানে আগের ধাপে তৈরি হওয়া View-এর কনটেন্ট বসিয়ে দেয়।

💡 Pro Tip (Editor Shortcut): লেকচারে Breakpoint অ্যাড করার কথা বলা হয়েছে। Visual Studio এবং Visual Studio Code (VS Code) উভয় এডিটরেই লাইনের শুরুতে ক্লিক করে অথবা কীবোর্ডে F9 প্রেস করে Breakpoint টগল করা যায়।

৩. @RenderBody() এর আবশ্যকতা এবং Browser Response (Priority: 9/10)

কী (What): ব্রাউজারের Network Tab ইন্সপেক্ট করলে (শর্টকাট: Ctrl + Shift + I) দেখা যায় যে ব্রাউজার শুধু একটি মাত্র HTML ফাইল রিসিভ করেছে। ব্রাউজার Layout View বা View আলাদা করে চেনে না।

কেন (Why): সার্ভার সাইডেই Layout এবং View মার্জ হয়ে যায়। এই মার্জিং প্রসেসের মূল কেন্দ্রবিন্দু হলো @RenderBody()। যদি তুমি _Layout.cshtml ফাইল থেকে @RenderBody() মুছে ফেলো বা কমেন্ট আউট করে দাও, তবে ASP.NET Core একটি Compile-time Error থ্রো করবে। কারণ: ফ্রেমওয়ার্ককে অবশ্যই জানতে হবে যে Child View-এর কনটেন্ট সে Layout-এর ঠিক কোন জায়গায় বসাবে। @RenderBody() না থাকলে সেটি সম্ভব নয়।

🏆 Best Practices & Smarter Updates (.NET 10)

লেকচারে প্রতিটি View-এর ভেতরে আলাদাভাবে Layout = "~/Views/Shared/_Layout.cshtml"; লেখার পদ্ধতি দেখানো হয়েছে। এটি বেসিক বোঝার জন্য ঠিক আছে, কিন্তু রিয়েল-ওয়ার্ল্ড প্রজেক্টে এটি খুবই বাজে একটি প্র্যাকটিস (Bad Practice), কারণ তোমার প্রজেক্টে যদি ১০০টি View থাকে, তবে ১০০ বার এই কোড লিখতে হবে।

✅ Updated & Smarter Approach (Using _ViewStart.cshtml): ASP.NET Core (বিশেষ করে আধুনিক .NET 6 থেকে .NET 10 পর্যন্ত) MVC আর্কিটেকচারে DRY (Don’t Repeat Yourself) প্রিন্সিপাল ফলো করার জন্য _ViewStart.cshtml ফাইল ব্যবহার করা হয়।

কীভাবে করবে: Views ফোল্ডারের রুট ডিরেক্টরিতে (Shared ফোল্ডারে নয়, সরাসরি Views ফোল্ডারে) _ViewStart.cshtml নামে একটি ফাইল তৈরি করতে হয়।

<!-- Views/_ViewStart.cshtml -->
@{
    // এটি গ্লোবালি সব View এর জন্য ডিফল্ট Layout সেট করে দেবে।
    Layout = "_Layout"; 
}

সুবিধা: এই ফাইলটি ডিক্লেয়ার করার পর তোমার অ্যাপ্লিকেশনের কোনো Index.cshtml বা About.cshtml ফাইলে আলাদা করে Layout-এর পাথ লিখতে হবে না। প্রতিটি View এক্সিকিউট হওয়ার ঠিক আগে স্বয়ংক্রিয়ভাবে _ViewStart.cshtml রান হবে এবং Layout সেট করে দেবে। তোমার View গুলো হবে একদম ক্লিন:

<!-- Views/Home/Index.cshtml (.NET 10 Clean Approach) -->
<!-- এখানে Layout ডিফাইন করার কোনো দরকার নেই -->
<h1>Home Page</h1>
<p>Clean and concise view code.</p>

(নোট: পরের লেকচারগুলোতে ইনস্ট্রাক্টর হয়তো _ViewStart.cshtml নিয়ে বিস্তারিত কথা বলবেন, তবে একজন স্মার্ট ডেভেলপার হিসেবে তোমার এটি এখনই জেনে রাখা উচিত!)

Graph View

Backlinks