Quartz 5

1. Creating Partial Views

5 min read

হ্যালো হাসিব! কোর্স আউটলাইন অনুযায়ী আমরা এখন একটি সম্পূর্ণ নতুন এবং অত্যন্ত গুরুত্বপূর্ণ সেকশন শুরু করতে যাচ্ছি— Section 10: Partial Views। আগের সেকশনে তুমি Layout Views নিয়ে কাজ করেছো, আর আজকের লেকচার “Creating Partial Views” (Lecture 114)-এ আমরা শিখবো কীভাবে View-এর মধ্যে Reusable HTML কন্টেন্ট তৈরি করতে হয়।

পরবর্তী লেকচারগুলোতে তুমি Partial View-তে ডাটা পাস করা শিখবে, তাই এই বেসিক লেকচারটি খুব ভালোভাবে বোঝা জরুরি।

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

  • Partial View কী: এটি হলো Reusable HTML কোড, যা C#-এর Method বা Function-এর মতো কাজ করে। একবার ডিফাইন করে যেকোনো View-তে যতবার খুশি কল করা যায়।
  • Naming Convention: Partial View-এর নামের শুরুতে আন্ডারস্কোর (_) ব্যবহার করা রিকমেন্ডেড (যেমন: _ListPartialView.cshtml)।
  • Location: এগুলোকে Views/Shared ফোল্ডারে রাখলে পুরো প্রজেক্টের যেকোনো জায়গা থেকে অ্যাক্সেস করা যায়।
  • Invocation Methods (কল করার উপায়): ১. <partial name="_ListPartialView" /> (Tag Helper) ২. @await Html.PartialAsync("_ListPartialView") (HTML Helper) ৩. @{ await Html.RenderPartialAsync("_ListPartialView"); } (HTML Helper)
  • The ViewImports Fix: Tag Helper কাজ করার জন্য _ViewImports.cshtml ফাইলে @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers ইমপোর্ট করা বাধ্যতামূলক।
  • Key Difference: PartialAsync কন্টেন্টকে Parent View-তে রিটার্ন করে, আর RenderPartialAsync কন্টেন্টকে সরাসরি ব্রাউজারে স্ট্রিম (Stream) করে (পারফরম্যান্সের জন্য ভালো)।

Comprehensive Breakdown

১. Partial View কী এবং কেন ব্যবহার করবো? [Priority: 10/10]

Why: ধরো, তোমার প্রজেক্টে ১০টি আলাদা View আছে। এর মধ্যে ৩টি View-তে একটি সেম ‘List of Cities’ বা ‘Navigation Card’ দেখাতে হবে। তুমি যদি ৩ জায়গায় সেম HTML কোড কপি-পেস্ট করো, তাহলে কোড মেইনটেইন করা কঠিন হবে (এক জায়গায় পরিবর্তন করলে সব জায়গায় করতে হবে)। Concept: এই সমস্যার সমাধানে আমরা ঐ নির্দিষ্ট HTML কোডটুকুকে একটি আলাদা ফাইলে রাখি, যাকে Partial View বলে। এরপর যে View-তে এটি দরকার, সেখানে শুধু Partial View-টিকে কল করে দিই। এটি অনেকটা C#-এর Reusable Function-এর মতো।

২. প্রজেক্ট সেটআপ এবং Layout তৈরি [Priority: 4/10]

লেকচারের শুরুতে একটি বেসিক MVC প্রজেক্ট সেটআপ করা হয়েছে। (যেহেতু তুমি এগুলো আগে থেকেই জানো, তাই সংক্ষেপে দিচ্ছি)।

  • Program.cs-এ AddControllersWithViews() এবং UseStaticFiles() অ্যাড করা হয়েছে।
  • HomeController তৈরি করে Index এবং About Action Method যোগ করা হয়েছে।
  • Views/Shared ফোল্ডারে _Layout.cshtml তৈরি করে Views/_ViewStart.cshtml এর মাধ্যমে গ্লোবালি অ্যাপ্লাই করা হয়েছে।

৩. Partial View তৈরি করা (Creating the Partial View) [Priority: 10/10]

  • কোথায় বানাবো? Views/Shared ফোল্ডারে। কারণ Shared ফোল্ডারে রাখলে এটি গ্লোবালি অ্যাক্সেসেবল হয়।
  • নামকরণ: নামের শুরুতে _ (underscore) দেওয়াটা গ্লোবাল স্ট্যান্ডার্ড। লেকচারার এর নাম দিয়েছেন _ListPartialView.cshtml।

Code Implementation (_ListPartialView.cshtml):

<!-- Views/Shared/_ListPartialView.cshtml -->
<div class="list-container">
    <h2>List of Cities</h2>
    <ul class="list">
        <li>New York</li>
        <li>London</li>
        <li>Dhaka</li>
        <li>Tokyo</li>
    </ul>
</div>

৪. Partial View ইনভোক (Call) করার ৩টি উপায় [Priority: 10/10]

Partial View তৈরি করার পর, সেটিকে Parent View (যেমন: Index.cshtml বা About.cshtml)-এ রেন্ডার করার ৩টি উপায় আছে।

Way 1: Tag Helper ব্যবহার করে (Modern & Recommended) ASP.NET Core-এ <partial> নামক একটি Tag Helper আছে।

<!-- Views/Home/Index.cshtml -->
<h2>Welcome to Home Page</h2>
 
<!-- Invoking Partial View -->
<partial name="_ListPartialView" />

(এখানে .cshtml এক্সটেনশন দেওয়ার প্রয়োজন নেই, ফ্রেমওয়ার্ক নিজে থেকে ধরে নেয়)।

The ViewImports Error & Fix [Priority: 10/10] লেকচারার যখন প্রথমবার Tag Helper দিয়ে রান করলেন, তখন Partial View-এর কন্টেন্ট ব্রাউজারে দেখায়নি। Why? কারণ, ASP.NET Core-এ বাই ডিফল্ট Tag Helpers ইমপোর্ট করা থাকে না। Fix: Views ফোল্ডারে _ViewImports.cshtml নামে একটি ফাইল তৈরি করে নিচের কোডটি লিখতে হবে:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

এটি লেখার পর Tag Helper পুরো অ্যাপ্লিকেশনে কাজ করা শুরু করবে।

Way 2: PartialAsync (HTML Helper) এটি একটি মেথড যা C# কোড ব্লক হিসেবে লিখতে হয়।

<!-- Views/Home/About.cshtml -->
<h2>About Us</h2>
 
@await Html.PartialAsync("_ListPartialView")

Way 3: RenderPartialAsync (HTML Helper) এই মেথডটি সরাসরি কোনো ভ্যালু রিটার্ন করে না (void রিটার্ন টাইপ), তাই একে C#-এর কোড ব্লকের (@{ }) ভেতরে স্টেটমেন্ট হিসেবে লিখতে হয়।

<!-- Views/Home/About.cshtml -->
<h2>About Us</h2>
 
@{
    await Html.RenderPartialAsync("_ListPartialView");
}

৫. Interview Question: PartialAsync vs RenderPartialAsync [Priority: 10/10]

এটি ইন্টারভিউয়ের জন্য খুবই গুরুত্বপূর্ণ একটি প্রশ্ন।

  • PartialAsync (বা <partial> tag helper): এটি Partial View-এর HTML কন্টেন্টকে IHtmlContent হিসেবে Parent View-এর কাছে রিটার্ন করে। Parent View তারপর সেটিকে নিজের কন্টেন্টের সাথে মিলিয়ে রেন্ডার করে। চাইলে এর রিটার্ন ভ্যালু একটি ভ্যারিয়েবলে সেভ করে রাখা যায়।
  • RenderPartialAsync: এটি Parent View-কে কিছু রিটার্ন করে না (এর রিটার্ন টাইপ void)। এটি Partial View-এর কন্টেন্টকে সরাসরি ব্রাউজারের HTTP Response Stream-এ পাঠিয়ে দেয়।
  • Conclusion: যেহেতু RenderPartialAsync সরাসরি ব্রাউজারে কন্টেন্ট স্ট্রিম করে, তাই লার্জ স্কেল অ্যাপ্লিকেশনে এর Performance ভালো। তবে সিনট্যাক্স ক্লিন রাখার জন্য বর্তমানে Tag Helper (<partial>) সবচেয়ে বেশি ব্যবহৃত হয়।

VS / VS Code Shortcuts (For faster development)

  • Create new File/Folder (VS Code): এক্সপ্লোরারে ফোকাস করে A চাপলে নতুন ফাইল এবং Shift + A চাপলে নতুন ফোল্ডার তৈরি করার অপশন আসে।
  • Format Document: Shift + Alt + F (কোড এলাইন করার জন্য)।
  • Go to View: Controller-এর Action Method-এর নামের উপর রাইট ক্লিক করে “Go To View” (VS2022) বা F12 (VS Code with C# Dev Kit)।

Best Practices & .NET 10 Context

Best Practices for Partial Views:

  1. Prefix with Underscore: Partial View-এর নাম সবসময় _ দিয়ে শুরু করবে (যেমন: _ProductCard.cshtml)। এটি দেখলে অন্য ডেভেলপাররা সহজেই বুঝতে পারবে এটি একটি Partial View, কোনো ইন্ডিপেন্ডেন্ট পেজ নয়।
  2. No Business Logic: Partial View-এর ভেতরে কখনো ডাটাবেস কল বা কমপ্লেক্স Business Logic লিখবে না। এটি শুধুমাত্র UI (HTML) রেন্ডার করার জন্য হওয়া উচিত। যদি Business Logic-এর প্রয়োজন হয়, তবে Partial View-এর বদলে View Components ব্যবহার করতে হবে (যা তুমি পরের সেকশনে শিখবে)।
  3. Use Tag Helpers: HTML Helpers (Html.PartialAsync)-এর চেয়ে Tag Helper (<partial>) ব্যবহার করা ক্লিন এবং HTML-এর সাথে বেশি মানানসই। তাই সবসময় Tag Helper ব্যবহার করার চেষ্টা করবে।

.NET 10 Context (.NET 10-এ Partial View): ASP.NET Core 10-এ MVC Partial View-এর কোর মেকানিজম বা সিনট্যাক্সে কোনো পরিবর্তন আসেনি। তুমি .NET 6-এ যেভাবে <partial name="_Name" /> লিখছো, .NET 10-এও ঠিক একইভাবে লিখতে হবে। তবে .NET 10-এ পারফরম্যান্স অপটিমাইজেশনের কারণে Tag Helper-গুলো ব্যাকএন্ডে আরও ফাস্ট রেন্ডার হয়। মডার্ন .NET 10 প্রোজেক্টে C# ডেভেলপাররা Html.RenderPartialAsync-এর চেয়ে <partial> ট্যাগ হেল্পারকেই ইন্ডাস্ট্রিতে ডিফল্ট স্ট্যান্ডার্ড হিসেবে ধরে নিয়েছে, কারণ এটি রিডযোগ্যতা (Readability) বাড়ায়।

<!-- Modern .NET 10 Standard Practice -->
<partial name="_ListPartialView" />

হাসিব, Partial View-এর বেসিক কনসেপ্ট কি ক্লিয়ার হয়েছে? তুমি রেডি হলে আমরা নেক্সট লেকচার “Partial Views with ViewData”-তে মুভ করতে পারি!

Graph View

Backlinks