Quartz 5

3. Layout View for Multiple View

5 min read

হ্যালো হাসিব! আজকের লেকচারটি হলো “Layout View for Multiple Views”। আগের লেকচারগুলোতে আমরা Layout View তৈরি করেছিলাম এবং একটিমাত্র View-এর সাথে সেটি কানেক্ট করেছিলাম। এই লেকচারে আমরা একাধিক Controller-এর আন্ডারে অনেকগুলো View তৈরি করব এবং দেখব কীভাবে একটিমাত্র Layout View পুরো অ্যাপ্লিকেশনের ডিজাইনকে নিয়ন্ত্রণ করে। এছাড়াও এখানে MVC-এর অত্যন্ত গুরুত্বপূর্ণ Execution Sequence নিয়ে আলোচনা করা হয়েছে।

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

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

  • Creating Multiple Views: HomeController এবং ProductsController-এর Action Method-গুলোর জন্য আলাদা আলাদা View (যেমন: About, Contact, Search, Order) তৈরি করা।
  • Auto Folder Placement: Action Method-এর ওপর Right-click করে View তৈরি করলে Visual Studio স্বয়ংক্রিয়ভাবে সঠিক ফোল্ডারে (যেমন: Views/Products) ফাইলটি তৈরি করে দেয়।
  • Connecting Layout: প্রতিটি নতুন View-এর শুরুতে Layout = "~/Views/Shared/_Layout.cshtml"; ডিফাইন করা।
  • Route Matching: Layout-এর Navigation Bar-এর href লিঙ্কের সাথে Controller-এর Action Method-এর Route হুবহু মিলতে হবে।
  • Core Benefit: CSS ইমপোর্ট এবং Navigation Bar লেআউটে মাত্র একবার লেখা হয়েছে, কিন্তু তা সব View-তে কাজ করছে (Code Reusability)।
  • Execution Sequence: Framework সবসময় একটি নির্দিষ্ট সিরিয়ালে ফাইল রান করে: ViewImports ➡️ ViewStart ➡️ Actual View ➡️ Layout View।

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

১. একাধিক View তৈরি করা এবং Auto Folder Placement (Priority: 8/10)

কী (What): প্রজেক্টে আমাদের দুটি Controller আছে (Home এবং Products)। এগুলোর প্রতিটি Action Method-এর জন্য আমাদের .cshtml ফাইল তৈরি করতে হবে। কেন (Why): ইউজার যখন নির্দিষ্ট Route-এ রিকোয়েস্ট পাঠাবে, তখন তাকে একটি রেসপন্স বা UI দেখানোর জন্য এই View গুলো প্রয়োজন।

Visual Studio-এর সুবিধা: যখন তুমি Controller-এর ভেতরের কোনো Action Method-এর ওপর Right-click করে “Add View” সিলেক্ট করো, তখন ফ্রেমওয়ার্ক স্বয়ংক্রিয়ভাবে Views ফোল্ডারের ভেতর Controller-এর নামানুসারে একটি ফোল্ডার তৈরি করে (যদি আগে থেকে না থাকে) এবং সেখানে ফাইলটি সেভ করে।

  • HomeController -> Views/Home/About.cshtml
  • ProductsController -> Views/Products/Order.cshtml এটি ম্যানুয়ালি ফোল্ডার তৈরির ঝামেলা বাঁচায় এবং Naming Convention ঠিক রাখে।

২. প্রতিটি View-তে Layout প্রপার্টি ডিক্লেয়ার করা (Priority: 9/10)

লেকচারে দেখানো হয়েছে যে, প্রতিটি View (যেমন: About, Contact, Search, Order) তৈরি করার পর ডিফল্ট কোড মুছে ফেলে নিচের কোডটি Copy-Paste করা হচ্ছে।

@{
    // লেআউটের পাথ নির্দিষ্ট করা হচ্ছে
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<!-- নিজস্ব কনটেন্ট -->
<h1>About Company</h1>
<p>This is the about page content.</p>

কেন (Why): Layout প্রপার্টি ডিক্লেয়ার না করলে 해당 View-টি Layout View-কে চিনতে পারবে না এবং পেজটি কোনো Header বা Footer ছাড়াই একেবারে ব্ল্যাঙ্ক HTML হিসেবে রেন্ডার হবে।

কী (What): _Layout.cshtml-এ আমরা যে Navigation Bar তৈরি করেছিলাম, সেখানকার Hyperlink (href) এবং Controller-এর Action Method-এর ওপরে লেখা [Route("...")] হুবহু এক হতে হবে।

কেন (Why): ইউজার যখন “Search Products” লিঙ্কে ক্লিক করবে, তখন ব্রাউজার ঐ href-এর URL-এ রিকোয়েস্ট পাঠাবে। রাউটিং ইঞ্জিন তখন খুঁজবে এই URL-এর সাথে কোন Action Method ম্যাচ করে।

উদাহরণ: Layout View (_Layout.cshtml):

<li><a href="/search-products">Search Products</a></li>

Controller (ProductsController.cs):

[Route("/search-products")] // এই Route এবং href হুবহু মিলতে হবে
public IActionResult Search()
{
    return View();
}

৪. Layout View-এর মূল সুবিধা (Code Reusability) (Priority: 10/10)

এই ধাপে এসে তুমি Layout View-এর আসল পাওয়ার বুঝতে পারবে। আমাদের এখন প্রায় ৬টি আলাদা আলাদা View আছে। কিন্তু আমরা CSS ফাইল ইমপোর্ট করেছি বা Navbar-এর কোড লিখেছি মাত্র ১ বার (_Layout.cshtml-এ)। এখন যদি Navbar-এ নতুন কোনো মেনু অ্যাড করতে হয়, তবে ৬টি ফাইলে গিয়ে চেঞ্জ করার কোনো দরকার নেই; শুধু Layout-এ চেঞ্জ করলেই পুরো অ্যাপ্লিকেশনে সেটি আপডেট হয়ে যাবে। এটি সফটওয়্যার ইঞ্জিনিয়ারিংয়ের DRY (Don’t Repeat Yourself) প্রিন্সিপাল নিশ্চিত করে।

৫. MVC View Execution Sequence (ইন্টারভিউয়ের জন্য অত্যন্ত গুরুত্বপূর্ণ) (Priority: 10/10)

ভিডিওর শেষ অংশে ইন্সট্রাক্টর দেখিয়েছেন যে, যখন একটি View কল হয়, তখন পেছনের ইঞ্জিন আসলে কোন সিরিয়ালে ফাইলগুলো এক্সিকিউট করে। এটি হলো:

  1. _ViewImports.cshtml: সবার আগে এটি প্রসেস হয়। এর কাজ হলো প্রয়োজনীয় Namespaces ইমপোর্ট করা। এটি কম্পাইল টাইমে View-এর সাথে মার্জ হয়ে যায়, তাই এখানে Breakpoint কাজ করে না।
  2. _ViewStart.cshtml: এরপর এটি এক্সিকিউট হয়। (এটি নিয়ে লেকচার ১০৮-এ বিস্তারিত আসবে)।
  3. Actual View (যেমন: Index.cshtml): এরপর তোমার রিকোয়েস্ট করা মূল View-এর HTML এবং Razor Code এক্সিকিউট হয়।
  4. _Layout.cshtml: সবার শেষে Layout এক্সিকিউট হয় এবং ৩ নম্বর ধাপে তৈরি হওয়া কনটেন্ট Layout-এর @RenderBody()-তে এসে বসে যায়।

(নোট: ViewImports এবং ViewStart যদি গ্লোবাল ফোল্ডারে এবং স্পেসিফিক ফোল্ডারে আলাদা আলাদা থাকে, তবে প্রথমে Global-টি রান হয়, তারপর Local-টি রান হয়।)

⌨️ Editor Shortcuts (VS & VS Code)

  • Visual Studio: Action Method থেকে সরাসরি তার View ফাইলে যাওয়ার শর্টকাট হলো Action Method-এর নামের ওপর ক্লিক করে Ctrl + M, Ctrl + G প্রেস করা (Go To View)।
  • VS Code: VS Code-এ “C# Dev Kit” এবং “ASP.NET Core Snippets” এক্সটেনশন ব্যবহার করলে ফোল্ডার স্ট্রাকচার মেইনটেইন করা সহজ হয়।

🏆 Best Practices & .NET 10 Smarter Approach

The Problem in the Transcript: লেকচারে তুমি দেখেছো যে, ইন্সট্রাক্টর বারবার কপি করে প্রতিটি ফাইলে Layout = "~/Views/Shared/_Layout.cshtml"; বসাচ্ছেন। ৬টি View-এর জন্য এটি করা গেলেও, রিয়েল লাইফ প্রজেক্টে যখন ১০০+ View থাকবে, তখন ১০০টি ফাইলে এই কোড কপি-পেস্ট করা অত্যন্ত বিরক্তিকর এবং Bad Practice।

The Smarter Approach (Using _ViewStart.cshtml): আধুনিক ASP.NET Core MVC (এবং .NET 10)-তে আমরা প্রতিটি ফাইলে Layout ডিক্লেয়ার করি না। এর বদলে আমরা Views ফোল্ডারের রুট ডিরেক্টরিতে _ViewStart.cshtml নামে একটি ফাইল তৈরি করি।

Implementation:

১. Views ফোল্ডারের ভেতরে _ViewStart.cshtml ফাইল তৈরি করো:

// Views/_ViewStart.cshtml
@{
    // এটি পুরো অ্যাপ্লিকেশনের সব View-এর জন্য গ্লোবাল লেআউট সেট করে দেবে
    Layout = "_Layout"; 
}

২. এখন তোমার About.cshtml বা Order.cshtml থেকে Layout-এর ব্লকটি সম্পূর্ণ মুছে ফেলো:

<!-- Views/Home/About.cshtml -->
<!-- এখানে Layout ডিফাইন করার কোনো দরকার নেই! কোড হবে একদম ক্লিন। -->
 
<h1>About Company</h1>
<p>This is the about page content.</p>

কেন এটি ভালো? Execution Sequence অনুযায়ী, যেকোনো View রান হওয়ার ঠিক আগে _ViewStart.cshtml রান হয়। ফলে সে নিজ থেকেই View-টিকে বলে দেয় যে “তোমার Layout হলো _Layout.cshtml”। এতে করে তোমার শত শত ফাইলের কোড ক্লিন থাকে এবং রিপিটেশন কমে। ইন্সট্রাক্টর হয়তো পরবর্তী লেকচারেই (১০৮ নম্বর) এটি কভার করবেন, তবে বেস্ট প্র্যাকটিস হিসেবে তোমার এটি আগে থেকেই জেনে রাখা উচিত!

Graph View

Backlinks