10مثال کاربردی بلیزور
تفاوت با js در مثالها
مثالهای کاربردی و جذاب در بلیزور بدون 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 انجام میدهد.
این مقاله ادامه دارد ...
دانلود فایل پی دی اف
