یکی از بخش‌های کلیدی در هر اپلیکیشن وب، امکان تعامل کاربر با سیستم از طریق فرم‌ها است. اگر پیش‌تر با ASP.NET MVC کار کرده باشید، احتمالاً با ساختار فرم‌ها و مدل‌سازی داده‌ها در آن آشنا هستید. اما در Blazor که مبتنی بر کامپوننت و Single Page Application است، ساخت فرم‌ها با تغییراتی همراه بوده و امکانات قدرتمندتری در اختیار توسعه‌دهنده قرار می‌گیرد.
در این مقاله، به بررسی نحوه استفاده از تگ <form> در Blazor می‌پردازیم، تفاوت آن با MVC را بررسی می‌کنیم، و در ادامه با ارائه یک مثال کاربردی، ساخت فرم، ارسال داده، جلوگیری از حملات، و مدیریت رفتار صفحه را آموزش خواهیم داد.
تفاوت فرم‌ها در Blazor و MVC
در MVC، مدل ارتباط بین View و Controller بر اساس فرم‌های HTML، HttpPost و ویژگی‌هایی مثل [Bind], [ValidateAntiForgeryToken] و مدل‌سازی ViewModel طراحی می‌شد. اما در Blazor:
- فرم‌ها دیگر از DOM استاتیک استفاده نمی‌کنند، بلکه بخشی از یک کامپوننت تعاملی هستند.
- ارسال اطلاعات به‌جای رفتن به اکشن خاص، از طریق رویدادهای کامپوننت انجام می‌شود (مثل
OnSubmit,OnValidSubmit,OnInvalidSubmit). - امکان استفاده از Data Annotations برای ولیدیشن سمت کلاینت فراهم شده بدون نیاز به JavaScript.
- پشتیبانی داخلی از CSRF، Two-Way Binding، Validation Summary و تزریق سرویس درون فرم، توسعه را بسیار ساده‌تر کرده است.
چرا نباید مدل انتیتی را مستقیماً در فرم‌ها استفاده کنیم؟
فرض کنید مدل Product دارای چندین پراپرتی حساس مانند Price, StockQuantity, IsApproved و ... است. حالا اگر شما فقط می‌خواهید نام محصول را از کاربر بگیرید ولی کل مدل را بایند کنید، کاربر می‌تواند فرم HTML را به راحتی ویرایش کرده و فیلدهای بیشتری را ارسال کند. این مسئله دو خطر جدی ایجاد می‌کند:
Overposting: کاربر می‌تواند فیلدهایی که نباید ویرایش کند را تغییر دهد.
حملات DDoS هدفمند: کاربر می‌تواند با ارسال حجم عظیمی از درخواست‌های نامعتبر، مدل بایندینگ و اعتبارسنجی سمت سرور را تحت فشار قرار دهد.
📌 راهکار حرفه‌ای: همیشه از ViewModel جداگانه استفاده کنید و تنها فیلدهایی که باید دریافت شوند را در فرم بایند کنید.
نکات امنیتی مهم در فرم‌های Blazor
فرم‌ها در Blazor، مانند سایر فریم‌ورک‌ها، نیازمند رعایت اصول امنیتی هستند:
عدم اتصال مستقیم به Entityها: برای جلوگیری از حملات مانند Overposting یا تغییر مقادیر حساس توسط کاربران، همیشه از ViewModel جداگانه استفاده کنید.
استفاده از AntiForgery Token (RequestVerificationToken): این ویژگی به صورت پیش‌فرض در پروژه‌های Blazor فعال است و باید توسط تگ <AntiforgeryToken /> یا کامپوننت معادل آن درج شود.
جلوگیری از حملات CSRF: با فعال‌سازی این توکن، فقط فرم‌هایی پذیرفته می‌شوند که واقعاً از صفحات سایت خودتان ارسال شده‌اند.
مثال عملی: ساخت یک فرم ساده در Blazor
تعریف مدل داده
public class Product { public string Name { get; set; } = string.Empty; }تعریف پراپرتی در صفحه
@code { private Product product = new(); private void HandleSubmit() { Console.WriteLine($"Product Name: {product.Name}"); product = new(); // ریست کردن فرم بعد از ارسال } }ساخت فرم با استفاده از تگ HTML
<form method="post" @onsubmit="HandleSubmit" data-hx-boost="true"> <AntiforgeryToken /> <div> <label>نام محصول:</label> <input type="text" @bind="product.Name" /> </div> <button type="submit">ارسال</button> </form>نکات حرفه‌ای در طراحی فرم‌های Blazor
✅ فرم بدون رفرش صفحه: با استفاده از @onsubmit, @onvalidsubmit, یا @onclick و حذف ویژگی action و method، فرم بدون رفرش شدن ارسال می‌شود.
✅ مدیریت دقیق داده‌ها: پراپرتی بایندشده را private تعریف کنید مگر اینکه نیاز به دسترسی بیرونی باشد.
✅ تعیین رندر مود: اگر از فرم‌های تعاملی در صفحات Blazor Server استفاده می‌کنید، حتماً صفحه باید با @rendermode InteractiveServer اجرا شود. در غیر این صورت فرم کار نخواهد کرد.
✅ ریست فرم بعد از سابمیت:
product = new(); // ریست کل مدل // یا فقط یک فیلد:
product.Name = string.Empty;
فرم استاندارد در برابر فرم سفارشی
ممکن است این سؤال پیش بیاید که چرا اصلاً از تگ <form> استفاده کنیم؟ چرا فقط یک <input> و دکمه‌ی @onclick کافی نیست؟
دلایل حرفه‌ای برای استفاده از فرم:
پشتیبانی از سابمیت با دکمه Enter
رعایت استاندارد HTML و بهبود UX
هماهنگی با ابزارهای Accessibility و تست UIد.
مشاهده فیلم آموزشی تگ formدر بلیزور
برای توسعه‌دهندگان حرفه‌ای:
همیشه فرم‌ها را در لایه‌ی جداگانه‌ای از مدل طراحی کنید.
از ViewModel به عنوان قرارداد تبادل داده بین View و کامپوننت استفاده کنید.
از سرویس‌ها و ریپازیتوری‌ها در بخش @code برای ارسال اطلاعات استفاده کنید.
در Blazor WebAssembly، درخواست‌ها را از طریق API ارسال کنید؛ از HttpClient با Header مناسب استفاده نمایید.
جمع‌بندی
ساخت فرم در Blazor برخلاف MVC از پایه بازطراحی شده و امکانات مدرنی در اختیار شما قرار می‌دهد. استفاده از تگ <form> یا کامپوننت‌های پیشرفته‌تر مانند <EditForm>، رعایت نکات امنیتی مانند استفاده از ViewModel و آنتی فورجری توکن، و بهره‌گیری از رندرینگ تعاملی باعث می‌شود اپلیکیشن شما هم امن‌تر باشد و هم تجربه کاربری بهتری ارائه دهد.
در قسمت بعدی، با کامپوننت EditForm و مزایای آن در Blazor آشنا خواهید شد.
برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید