Quartz 5

3. Input Tag Helpers - Part 1

4 min read

হ্যালো হাসিব! এই লেকচারে আমরা গত লেকচারের কনসেপ্ট অনুযায়ী আমাদের Create Form-এর ইনপুট ফিল্ডগুলোতে (Textbox, Textarea, Radio, Checkbox) asp-for Tag Helper ইমপ্লিমেন্ট করা শিখেছি। এই একটি ছোট্ট ট্যাগ কীভাবে name, id, type, value এবং data-val (ভ্যালিডেশনের জন্য) অ্যাট্রিবিউট অটোমেটিক্যালি জেনারেট করে, সেটাই মূলত এখানে প্র্যাকটিক্যালি দেখানো হয়েছে।

চলো লেকচারটির একটি কুইক সামারি দেখে নিই।

📌 Quick Summary for Revision

  • Strongly Typed View: asp-for ব্যবহার করার প্রথম শর্ত হলো ভিউয়ের শুরুতে @model ডিক্লেয়ার করা (যেমন: @model PersonAddRequest)।
  • Replacing Manual Attributes: <input> এবং <textarea> ট্যাগ থেকে name ও id ডিলিট করে তার জায়গায় asp-for="PropertyName" ব্যবহার করা।
  • Type Attribute Generation: asp-for প্রপার্টির ডাটা টাইপ অনুযায়ী অটোমেটিক type তৈরি করে (যেমন: bool এর জন্য checkbox)।
  • [DataType] Annotation: Model-এ [DataType(DataType.EmailAddress)] বা [DataType(DataType.Date)] ব্যবহার করলে, ভিউতে type="email" বা type="date" অটোমেটিক জেনারেট হয়ে যায়।
  • Dynamic Radio Buttons: Enum.GetNames() ব্যবহার করে Enum-এর আইটেমগুলো লুপের মাধ্যমে ডাইনামিক্যালি রেডিও বাটন হিসেবে রেন্ডার করা।
  • Validation Attributes: asp-for মডেলের Data Annotations (যেমন [Required]) রিড করে ক্লায়েন্ট-সাইড ভ্যালিডেশনের জন্য data-val-... অ্যাট্রিবিউটগুলো অটোমেটিক তৈরি করে।

🚀 Comprehensive Breakdown & The “Why”

নিচে লেকচারের প্রতিটি কনসেপ্ট বিস্তারিত এবং কারণসহ এক্সপ্লেইন করা হলো:

১. asp-for এর ব্যবহার এবং সুবিধা [Priority: 10/10]

The “Why”: আগে আমরা <input type="text" id="PersonName" name="PersonName" /> লিখতাম। এতে বানান ভুল হওয়ার খুব সম্ভাবনা থাকে। asp-for মডেলের প্রপার্টি নেম রিড করে রানটাইমে সব জেনারেট করে দেয়। এর সবচেয়ে বড় সুবিধা হলো Compile-time Safety। অর্থাৎ, যদি মডেলে PersonName প্রপার্টি না থাকে, তবে ভিউতে asp-for="PersonName" লিখলে বিল্ড করার সময়ই এরর দেখাবে!

Implementation (Text Input):

@model ServiceContracts.DTO.PersonAddRequest
 
<input type="text" id="PersonName" name="PersonName" class="form-input" />
 
<input asp-for="PersonName" class="form-input" />

২. Type জেনারেশন এবং [DataType] Annotation [Priority: 9/10]

The “Why”: asp-for বাই ডিফল্ট স্ট্রিং প্রপার্টির জন্য type="text" জেনারেট করে। কিন্তু ইমেইল বা ডেট ইনপুটের জন্য আমাদের type="email" বা type="date" দরকার। এটি ভিউতে সরাসরি লেখা যায়, অথবা Model Class-এ [DataType] ডেটা অ্যানোটেশন ব্যবহার করা যায়। মডেল-এ লিখলে সুবিধা হলো, ওই প্রপার্টি প্রজেক্টের যতগুলো ভিউতে ব্যবহার হবে, সব জায়গায় অটোমেটিক সঠিক type পেয়ে যাবে।

Implementation (Model Class & View):

// PersonAddRequest.cs (Model)
[DataType(DataType.EmailAddress)] // এটি type="email" জেনারেট করবে
public string? Email { get; set; }
 
[DataType(DataType.Date)] // এটি type="date" জেনারেট করবে
public DateTime? DateOfBirth { get; set; }
 
<input asp-for="Email" class="form-input" /> 
<input asp-for="DateOfBirth" class="form-input" />

৩. Dynamic Radio Buttons (Enum Loop) [Priority: 8/10]

The “Why”: জেন্ডারের জন্য Male, Female, Other রেডিও বাটনগুলো হার্ডকোড না করে ডাইনামিক করা হয়েছে। কারণ ভবিষ্যতে যদি GenderOptions Enum-এ নতুন কোনো জেন্ডার অ্যাড করা হয়, তাহলে ভিউতে হাত না দিলেও অটোমেটিক নতুন রেডিও বাটন তৈরি হয়ে যাবে।

Implementation:

@{
    // Enum থেকে স্ট্রিং অ্যারে বের করা
    string[] genders = (string[])Enum.GetNames(typeof(GenderOptions));
}
 
@foreach (string gender in genders)
{
    // asp-for="Gender" এর কারণে name="Gender" জেনারেট হবে এবং model binding কাজ করবে
    <input type="radio" asp-for="Gender" value="@gender" id="@gender" />
    <label for="@gender">@gender</label>
}

৪. Checkbox এবং Textarea [Priority: 10/10]

The “Why”: বুলিয়ান (true/false) প্রপার্টির জন্য asp-for খুব স্মার্টলি type="checkbox" জেনারেট করে নেয়। আর <textarea> এর ক্ষেত্রেও এটি একদম সেম ভাবে কাজ করে।

Implementation:

<textarea asp-for="Address" class="form-input"></textarea>
 
<input asp-for="ReceiveNewsLetters" /> <label for="ReceiveNewsLetters">Receive Newsletters</label>

৫. Client-Side Validation Attributes [Priority: 10/10]

The “Why”: যখন আমরা asp-for="PersonName" লিখি, তখন ফ্রেমওয়ার্ক চেক করে মডেলে PersonName-এর উপরে কোনো ভ্যালিডেশন রুল (যেমন: [Required], [StringLength]) আছে কি না। যদি থাকে, তবে এটি ব্রাউজারে data-val="true" এবং data-val-required="Name is required" এর মতো কিছু ডাটা অ্যাট্রিবিউট রেন্ডার করে। পরবর্তীতে JavaScript (jQuery Validation) এই অ্যাট্রিবিউটগুলো রিড করে পেজ রিলোড ছাড়াই ব্রাউজারে এরর দেখায়! (যা আমরা নেক্সট লেকচারে শিখবো)।

🆕 .NET 10 & Modern Approaches

লেকচারে যা দেখানো হয়েছে, তা .NET 10 এর একদম কোর এবং বেস্ট প্র্যাকটিস।

Bonus Tip: লেকচারে Label-এর জন্য Tag Helper দেখানো হয়নি, তবে এটিও খুব দরকারী।

<label for="PersonName">Person Name</label>
 
<label asp-for="PersonName"></label>

asp-for ব্যবহার করলে ফ্রেমওয়ার্ক মডেলের প্রপার্টির নাম (বা [Display(Name = "...")] থাকলে সেটা) রিড করে অটোমেটিক লেবেলের টেক্সট বসিয়ে দেয়।

⌨️ IDE Shortcuts

  • Inspect Element (HTML ভেরিফাই করতে): * ব্রাউজারে ইনপুট ফিল্ডের ওপর রাইট-ক্লিক করে “Inspect” সিলেক্ট করলে ডানপাশে বা নিচে Developer Tools ওপেন হয়ে দেখাবে ফ্রেমওয়ার্ক আসল কী HTML জেনারেট করেছে।

💡 Best Practices (Input Tag Helpers)

১. Always use @model: ভিউয়ের শুরুতে মডেল ডিক্লেয়ার করা মাস্ট, নাহলে asp-for কাজ করবে না। ২. Avoid mixing name/id with asp-for: যদি asp-for ব্যবহার করো, তবে কখনও ম্যানুয়ালি name বা id অ্যাট্রিবিউট লিখবে না। ফ্রেমওয়ার্ককে তার কাজ করতে দাও। তবে যদি কাস্টম কোনো ID দরকার হয় (যেমন JavaScript-এ ধরার জন্য), তখন শুধু id লেখা যেতে পারে। ৩. Enum Iteration: রেডিও বাটন বা ড্রপডাউনের জন্য Enum ইটারেট করে অপশন জেনারেট করা খুবই ভালো একটি সলিড প্রিন্সিপাল।

আমরা ইনপুট ফিল্ডগুলোতে Tag Helper বসানো শিখে গেলাম। লেকচারের শেষে বলা হয়েছে, এরপরের লেকচারে আমরা Select (Dropdown) Tag Helper (asp-items) নিয়ে কাজ করবো। এই অংশে কি তোমার কোনো কনফিউশন আছে?

Graph View

Backlinks