হ্যালো হাসিব! তুমি এখন Section 11: View Components-এর পঞ্চম লেকচার “View Components with Parameters” (Lecture 124)-এ আছো। এই লেকচারটি আগের লেকচারগুলোর একটি লজিক্যাল সিক্যুয়েল। আগে আমরা View Component-এর ভেতরে হার্ডকোডেড ডাটা দিয়েছিলাম। এখন আমরা শিখবো কীভাবে Parent View (যেমন Index.cshtml) থেকে View Component-এর ভেতরে ডাটা (প্যারামিটার হিসেবে) পাঠাতে হয়, যাতে প্রতিবার কল করার সময় আলাদা আলাদা ডাটা দেখানো যায়।
চলো, লেকচারের প্রতিটি কনসেপ্ট বিস্তারিতভাবে ডিকোড করি।
সারসংক্ষেপ (Quick Revision List)
-
The Goal: Parent View থেকে View Component কল করার সময় কিছু ডাটা/অবজেক্ট প্যারামিটার হিসেবে পাঠানো।
-
Method 1: Using
Component.InvokeAsync: -
ভিউতে:
@await Component.InvokeAsync("Grid", new { grid = ModelObject }) -
ক্লাসে:
public async Task<IViewComponentResult> InvokeAsync(PersonGridModel grid) -
Method 2: Using Tag Helper (
<vc:>): -
ভিউতে:
<vc:grid grid="ModelObject"></vc:grid> -
Rule of Thumb: ভিউ থেকে যে প্যারামিটারের নাম দেওয়া হবে (যেমন
grid), View Component ক্লাসের মেথডেও হুবহু সেই নামের প্যারামিটার থাকতে হবে। -
The Null Reference Danger: যদি প্যারামিটার এক্সপেক্ট করা হয় কিন্তু না পাঠানো হয়, তবে অ্যাপ্লিকেশনে
NullReferenceExceptionখাবে।
Comprehensive Breakdown
১. Parameters পাঠানোর ধারণা (The Concept) [Priority: 10/10]
আগের লেকচারে GridViewComponent ক্লাসের ভেতরে ডাটা তৈরি করা হয়েছিল। ফলে যে পেজ থেকেই কল করা হোক না কেন, সবসময় “Persons List” দেখাতো। কিন্তু আমরা চাই, Index পেজ থেকে কল করলে “Persons”, আর About পেজ থেকে কল করলে “Employees” দেখাক।
এর জন্য Parent View থেকে কল করার সময় ডাটা প্যারামিটার হিসেবে পাঠাতে হবে এবং View Component ক্লাসের InvokeAsync মেথডে সেই প্যারামিটার রিসিভ করতে হবে।
২. InvokeAsync মেথড আপডেট করা (Receiving Parameters) [Priority: 10/10]
প্রথমে GridViewComponent ক্লাসের InvokeAsync মেথডে একটি প্যারামিটার অ্যাড করতে হবে। লেকচারার এখানে একটি PersonGridModel টাইপের প্যারামিটার অ্যাড করেছেন, যার নাম দিয়েছেন grid।
Code Implementation (ViewComponents/GridViewComponent.cs):
using ViewComponentsExample.Models;
using Microsoft.AspNetCore.Mvc;
public class GridViewComponent : ViewComponent
{
// ১. Parameter 'grid' রিসিভ করা হচ্ছে
public async Task<IViewComponentResult> InvokeAsync(PersonGridModel grid)
{
// ২. রিসিভ করা ডাটাটিই সরাসরি View-তে রিটার্ন করা হচ্ছে
return View("Sample", grid);
}
}
(লক্ষ্য করো: এখন আর ক্লাসের ভেতরে আমরা নতুন করে অবজেক্ট তৈরি করছি না, শুধু রিসিভ করে পাস করে দিচ্ছি)।
৩. Asynchronous Method (Classic Way) দিয়ে Parameter পাঠানো [Priority: 10/10]
Parent View (Index.cshtml)-এ আমরা একটি মডেল অবজেক্ট তৈরি করে সেটিকে InvokeAsync-এর দ্বিতীয় আর্গুমেন্ট হিসেবে পাঠাবো। এখানে একটি Anonymous Object (new { ... }) ব্যবহার করতে হয়।
Code Implementation (Views/Home/Index.cshtml):
<!-- ১. C# ব্লকে Model অবজেক্ট তৈরি -->
@{
var personModel = new PersonGridModel()
{
GridTitle = "List of Persons",
Persons = new List<Person>()
{
new Person() { PersonName = "John", JobTitle = "Manager" },
new Person() { PersonName = "Smith", JobTitle = "Clerk" }
}
};
}
<!-- ২. Parameter পাঠানো -->
<!-- Note: 'grid' নামটা ক্লাসের প্যারামিটার নামের সাথে হুবহু মিলতে হবে -->
@await Component.InvokeAsync("Grid", new { grid = personModel })
৪. Tag Helper দিয়ে Parameter পাঠানো (Modern Way) [Priority: 10/10]
About.cshtml-এ লেকচারার দেখিয়েছেন কীভাবে Tag Helper ব্যবহার করে প্যারামিটার পাঠাতে হয়। এটি HTML অ্যাট্রিবিউটের মতো কাজ করে।
Code Implementation (Views/Home/About.cshtml):
<!-- ১. C# ব্লকে Model অবজেক্ট তৈরি (Employees List) -->
@{
var employeeModel = new PersonGridModel()
{
GridTitle = "List of Employees",
Persons = new List<Person>()
{
new Person() { PersonName = "Alice", JobTitle = "HR" },
new Person() { PersonName = "Bob", JobTitle = "Developer" }
}
};
}
<!-- ২. Parameter পাঠানো using Attribute -->
<!-- Note: অ্যাট্রিবিউটের নাম 'grid' ক্লাসের প্যারামিটার নামের সাথে মিলতে হবে -->
<vc:grid grid="employeeModel"></vc:grid>
৫. The Null Reference Danger & Fix [Priority: 9/10]
যখন তুমি View Component-এর InvokeAsync মেথডে প্যারামিটার এক্সপেক্ট করছো, কিন্তু কোনো View থেকে কল করার সময় প্যারামিটার পাস করোনি (যেমন <vc:grid></vc:grid>), তখন ফ্রেমওয়ার্ক ঐ প্যারামিটারকে null হিসেবে ধরে নেয়।
এর ফলে যখন Partial View (Sample.cshtml) ঐ null অবজেক্ট থেকে ডাটা পড়তে যাবে, তখন সে NullReferenceException খাবে।
- Solution 1: সব জায়গায় অবশ্যই প্যারামিটার পাস করা।
- Solution 2 (Best Practice): C# ক্লাসে ডিফল্ট ভ্যালু চেক করা বা অপশনাল প্যারামিটার রাখা।
VS / VS Code Shortcuts (For faster debugging)
- Find All References: কোনো মেথড বা ক্লাসের নামের উপর
Shift + F12চাপলে প্রজেক্টের কোথায় কোথায় সেটি কল হয়েছে তা দেখা যায়। (View Component কোথায় কোথায় কল হয়েছে তা ট্র্যাক করতে এটি কাজে লাগে)।
Best Practices & .NET 10 Context
Best Practices for View Component Parameters:
- Parameter Null Checking: C# ক্লাসের
InvokeAsyncমেথডে সবসময় Null Check রাখা উচিত।
public async Task<IViewComponentResult> InvokeAsync(PersonGridModel grid)
{
if (grid == null)
{
// Fallback বা Default model রিটার্ন করা
return View("Sample", new PersonGridModel());
}
return View("Sample", grid);
}
- Avoid Too Many Parameters: View Component-এ অনেকগুলো প্যারামিটার (যেমন:
int x, int y, string name, bool flag) না পাঠিয়ে, সেগুলোকে একটি Model Class (ViewModel)-এর ভেতরে র্যাপ (wrap) করে একটি সিঙ্গেল অবজেক্ট হিসেবে পাঠানো ভালো।
.NET 10 Context: ASP.NET Core 10-এ View Component Parameters-এর মেকানিজম .NET 6-এর মতোই আছে। তবে আধুনিক C#-এ আমরা মেথড প্যারামিটারকে আরও সেইফ করতে পারি Nullable Reference Types এবং Default parameters ব্যবহার করে:
// Modern .NET 10 approach with explicit nullability and fallback
public async Task<IViewComponentResult> InvokeAsync(PersonGridModel? grid = null)
{
grid ??= new PersonGridModel { GridTitle = "Default", Persons = [] };
return View("Sample", grid);
}
হাসিব, View Component-এ প্যারামিটার পাস করার কনসেপ্ট কি ক্লিয়ার হয়েছে? তুমি রেডি থাকলে আমরা এই সেকশনের একদম শেষ লেকচার “ViewComponentResult” শুরু করতে পারি, যেখানে আমরা শিখবো Controller থেকে কীভাবে সরাসরি View Component রিটার্ন করতে হয় (AJAX/Fetch-এর জন্য)।