Quartz 5

2. Form Tag Helpers

4 min read

হ্যালো হাসিব! এই লেকচারে আমরা গত লেকচারের কনসেপ্ট অনুযায়ী আমাদের প্রজেক্টের Form এবং Link (Anchor Tag)-গুলোতে Tag Helper ইমপ্লিমেন্ট করা শিখেছি। আগে আমরা যেসব জায়গায় ম্যানুয়ালি URL (যেমন href="~/persons/index") লিখেছিলাম, সেগুলোকে asp-controller এবং asp-action দিয়ে রিপ্লেস করা হয়েছে।

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

📌 Quick Summary for Revision

  • Enable Tag Helpers: প্রজেক্টের সব ভিউতে Tag Helper অ্যাক্টিভ করার জন্য _ViewImports.cshtml ফাইলে @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers ডিরেক্টিভ অ্যাড করা।

  • Form Tag Helpers: <form> ট্যাগের action অ্যাট্রিবিউট ডিলিট করে তার জায়গায় asp-controller এবং asp-action ব্যবহার করা।

  • Anchor Tag Helpers: <a> (হাইপারলিংক) ট্যাগের href ডিলিট করে asp-controller এবং asp-action ব্যবহার করা।

  • How it Works: ফ্রেমওয়ার্ক রানটাইমে এই ট্যাগগুলো রিড করে এবং রাউটিং কনফিগারেশন অনুযায়ী অটোমেটিক্যালি সঠিক action="..." বা href="..." জেনারেট করে ব্রাউজারে পাঠায়।

  • View Page Source: ব্রাউজারে পেজ রেন্ডার হওয়ার পর View Page Source করে ভেরিফাই করা যে asp- ট্যাগগুলো কনভার্ট হয়ে সঠিক HTML URL তৈরি করেছে কি না।

🚀 Comprehensive Breakdown & The “Why”

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

১. Tag Helpers এনাবল করা (_ViewImports.cshtml) [Priority: 10/10]

The “Why”: ASP.NET Core-এ বাই ডিফল্ট Tag Helper-গুলো ভিউতে কাজ করে না। আমাদের ফ্রেমওয়ার্ককে বলে দিতে হবে যে, “এই প্রজেক্টের ভিউগুলোতে তুমি ট্যাগ হেল্পার খুঁজবে এবং তা প্রসেস করবে।” এটি প্রতিটি ভিউ ফাইলে আলাদাভাবে না লিখে, একটি গ্লোবাল ফাইল _ViewImports.cshtml-এ লেখা হয়।

Implementation:

C#

// _ViewImports.cshtml
// * মানে হলো ওই নেমস্পেসের ভেতরের "সব" ট্যাগ হেল্পার ইমপোর্ট করো
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

২. Form ট্যাগে Tag Helper ব্যবহার [Priority: 9/10]

The “Why”: আমরা যখন <form action="~/persons/index"> লিখি, তখন রাউটিং চেঞ্জ হলে ফর্মটি কাজ করা বন্ধ করে দেবে (404 Error)। asp-controller="Persons" এবং asp-action="Index" লিখলে, ফ্রেমওয়ার্ক নিজেই Controller-এর নাম এবং Action-এর নাম দেখে সঠিক URL বানিয়ে নেবে।

Implementation (Index.cshtml & Create.cshtml):

HTML

<form action="~/persons/index" method="get">...</form>

<form asp-controller="Persons" asp-action="Index" method="get">...</form>

৩. Anchor (<a>) ট্যাগে Tag Helper ব্যবহার [Priority: 10/10]

The “Why”: হাইপারলিংকের ক্ষেত্রেও একই কথা। href ম্যানুয়ালি না লিখে Tag Helper ব্যবহার করলে লিংকগুলো অনেক বেশি রিলায়্যাবল হয়।

Implementation (Links in Views):

HTML

<a asp-controller="Persons" asp-action="Create">Create Person</a>

<a asp-controller="Persons" asp-action="Index" class="link-hover">Clear all</a>

৪. Back-to-List লিংকের ইমপ্লিমেন্টেশন (Create.cshtml) [Priority: 8/10]

The “Why”: Create পেজে একটি “Back” বা “Back to Persons List” বাটন থাকে, যা ইউজারকে আবার টেবিল পেজে ফিরিয়ে নিয়ে যায়। সেখানেও href এর বদলে asp- ট্যাগ ব্যবহার করা হয়েছে।

Implementation:

HTML

<a asp-controller="Persons" asp-action="Index" class="link-hover">Back to Persons List</a>

🆕 .NET 10 & Modern Approaches

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

একটি ছোট্ট বোনাস টিপ:

যদি তুমি একই Controller-এর ভেতরের কোনো ভিউতে লিংক তৈরি করো, তবে asp-controller না লিখলেও চলে! ফ্রেমওয়ার্ক অটোমেটিক্যালি ধরে নেয় যে তুমি কারেন্ট Controller-এর কথা বলছো।

Pro Tip (Omit Controller if in the same controller):

HTML

<a asp-action="Create">Create Person</a>

এটি কোডকে আরও ছোট এবং ক্লিন করে। তবে অন্য Controller-এ লিংক করতে চাইলে অবশ্যই asp-controller দিতে হবে।

⌨️ IDE Shortcuts

  • View Page Source (Browser):

    • Chrome / Edge / Firefox: পেজে রাইট ক্লিক করে “View Page Source” অথবা শর্টকাট Ctrl + U

  • Inspect Element (Browser):

    • Ctrl + Shift + I অথবা F12

💡 Best Practices (Links & Forms)

১. Case Insensitivity: asp-controller="Persons" আর asp-controller="persons" দুটোর আউটপুটই এক। তবে কোডিং কনভেনশন অনুযায়ী Controller বা Action-এর নাম C# ক্লাসের নামের মতো PascalCase-এ লেখা (যেমন: Persons, Index) বেস্ট প্র্যাকটিস।

২. Avoid Mixing: কখনও একই ট্যাগে href এবং asp-action একসাথে ব্যবহার করবে না। ফ্রেমওয়ার্ক কনফিউজড হয়ে যেতে পারে বা একটি আরেকটিকে ওভাররাইড করতে পারে।

৩. Dynamic Parameters: যদি রাউটিংয়ে কোনো ডাইনামিক ডাটা পাঠাতে হয় (যেমন: /persons/edit/5), তবে Tag Helper এর asp-route-{parameterName} ব্যবহার করবে। (সম্ভবত লেকচারার এটি পরবর্তী Edit লেকচারে দেখাবেন)।

এই লেকচারে আমরা শুধুমাত্র Link আর Form এর Tag Helper শিখলাম। এর পরের লেকচারে ইনপুট ফিল্ডের (Textbox, Dropdown) Tag Helper (asp-for) নিয়ে আলোচনা হবে আশা করছি।

এই অংশে তোমার কি কোনো কনফিউশন আছে?

Graph View

Backlinks