হ্যালো হাসিব! কোর্স আউটলাইন অনুযায়ী আমরা এখন সম্পূর্ণ নতুন একটি সেকশন, Section 11: View Components শুরু করতে যাচ্ছি। আজকের লেকচার “Creating View Components - Part 1” (Lecture 120)-এ আমরা শিখবো View Component কী, কেন এটি Partial View-এর চেয়ে ভালো এবং কীভাবে এটি তৈরি করতে হয়।
এই টপিকটি প্রফেশনাল এবং স্কেলেবল প্রজেক্টের জন্য খুবই গুরুত্বপূর্ণ। চলো, লেকচারের প্রতিটি বিষয় বিস্তারিতভাবে ডিকোড করে ফেলি।
সারসংক্ষেপ (Quick Revision List)
- View Component কী: এটি Partial View-এর একটি আপগ্রেডেড ভার্সন। Partial View-তে শুধু UI (HTML) থাকে, কিন্তু View Component-এ UI-এর সাথে সাথে C# Programming Logic (যেমন: ডাটাবেস থেকে ডাটা আনা, ক্যালকুলেশন করা) যুক্ত থাকে।
- কেন ব্যবহার করবো: যখন কোনো Reusable UI-এর জন্য ডাটাবেস কল বা ব্যাকএন্ড লজিকের প্রয়োজন হয়, তখন View Component ব্যবহার করা হয়। (Partial View-এর নিজের কোনো লজিক থাকে না, সে Controller-এর উপর নির্ভরশীল)।
- তৈরি করার নিয়ম (Backend):
১. প্রজেক্টে
ViewComponentsফোল্ডার তৈরি করে একটি C# ক্লাস বানাতে হয় (যেমন:GridViewComponent.cs)। ২. ক্লাসটির নামের শেষেViewComponentথাকতে হবে এবং এটিViewComponentবেস ক্লাস থেকে ইনহেরিট করবে। ৩. এর ভেতরেInvokeAsyncমেথড থাকতে হবে, যাTask<IViewComponentResult>রিটার্ন করে। - ভিউ ফাইলের অবস্থান (Frontend): View Component-এর HTML ফাইলটি একটি নির্দিষ্ট ফোল্ডার স্ট্রাকচারে রাখতে হয়:
Views/Shared/Components/[ComponentName]/Default.cshtml
Comprehensive Breakdown
১. View Component বনাম Partial View [Priority: 10/10]
লেকচারের শুরুতেই এই দুটির পার্থক্য খুব সুন্দর করে বোঝানো হয়েছে।
- Partial View: এটি শুধু মাত্র HTML/UI রেন্ডার করে। একে কল করার সময় প্যারেন্ট ভিউ (Parent View) থেকে ডাটা পাঠিয়ে দিতে হয়। এর নিজের ডাটা ম্যানেজ করার ক্ষমতা নেই।
- View Component: এটি একটি মিনি-কন্ট্রোলারের মতো কাজ করে। এর নিজস্ব C# ক্লাস থাকে। তুমি যখন কোনো ভিউ থেকে একে কল করবে, তখন এটি প্রথমে তার C# ক্লাসে গিয়ে লজিক এক্সিকিউট করে (যেমন ডাটাবেস থেকে কিছু আনা), তারপর তার নিজস্ব ভিউ ফাইলে সেই ডাটা পাঠিয়ে HTML তৈরি করে প্যারেন্ট ভিউ-কে ফেরত দেয়।
কখন কোনটি ব্যবহার করবো?
- শুধু স্ট্যাটিক UI বা প্যারেন্ট থেকে পাওয়া ডাটা দেখাতে: Partial View
- ডায়নামিক মেনু, শপিং কার্ট, রিসেন্ট পোস্ট, বা ড্যাশবোর্ড উইজেট বানাতে (যেখানে ব্যাকএন্ড লজিক মাস্ট): View Component
২. প্রজেক্ট সেটআপ (The Usual Routine) [Priority: 3/10]
লেকচারার বরাবরের মতোই একটি বেসিক MVC প্রজেক্ট সেটআপ করেছেন।
Program.csএ কন্ট্রোলার, ভিউ এবং স্ট্যাটিক ফাইল কনফিগার করা হয়েছে।HomeControllerতৈরি করেIndexএবংAboutভিউ বানানো হয়েছে।Views/Sharedএ_Layout.cshtmlএবংViews/_ViewStart.cshtmlসেটআপ করা হয়েছে। (যেহেতু এগুলো তুমি আগে থেকেই জানো, তাই এখানে আর বিস্তারিত বলছি না)।
৩. View Component ক্লাস তৈরি করা [Priority: 10/10]
এখন আসল কাজ। আমরা একটি View Component তৈরি করবো যা একটি Grid (HTML Table) রেন্ডার করবে।
Step A: ফোল্ডার এবং ক্লাস তৈরি
- প্রজেক্টের রুটে
ViewComponentsনামে একটি নতুন ফোল্ডার তৈরি করো। - তার ভেতরে
GridViewComponent.csনামে একটি ক্লাস তৈরি করো।
Step B: ক্লাসের নামকরণের নিয়ম (Naming Convention) ক্লাসটি যে View Component, তা ফ্রেমওয়ার্ককে বোঝানোর ৩টি উপায় আছে। লেকচারার সবচেয়ে স্ট্যান্ডার্ড উপায়টি দেখিয়েছেন:
- Suffix: ক্লাসের নামের শেষে
ViewComponentশব্দটি থাকতে হবে। (যেমন:GridViewComponent)। এটি বেস্ট প্র্যাকটিস। - Inheritance: ক্লাসটিকে
Microsoft.AspNetCore.Mvc.ViewComponentবেস ক্লাস থেকে ইনহেরিট (Inherit) করতে হবে। (ইনহেরিট না করলেও চলে, তবে ইনহেরিট করলেView()এর মতো দরকারি মেথডগুলো খুব সহজেই ব্যবহার করা যায়)।
Code Implementation (ViewComponents/GridViewComponent.cs):
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
namespace ViewComponentsExample.ViewComponents
{
// ১. Naming convention এবং Inheritance
public class GridViewComponent : ViewComponent
{
// ২. Mandatory Method: InvokeAsync
public async Task<IViewComponentResult> InvokeAsync()
{
// এখানে তুমি তোমার C# লজিক লিখবে
// যেমন: ডাটাবেস থেকে ডাটা আনা, ক্যালকুলেশন করা ইত্যাদি।
// আপাতত আমরা শুধু ভিউ রিটার্ন করছি
return View();
}
}
}
- The Rule: প্রতিটি View Component ক্লাসে অবশ্যই
InvokeAsyncমেথড থাকতে হবে। ফ্রেমওয়ার্ক যখন এই কম্পোনেন্টটিকে কল করে, তখন এই মেথডটিই স্বয়ংক্রিয়ভাবে এক্সিকিউট হয়।
৪. View Component-এর ভিউ ফাইলের লোকেশন [Priority: 10/10]
সাধারণ Partial View আমরা যেকোনো জায়গায় রাখতে পারি, কিন্তু View Component-এর ভিউ ফাইল রাখার জন্য ASP.NET Core-এ একটি খুব স্ট্রিক্ট (Strict) ফোল্ডার স্ট্রাকচার মেইনটেইন করতে হয়। নাহলে এটি ভিউ ফাইলটিকে খুঁজে পাবে না।
The Default Location Path:
Views -> Shared -> Components -> [ComponentName] -> Default.cshtml
[ComponentName]মানে হলো ক্লাসের নামের সামনের অংশটুকু। আমাদের ক্ষেত্রেGridViewComponent-এর কম্পোনেন্ট নেম হলো শুধুGrid।- ফাইলের নাম সবসময়
Default.cshtmlহতে হবে (যদি না তুমি কোড থেকে ফোর্সমেন্ট করে অন্য নাম দাও)।
(লেকচারার ফোল্ডার তৈরি করার সময় খেয়াল করেন যে তিনি Components ফোল্ডারটি বানাতে ভুলে গিয়েছিলেন, তাই তিনি আবার রিমাইন্ডার দেন যে পাথটি অনেক বড় হলেও এটিই ডিফল্ট এবং প্রেফার্ড লোকেশন)।
VS / VS Code Shortcuts (For faster setup)
- Implement Missing Usings (VS Code): 클래스 이름 밑에 빨간 줄이 나올 때
Ctrl + .누르고 엔터 치면 필요한 네임스페이스가 자동으로 추가됩니다. (যেমন:using Microsoft.AspNetCore.Mvc;). - Go To Base Class:
ViewComponent-এর উপর কার্সর রেখেF12চাপলে এর ভেতরে কী কী মেথড আছে তা দেখা যায়।
Best Practices & .NET 10 Context
Best Practices for View Components:
- Separation of Concern: View Component-এ কখনোই বিশাল বিজনেস লজিক লেখা উচিত নয়। লজিকগুলো Service layer-এ থাকবে, View Component শুধু Service-কে কল করে ডাটা আনবে।
- Naming Structure: সব সময়
[FeatureName]ViewComponentএই ফরমেট ফলো করবে। - Always Async: ডাটাবেস কল বা এক্সটার্নাল API কল থাকার সম্ভাবনা বেশি, তাই সবসময়
Invokeমেথডের বদলেInvokeAsyncব্যবহার করবে।
.NET 10 Context: ASP.NET Core 10-এ View Component-এর কনসেপ্ট এবং ইমপ্লিমেন্টেশন .NET 6/7/8-এর মতোই ১০০% সেম আছে। ফোল্ডার স্ট্রাকচার, ইনহেরিটেন্স রুল— সবকিছু অপরিবর্তিত।
তবে মডার্ন .NET 10-এ যদি তুমি Blazor ব্যবহার করো, তবে এই View Component-এর কাজটি Blazor Components দিয়ে আরও সহজে, ফোল্ডারের বাধ্যবাধকতা ছাড়াই করা যায়। কিন্তু MVC আর্কিটেকচারের জন্য View Component এখনো একটি সলিড এবং স্ট্যান্ডার্ড অপশন।
হাসিব, View Component-এর এই বেসিক থিওরি এবং সেটআপ রুলস কি ক্লিয়ার হয়েছে? রেডি হলে আমরা “Creating View Components - Part 2”-তে মুভ করে দেখবো এটি কীভাবে প্র্যাকটিক্যালি ডাটা রেন্ডার করে!