مثالهای کاربردی و جذاب در بلیزور بدون js

چکیده

در ادامه چند نمونه کاربردی و جذاب از کاربردهای بیلزور را مرور میکنیم که بدون نیاز به جاوااسکریپت، ajax و کتابخانه های سنگین js میتوان براحتی و گاها با یک خط کد در بیلزور آنها را پیاده سازی کرد. البته قدرت Blazor به همین مثال ها خلاصه نمیشه بلکه یک فریمورک کامل برای توسعه UI پروژه هاست که از زبان سی شارپ استفاده می کند.

در دنیای واقعی، تفاوت اصلی ASP.NET Core MVC و Blazor Server در حذف "مرز" بین کلاینت و سرور است. در MVC باید مدام بین کنترلر یعنی سی شارپ و ویو یعنی html و جاوااسکریپت پل بزنیم اما در Blazor همه چیز در یک محیط یکپارچه مدیریت می‌شود.

در اینجا 1۰ مورد از سناریوهای رایج تجاری که در Blazor Server بسیار ساده‌تر، سریع‌تر و با کد کمتر نسبت به MVC پیاده‌سازی می‌شوند را دسته‌بندی کرده‌ام:

۱. هندل کردن فرم‌های چندمرحله‌ای Wizard

در JS باید برای هر مرحله Div ها را مخفی/ ظاهر کنید، وضعیت هر مرحله را در یک آبجکت JS نگه دارید و در آخر با AJAX ارسال کنید.

در Blazor: صرفاً با یک متغیر ساده (مثلاً Step ) و دستور @ if کامپوننت‌ها را جابه‌جا می‌کنید؛ تمام داده‌ها در همان مدل C# باقی می‌مانند.

۲. آپدیت کردن هم‌زمان قیمت در سبد خرید

در JS باید Event Listener روی تعداد بگذارید، مقدار را بخوانید، ضرب کنید و با innerHTML در DOM قرار دهید.

در Blazor: یک Property به نام TotalPrice بسازید که از حاصل‌ضرب تعداد در قیمت می‌آید. به محض تغییر تعداد، قیمت خودکار آپدیت می‌شود. (بهش میگیم Data Binding )

۳. اعتبارسنجی Validation سمت کلاینت و سرور

در JS باید منطق چک کردن را یک‌بار در JS برای کاربر و یک‌بار در C# برای امنیت بنویسید.

در Blazor از همان DataAnnotations مدل‌های C# در سمت کلاینت استفاده می‌کنید. یک کد، دو جا اجرا می‌شود.

۴. پر کردن لیست انتخابی دوم بر اساس انتخاب از لیست اول Cascading Dropdowns

در JS نوشتن تابع onchange -> ارسال AJAX به سرور -> دریافت JSON - > پاک کردن گزینه‌های قبلی -> ساخت المنت‌های option با حلقه.

در Blazor در Setter ویژگیِ اول، لیستِ دوم را پر می‌کنید. Blazor خودش UI را Refresh می‌کند.

۵. نمایش Spinner در حال بارگذاری برای دکمه‌ها

در JS قبل از fetch باید کلاس loading بدهید و در finally آن را حذف کنید.

در Blazor یک متغیر bool isLoading تعریف می‌کنید و در UI می‌گویید: @ if(isLoading) { < Spinner / > } .

۶. هندل کردن عملیات حذف با تاییدیه Modal

در JS پاس دادن ID به یک تابع JS - > باز کردن مدال -> نگه داشتن ID در یک متغیر Global یا Attribute - > ارسال AJAX پس از تایید.

در Blazor پاس دادن مستقیم آبجکت به کامپوننت مودال و فراخوانی متد حذف در همان کلاس.

۷. سیستم جستجوی در لحظه Live Search

در JS درگیری با keyup و Debounce ( برای جلوگیری از درخواست زیاد) و دستکاری مستقیم DOM برای نمایش نتایج.

در Blazor استفاده از رویداد @ oninput و فیلتر کردن لیست در C# ؛ نتایج به صورت خودکار در @ foreach رندر می‌شوند.

8. آپلود فایل با نمایش درصد پیشرفت

در JS کار با XMLHttpRequest و Event های پیچیده آن.

در Blazor استفاده از کامپوننت داخلی InputFile که به راحتی Stream فایل را در اختیارتان می‌گذارد.

9. اشتراک‌گذاری مدل‌ها ( DTOs)

در JS: باید همیشه نگران باشید که فیلدهای سمت JS با فیلدهای C# هنگام سریالایز شدن مطابقت داشته باشند.

در Blazor براحتی از همان کلاسِ پروژه دات‌نت در سمت کلاینت استفاده میشه و دوباره کاری در کار نیست.

۱0. ساخت جداول با قابلیت مرتب‌سازی Sorting

در JS نوشتن منطق مرتب‌سازی آرایه در JS و رندر دوباره ردیف‌ها.

در Blazor استفاده از OrderBy روی لیست اصلی در C# ؛ بقیه کار را Blazor انجام می‌دهد.

این مقاله ادامه دارد ...