فارسی کردن اعداد در صفحات blazor
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: یک دقیقه

برای فارسی کردن اعداد در صفحات  HTML قبلا از  کتابخانه‌های  jquery  یا javascript استفاده می‌کردیم. در این مقاله قصد دارم فارسی کردن اعداد را به کمک کامپوننت‌های  blazor انجام دهم. البته بهتر است از این روش برای وقتی استفاده کنیم که قرار است متن ما فقط شامل اعداد باشد؛ مثلا فیلدهای عددی یک جدول.

یک کامپوننت جدید را به نام PersianNumber به صورت زیر ایجاد می‌کنیم. در این کامپوننت یک پارامتر را به نام Number داریم که کاراکتر به کاراکتر آن را پیمایش کرده و اعداد انگلیسی را با اعداد فارسی جایگزین می‌کنیم:
@Number

@code {
    [Parameter]
    public string Number { get; set; }

    protected override Task OnInitializedAsync()
    {
        var persianDic = new Dictionary<char, char>
        {
            {'0','۰'},
            {'1','۱'},
            {'2','۲'},
            {'3','۳'},
            {'4','۴'},
            {'5','۵'},
            {'6','۶'},
            {'7','۷'},
            {'8','۸'},
            {'9','۹'},

        };
        var number = Number.ToString();
        var ech = number.ToCharArray();
        for (int i = 0; i < ech.Length; i++)
        {
            persianDic.TryGetValue(ech[i], out char pch);
            if (pch == null)
                continue;
            ech[i] = pch;
        }
        Number = new string(ech);
        return base.OnInitializedAsync();
    }
}
حالا از این کامپوننت در هر جای صفحه که مثلا عددی را از دیتابیس (api) دریافت کرده و می‌خواهیم نمایش دهیم، استفاده می‌کنیم:
... 
@foreach (var item in _items)
                {
                    <tr>
                        <td class="h6 text-color-1">@item.Title</td>
                        <td> <PersianNumber Number="@item.Price.ToString()"/> ریال</td>
                    </tr>
                }
...

  • #
    ‫۲ سال و ۲ ماه قبل، سه‌شنبه ۳۱ خرداد ۱۴۰۱، ساعت ۲۳:۲۷
    چند نکته‌ی تکمیلی
    - اگر از «DNTPersianUtils.Core » استفاده کنید، متد الحاقی ()ToPersianNumbers آن، قابلیت مدنظر را به همراه دارد و با Blazor هم سازگار است.
    - کامپوننت طراحی شده‌ی فوق، چون عمل async ای را انجام نمی‌دهد، می‌توانست از OnInitialized هم استفاده کند.
    - زمانیکه از OnInitialized برای طراحی کامپوننتی استفاده می‌کنید، یعنی این کامپوننت دیگر تغییرات بعدی Number را نمی‌بیند. به همین جهت بهتر است از OnParametersSet استفاده کنید تا امکان واکنش به تغییرات Number را داشته باشید.
    - اگر از OnParametersSet استفاده کردید، نباید خاصیت از نوع [Parameter] را در آن مستقیما مقدار دهی کنید؛ چون می‌تواند یک حلقه‌ی بی‌پایان render را ایجاد کند. به همین جهت در اینجا یک خاصیت موقتی را مقدار دهی کرده و نمایش دهید.
    - می‌توان کامپوننت‌های Blazor را جنریک تعریف کرد. به این صورت نیازی به دریافت Number به صورت string نخواهد بود و نوع آن می‌تواند T و تعیین شده‌ی توسط کاربر باشد.
    • #
      ‫۲ سال و ۲ ماه قبل، پنجشنبه ۲ تیر ۱۴۰۱، ساعت ۲۳:۰۴
      یه ایده می‌تونه این باشه که از متد الحاقی استفاده کنیم مثلا همون لاجیک تو کمپوننت رو به صورت یه متد برای مثال EnglishToPersianNumber یا خلاصه‌تر En2FaDig بنویسیم و تو هر کمپوننت یا صفحه‌ای می‌خواهیم براحتی ازش استفاده کنیم.
  • #
    ‫۲ سال و ۲ ماه قبل، چهارشنبه ۱ تیر ۱۴۰۱، ساعت ۱۷:۴۳
    آیا بهتر نیست به جای این کار، از فونت ای که حتی اعداد انگلیسی رو به صورت فارسی نمایش می‌ده استفاده کنیم و نهایت اون فونت رو با یه Style اعمال کنیم هر جایی که لازمه یا حتی کل برنامه؟