یاسر مرادی یاسر مرادی
مطالب
تقویم شمسی کاملا Native برای Blazor
یکی از مزایای Blazor، استفاده از دانش C# / HTML / CSS (که خیلی از ما اینها را هم اکنون بلد هستیم) برای نوشتن برنامه‌های وب (SPA / PWA)، برنامه‌های Android / iOS / Windows و وب‌سایت‌هایی با قابلیت Pre Rendering و SEO Friendly است. با یک بار کدنویسی به کمک Blazor، ولی با Configuration‌های متفاوت می‌توان خروجی‌های مختلفی را برای پلتفرم‌های مختلف گرفت؛ برای مثال Blazor Hybrid خروجی Android / iOS / Windows و Blazor Web Assembly خروجی PWA / SPA و در نهایت Blazor Static خروجی وب سایت می‌دهد. به علاوه حالت Blazor Server نیز وجود دارد که امروزه بزرگ‌ترین مزیت آن، Development experience فوق‌العاده‌اش هست که در آن با استفاده از Hot Reload، می‌توان تغییرات در فایل‌های SCSS / C# / Razor را به صورت آنی، بدون نیاز به Build مجدد، رفرش کردن و از دست دادن State مشاهده نمود. امکان استفاده از Nuget Packageهای DotNet ای در Android / iOS / Windows / Web در کنار امکان استفاده از امکانات Native هر پلتفرم نیز از دیگر مزایای این روش است.

اما یکی از موانع استفاده‌ی جدی از Blazor در پروژه‌های داخلی، نبود تقویم شمسی است که سبک بوده و پیش نیاز خاصی جز خود Blazor نداشته باشد. یک راه حل جدید برای حل این مشکل، استفاده از Bit Components است که اخیرا به صورت Open Source ارائه شده است. شما می‌توانید Repository مربوطه را Fork نموده، Clone نمایید، به فولدر src بروید و با ویژال استودیو، Bit.Client.Web.BlazorUI.sln را باز کنید و سورس کامپوننت‌ها را به همراه تست‌های خودکار آن ببینید.
در سایت مربوطه نیز می‌توانید دمویی از بیش از ۲۷ کامپوننت را شامل File uploader، Drop Down، Date Picker، Color Picker، Tree list و... مشاهده کنید که هر کدام دارای Documentation کامل بوده و آماده به استفاده در پروژه‌های شما هستند.
برای استفاده از Bit Components در پروژه خود، ابتدا Package مربوطه را نصب نمایید و سپس فایل js و css مربوطه را نیز به index.html یا Host.cshtml یا Layout.cshtml اضافه کنید (بسته به تنظیمات پروژه‌تان).
در Bit Components جز معدود مواردی که چند خطی با JavaScript توسعه داده شده‌است، کمپوننت‌ها با C# / Razor / CSS توسعه داده شده‌اند. این روش نسبت به روش‌هایی که بر روی کمپوننت‌های کاملا JavaScript ای، اصطلاحا Wrapper ایجاد می‌کنند، دارای دو مزیت سرعت بالاتر و تضمین کار کردن آن در حالت‌های مختلف مانند Pre Rendering است.
<link href="_content/Bit.Client.Web.BlazorUI/styles/bit.blazorui.min.css" rel="stylesheet" />
<script src="_content/Bit.Client.Web.BlazorUI/scripts/bit.blazorui.min.js"></script> 
همچنین در فایل Imports.razor نیز using زیر را اضافه کنید
@using Bit.Client.Web.BlazorUI
به همین سادگی! حال برای تست، از Bit Button به صورت زیر استفاده کنید و اگر درست بود، می‌توانید سراغ کامپوننت‌های پیچیده‌تر همچون Date Picker بروید.
<BitButton>Hello!</BitButton>
برای Bit Date Picker نیز در razor خود یک Property یا Field برای نگه‌داری Date انتخاب شده داشته باشید (برای مثال به اسم BirthDate) که لازم است از جنس DateTimeOffset باشد (دقت کنید، نمایش و گرفتن تاریخ به شمسی یا میلادی می‌تواند باشد که این بر اساس Culture جاری سیستم است (توضیحات اضافه‌تر در قسمت پایانی مقاله)، ولی در نهایت شما DateTimeOffset میلادی انتخاب شده را خواهید داشت)
<BitDatePicker SelectedDate="@BirthDate"></BitDatePicker>
این کامپوننت دارای تنظیمات بسیاری است که می‌توانید در این صفحه آنها را مطالعه و در پروژه خود تست نمایید. اما بد نیست در مورد قسمت Culture Info که کمی پیچیده‌تر است، توضیحاتی داشته باشیم.
در C# .NET، کلاس CultureInfo، وظیفه نگهداری مواردی چون چند زبانگی، تقویم‌های مختلف (اعم از شمسی و...)، موارد مربوط به ارز (برای مثال علامت $ یا ریال و...) را به عهده دارد. از جمله مزایای BitDatePicker، سازگاری با CultureInfo است، به نحوی که CultureInfo.CurrentUICulture هر چه که باشد، بر اساس آن عمل می‌کند. بنابراین می‌توانید در Program.cs پروژه Blazor خود بنویسید:
CultureInfo.CurrentUICulture = new CultureInfo("fa-IR");
و وقتی BitDatePicker در یکی از صفحات باشد، چون fa-IR از Persian Calendar استفاده می‌کند، پس تقویم به صورت شمسی نمایش داده می‌شود.

سوال اول: اگر بخواهیم در کل سیستم، تقویم شمسی باشد، ولی در یکی از صفحات میلادی چه؟ خب می‌توانیم در آن صفحه، به شکل زیر از BitDatePicker استفاده کنیم:
<BitDatePicker Culture="@(new System.Globalization.CultureInfo("en-US"))" />

سوال دوم: تقویم شمسی نمایش داده شده، اسامی ماه‌ها را به صورت فینگلیش نمایش می‌دهد و یا اسامی خلاصه شده روزها صحیح نیست!
این به خود BitDatePicker ربطی ندارد، بلکه به CultureInfo فارسی خود dotnet مرتبط است، اما شما چگونه می‌توانید این مورد را بهبود بدید؟
شما می‌توانید ابتدا با
var cultureInfo = CultureInfo.CreateSpecificCulture("fa-IR")
یک CultureInfo فارسی قابل ویرایش بسازید، برای مثال بنویسید
cultureInfo.DateTimeFormat.MonthNames = new[] { "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" }; 
یک نمونه پیاده‌سازی کامل در اینجا
در ادامه لازم هست چه Culture Info ای را که خودتان سفارشی سازی کرده‌اید، یا Culture Info‌های سیستمی را در CultureInfo.CurrentUICulture قرار بدهید تا BitDatePicker از آن پیروی کند.
در صورت بروز هر گونه مشکلی یا درخواست اضافه شدن امکانی، در repo مربوطه روی GitHub می‌توانید یک issue را ثبت کنید.
‫۲ سال و ۹ ماه قبل، شنبه ۲۷ آذر ۱۴۰۰، ساعت ۱۳:۴۵
یاسر مرادی یاسر مرادی
نظرات مطالب
معرفی Blazor Hybrid
ببینید NET MAUI App که از اساس با Xaml کار می‌کنه و البته Native UI محسوب می‌شه

Blazor Hybrid یا همون NET MAUI Blazor App راهکار Blazor هست که HTML/CSS برای UI استفاده می‌شه، ولی C# .NET اش دسترسی کامل به سیستم عامل داره (بر خلاف Blazor Web Assembly که محدود به Sandbox مرورگر هست)

پس با Blazor Web Assembly & Server می‌تونیم PWA / SPA / Web Site داشته باشیم و طبیعتا محدود به Sandbox مرورگر هست
با Blazor Hybird هم Android / iOS / Windows app داریم که دسترسی به امکانات سیستم عامل هست که UI با HTML / CSS زده می‌شه

یا Blazor Native شما دیگه UI تون HTML/CSS نیست و برای داشتن TextBox به جای input type=text، از Entry استفاده می‌کنید برای مثال که پشت صحنه مپ می‌شه به کنترل‌های Native در Android / iOS / Windows

توصیه من این هست که Blazor رو به صورت Multi Mode تنظیم کنید، به صورتی که UI رو با HTML / CSS بزنید، و هم خروجی Android بگیرید و هم iOS و Web و ویندوز
برای درک بهتر این مسئله می‌تونید وبینارم رو در رابطه با  what's new in dotnet 6  ببینید
‫۲ سال و ۹ ماه قبل، سه‌شنبه ۳۰ آذر ۱۴۰۰، ساعت ۲۳:۱۴
وحید نصیری وحید نصیری
اشتراک‌ها
بررسی تغییرات ASP.NET Core در NET 8 Preview 6.

Here’s a summary of what’s new in this preview release:

  • Improved startup debugging experience
  • Blazor
    • Form model binding & validation with server-side rendering
    • Enhanced page navigation & form handling
    • Preserve existing DOM elements with streaming rendering
    • Specify component render mode at the call site
    • Interactive rendering with Blazor WebAssembly
    • Sections improvements
    • Cascade query string values to Blazor components
    • Blazor Web App template option for enabling server interactivity
    • Blazor template consolidation
  • Metrics
    • Testing metrics in ASP.NET Core apps
    • New, improved, and renamed counters
  • API authoring
    • Complex form binding support in minimal APIs
  • Servers & middleware
    • HTTP.sys kernel response buffering
    • Redis-based output-cache
     
بررسی تغییرات ASP.NET Core در NET 8 Preview 6.
‫۱ سال و ۲ ماه قبل، چهارشنبه ۲۱ تیر ۱۴۰۲، ساعت ۰۱:۳۸
وحید نصیری وحید نصیری
اشتراک‌ها
تغییرات ASP.NET Core در NET 8 Preview 5.

Here’s a summary of what’s new in this preview release:

  • Improved ASP.NET Core debugging experience
  • Servers & middleware
    • IHttpSysRequestTimingFeature
    • SNI hostname in ITlsHandshakeFeature
    • IExceptionHandler
  • Blazor
    • New Blazor Web App project template
    • Blazor router integration with endpoint routing
    • Enable interactivity for individual components with Blazor Server
    • Improved packaging of Webcil files
    • Blazor Content Security Policy (CSP) compatibility
  • API authoring
    • Support for generic attributes
  • SignalR
    • SignalR seamless reconnect
  • Native AOT
    • Support for AsParameters and automatic metadata generation in compile-timed generated minimal APIs
  • Authentication and authorization
    • Authentication updates in ASP.NET Core SPA templates
    • New analyzer for recommended AuthorizationBuilder usage
     
تغییرات ASP.NET Core در NET 8 Preview 5.
‫۱ سال و ۳ ماه قبل، چهارشنبه ۲۴ خرداد ۱۴۰۲، ساعت ۱۰:۱۵
مهدی ملائیان مهدی ملائیان
اشتراک‌ها
بررسی Blazor و Razor Component

WHAT IS BLAZOR?

Blazor is a single-page app framework for building interactive client-side Web apps with .NET. Blazor uses open web standards without plugins or code transpilation. Blazor works in all modern web browsers, including mobile browsers. 

بررسی Blazor و Razor Component
‫۵ سال و ۶ ماه قبل، شنبه ۳ فروردین ۱۳۹۸، ساعت ۲۱:۳۶
وحید نصیری وحید نصیری
اشتراک‌ها
تغییرات ASP.NET Core در NET Core 3.0 Preview 4.

Here’s the list of what’s new in this preview:

  • Razor Components renamed back to server-side Blazor
  • Client-side Blazor on WebAssembly now in official preview
  • Resolve components based on @using
  • _Imports.razor
  • New component item template
  • Reconnection to the same server
  • Stateful reconnection after prerendering
  • Render stateful interactive components from Razor pages and views
  • Detect when the app is prerendering
  • Configure the SignalR client for server-side Blazor apps
  • Improved SignalR reconnect features
  • Configure SignalR client for server-side Blazor apps
  • Additional options for MVC service registration
  • Endpoint routing updates
  • New template for gRPC
  • Design-time build for gRPC
  • New Worker SDK 
تغییرات ASP.NET Core در NET Core 3.0 Preview 4.
‫۵ سال و ۵ ماه قبل، جمعه ۳۰ فروردین ۱۳۹۸، ساعت ۱۲:۳۶