4. Strongly Typed View Components

হ্যালো হাসিব! তুমি এখন Section 11: View Components-এর চতুর্থ লেকচার “Strongly Typed View Components” (Lecture 123)-এ আছো। আগের লেকচারে তুমি দেখেছিলে কীভাবে ViewData এবং ViewBag ব্যবহার করে View Component-এ ডাটা পাস করতে হয়। কিন্তু আমি আগেই বলেছিলাম, প্রফেশনাল লেভেলে সেটি একটি Bad Practice।

এই লেকচারে লেকচারার দেখিয়েছেন কীভাবে সবচেয়ে প্রফেশনাল এবং সেইফ উপায়ে Strongly Typed Models ব্যবহার করে View Component-এর Partial View-তে ডাটা পাঠাতে হয়। চলো, পুরো বিষয়টি ব্রেকডাউন করি।

---

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

• Strongly Typed View Component কী: যখন View Component-এর Partial View-কে কোনো নির্দিষ্ট Model Class-এর সাথে শক্তভাবে জুড়ে দেওয়া হয় (@model ডিক্লেয়ার করে)।
• কেন ব্যবহার করবো: ViewBag ব্যবহার করলে Type Casting-এর ঝামেলা থাকে এবং Auto-completion (Intellisense) পাওয়া যায় না। Strongly Typed Model ব্যবহার করলে এই সমস্যাগুলো থাকে না এবং Compile-time error চেকিং পাওয়া যায়।
• Backend Update: View Component Class-এর InvokeAsync মেথড থেকে return View("ViewName", modelObject); লিখতে হয়।
• Frontend Update: Partial View-এর একদম উপরে @model ModelClassName লিখে ডাটা রিসিভ করতে হয় এবং @Model.PropertyName ব্যবহার করে ডাটা প্রিন্ট করতে হয়।

---

Comprehensive Breakdown

১. C# ক্লাসে ViewData রিমুভ করে Model রিটার্ন করা [Priority: 10/10]

আগের লেকচারে আমরা ViewData["Grid"] = personGridModel; লিখেছিলাম। এখন সেই লাইনটি ডিলিট করে দিতে হবে। এর বদলে আমরা অবজেক্টটিকে সরাসরি return View() মেথডের প্যারামিটার হিসেবে পাস করবো।

Code Implementation (ViewComponents/GridViewComponent.cs):

using ViewComponentsExample.Models;
using Microsoft.AspNetCore.Mvc;
 
public class GridViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        // ১. Model অবজেক্ট তৈরি
        PersonGridModel personGridModel = new PersonGridModel()
        {
            GridTitle = "Persons List",
            Persons = new List<Person>()
            {
                new Person() { PersonName = "John", JobTitle = "Manager" },
                new Person() { PersonName = "Jones", JobTitle = "Asst. Manager" },
                new Person() { PersonName = "Smith", JobTitle = "Clerk" }
            }
        };
 
        // ২. Model অবজেক্ট সরাসরি View-তে পাস করা
        // First argument is ViewName, Second argument is the Model Object
        return View("Sample", personGridModel); 
        
        // Note: যদি View-এর নাম 'Default' হতো, তবে শুধু return View(personGridModel); লিখলেই চলতো।
    }
}
 

২. Partial View-কে Strongly Typed করা [Priority: 10/10]

এখন আমাদের Sample.cshtml ফাইলকে আপডেট করতে হবে যাতে সে এই Model অবজেক্টটিকে রিসিভ করতে পারে।

• ফাইলের একদম উপরে @model কি-ওয়ার্ড লিখে ক্লাসের নাম বলে দিতে হবে।
• ViewBag.Grid-এর বদলে ক্যাপিটাল @Model ব্যবহার করে প্রপার্টিগুলো কল করতে হবে।

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

<!-- Defining the Model Type (Strongly Typed) -->
@model PersonGridModel
 
<div class="box">
    <!-- Accessing GridTitle using Model property -->
    <h2>@Model.GridTitle</h2>
    
    <table class="w-100">
        <thead>
            <tr>
                <th>Person Name</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tbody>
            <!-- Accessing Persons list using Model property -->
            @foreach (Person person in Model.Persons)
            {
                <tr>
                    <td>@person.PersonName</td>
                    <td>@person.JobTitle</td>
                </tr>
            }
        </tbody>
    </table>
</div>
 

৩. 왜 (Why) Strongly Typed Model ই বেস্ট? (The Advantages) [Priority: 8/10]

1. Intellisense Support: যখন তুমি Model. লিখবে, তখন Visual Studio তোমাকে সাজেস্ট করবে যে GridTitle বা Persons নামে প্রপার্টি আছে। ViewBag ব্যবহার করলে এই সুবিধা পাওয়া যায় না, ফলে স্পেলিং মিসটেক হওয়ার বিশাল চান্স থাকে।
2. No Typecasting Required: ViewData থেকে ডাটা নিলে তাকে (PersonGridModel) লিখে টাইপকাস্ট করতে হতো, যা কোডকে জটিল করে তোলে।
3. Compile-time Safety: যদি তুমি ভুল করে @Model.GridTitles লেখো, প্রজেক্ট বিল্ড করার সময়ই এরর ধরিয়ে দেবে। কিন্তু ViewBag এর ক্ষেত্রে রানটাইমে (প্রজেক্ট রান করার পর) পেজ ক্র্যাশ করবে।

---

Best Practices

Best Practices for Strongly Typed View Components:

1. Always Prefer Models: View Component বা যেকোনো View-এর ক্ষেত্রে ViewBag বা ViewData সম্পূর্ণ অ্যাভয়েড করার চেষ্টা করবে। সবসময় একটি ডেডিকেটেড ViewModel (যেমন PersonGridModel) বানিয়ে ডাটা পাস করবে।
2. Null Checks: Partial View রেন্ডার করার সময় ডাটা null আছে কিনা তা চেক করে নেওয়া ভালো প্র্যাকটিস।

@model PersonGridModel
 
@if (Model != null && Model.Persons.Any())
{
    // Render the table
}
else
{
    <p>No persons found.</p>
}
 

.NET 10 Context: Strongly Typed View Component-এর এই পুরো মেকানিজম .NET Core এর জন্মলগ্ন থেকে শুরু করে .NET 10 পর্যন্ত একই আছে এবং এটিই ইন্ডাস্ট্রির সবচেয়ে রিলায়েবল এবং রেকমেন্ডেড উপায়।

হাসিব, এটি খুবই সহজ একটি আপডেট ছিল আগের লেকচারের তুলনায়। কনসেপ্ট কি ক্লিয়ার হয়েছে? তুমি রেডি থাকলে আমরা নেক্সট লেকচার “View Components with Parameters” শুরু করতে পারি, যেখানে আমরা শিখবো প্যারেন্ট ভিউ থেকে কীভাবে View Component-এ ডাটা পাঠাতে হয়।