Quartz 5

2. Creating View Components - 02

4 min read

হ্যালো হাসিব! কোর্স আউটলাইন অনুযায়ী, আমরা এখন Section 11: View Components-এর দ্বিতীয় লেকচার “Creating View Components - Part 2” (Lecture 121)-এ আছি। এই লেকচারে আমরা দেখবো কীভাবে View Component-এর ভিউ ফাইল তৈরি করতে হয়, কীভাবে একে কল করতে হয় এবং এর ট্যাগ হেল্পার মেকানিজম কীভাবে কাজ করে।

চলো, পুরো প্রসেসটিকে ধাপে ধাপে ডিকোড করে ফেলি।

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

  • The Default View Location: View Component-এর HTML ফাইলটি সবসময় Views/Shared/Components/[ComponentName]/Default.cshtml পাথে রাখতে হয়।
  • Changing View Name: যদি ভিউ ফাইলের নাম Default.cshtml না দিয়ে অন্য কিছু (যেমন: Sample.cshtml) দেওয়া হয়, তবে InvokeAsync() মেথডে return View("Sample"); লিখে সেটা স্পষ্টভাবে বলে দিতে হবে।
  • Invocation Way 1 (Method Call): ভিউ থেকে @await Component.InvokeAsync("Grid") ব্যবহার করে View Component কল করা যায়।
  • Invocation Way 2 (Tag Helper): _ViewImports.cshtml-এ പ്രোজেক্ট অ্যাসেম্বলি ইমপোর্ট করার পর <vc:grid></vc:grid> (Slug Case) ব্যবহার করে কল করা যায়।
  • Execution Flow: Parent View -> View Component Class (InvokeAsync) -> Partial View -> Back to Parent View।

Comprehensive Breakdown

১. View Component-এর View ফাইল তৈরি করা [Priority: 10/10]

আগের লেকচারে আমরা GridViewComponent ক্লাস বানিয়েছিলাম। এই ক্লাসের কাজ হলো একটি ভিউ রিটার্ন করা। কিন্তু সেই ভিউ ফাইলটি কোথায় থাকবে? ASP.NET Core-এ এর জন্য একটি স্ট্রিক্ট (Strict) লোকেশন আছে।

Step A: ফোল্ডার স্ট্রাকচার তৈরি

  1. Views/Shared ফোল্ডারে যাও।
  2. সেখানে Components নামে একটি ফোল্ডার তৈরি করো (এই নামটা ফিক্সড, চেঞ্জ করা যাবে না)।
  3. Components-এর ভেতরে Grid নামে আরেকটি ফোল্ডার তৈরি করো (যেহেতু আমাদের কম্পোনেন্টের নাম GridViewComponent, তাই পেছনের ‘ViewComponent’ বাদ দিয়ে শুধু Grid নাম হবে)।

Step B: View ফাইল তৈরি

  1. Views/Shared/Components/Grid ফোল্ডারে Default.cshtml নামে একটি Razor View Empty ফাইল তৈরি করো।
  2. সেখানে একটি বেসিক HTML টেবিল ডিজাইন করো।

Code Implementation (Views/Shared/Components/Grid/Default.cshtml):

<div class="box">
    <h2>List of Persons</h2>
    <table class="w-100">
        <thead>
            <tr>
                <th>S.No</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
            </tr>
            <!-- More rows here -->
        </tbody>
    </table>
</div>

২. View ফাইলের নাম পরিবর্তন করা (Custom View Name) [Priority: 8/10]

ডিফল্টভাবে ফ্রেমওয়ার্ক Default.cshtml ফাইল খোঁজে। কিন্তু তুমি যদি ফাইলের নাম পরিবর্তন করে Sample.cshtml রাখো, তাহলে তুমি Error খাবে, কারণ ফ্রেমওয়ার্ক ফাইলটি খুঁজে পাবে না।

  • The Fix: যদি ফাইলের নাম ভিন্ন হয়, তবে C# ক্লাসের return View() স্টেটমেন্টে সেই নাম বলে দিতে হবে।

Code Implementation (ViewComponents/GridViewComponent.cs):

public async Task<IViewComponentResult> InvokeAsync()
{
    // যদি ফাইলের নাম Default.cshtml না হয়ে Sample.cshtml হয়
    return View("Sample"); 
}

৩. View Component-কে কল করার উপায় (Invocation Methods) [Priority: 10/10]

এখন আমাদের View Component রেডি। প্যারেন্ট ভিউ (যেমন: Index.cshtml বা About.cshtml) থেকে একে ২ ভাবে কল করা যায়।

Way 1: Asynchronous Method Call (Classic Way) এটি সবচেয়ে কমন পদ্ধতি।

<!-- Views/Home/Index.cshtml -->
<h2>Welcome to Home Page</h2>
 
<!-- Invoking View Component -->
@await Component.InvokeAsync("Grid")

Way 2: Tag Helper Call (Modern Way) [Priority: 10/10] এটি HTML ট্যাগ-এর মতো দেখতে হয় বলে ক্লিন কোড লেখা যায়। তবে এটি কাজ করানোর জন্য _ViewImports.cshtml ফাইলে তোমার প্রোজেক্ট অ্যাসেম্বলি ইমপোর্ট করতে হবে।

  • Step A: _ViewImports.cshtml-এ অ্যাসেম্বলি অ্যাড করা:
<!-- Views/_ViewImports.cshtml -->
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, ViewComponentsExample <!-- এখানে 'ViewComponentsExample' হলো তোমার প্রোজেক্টের নাম -->
  • Step B: ভিউ ফাইলে vc: প্রিফিক্স ব্যবহার করে কল করা:
<!-- Views/Home/About.cshtml -->
<h2>About Us</h2>
 
<!-- Using Tag Helper -->
<vc:grid></vc:grid>
  • Slug Case Rule: যদি তোমার View Component-এর নাম CamelCase বা PascalCase হয় (যেমন: ProductList), তবে Tag Helper-এ লেখার সময় তা kebab-case (বা slug case)-এ লিখতে হবে (যেমন: <vc:product-list></vc:product-list>)।

৪. Execution Flow (কীভাবে এক্সিকিউট হচ্ছে?) [Priority: 9/10]

লেকচারার ব্রেকপয়েন্ট দিয়ে ফ্লো-টা বুঝিয়েছেন:

  1. ইউজার Home/Index রিকোয়েস্ট করে।
  2. Index.cshtml রেন্ডার হওয়া শুরু হয়।
  3. যখন লাইনটি @await Component.InvokeAsync("Grid")-এ আসে, এক্সিকিউশন থেমে যায় এবং কলটি চলে যায় GridViewComponent.cs-এর InvokeAsync মেথডে।
  4. সেখানে (C#-এ) ডাটাবেস কল বা লজিক এক্সিকিউট হয় (আপাতত ফাঁকা)।
  5. এরপর মেথডটি return View() কল করে Default.cshtml-কে এক্সিকিউট করে।
  6. Default.cshtml-এর রেন্ডার করা HTML ফিরে আসে Index.cshtml-এর সেই নির্দিষ্ট জায়গায়।
  7. সবশেষে পুরো পেজটি ব্রাউজারে সার্ভ হয়।

VS / VS Code Shortcuts

  • Rename File: এক্সপ্লোরারে ফাইলের উপর ক্লিক করে F2 চাপলে রিনেম করা যায়।
  • Format Document: Shift + Alt + F (HTML/Razor কোড সুন্দরভাবে এলাইন করার জন্য)।

Best Practices & .NET 10 Context

Best Practices for View Components:

  1. Prefer Tag Helpers: Component.InvokeAsync এর চেয়ে <vc:component-name> ট্যাগ হেল্পার ব্যবহার করা বেশি স্ট্যান্ডার্ড, কারণ এটি HTML-এর সাথে মিশে থাকে এবং রিডযোগ্যতা (Readability) বাড়ায়।
  2. Keep UI Simple: View Component-এর কাজ ডাটা প্রসেস করে UI-কে দেওয়া। এর Partial View (Default.cshtml)-এ কোনো লজিক (C# if-else ছাড়া) লেখা উচিত নয়।

.NET 10 Context: ASP.NET Core 10-এ View Component-এর Invocation, Tag Helper, এবং ফোল্ডার স্ট্রাকচার .NET 6-এর মতোই হুবহু এক।

তবে মডার্ন .NET 10-এ _ViewImports.cshtml এ ট্যাগ হেল্পার ইমপোর্ট করার কনসেপ্টটি এখনো বহাল আছে, কারণ Tag Helpers সিকিউরড এবং ফাস্ট এক্সিকিউশন নিশ্চিত করে।

<!-- Modern .NET 10 Standard Practice -->
<vc:grid></vc:grid>

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

Graph View

Backlinks