Blazor 5x - قسمت 14 - کار با فرم‌ها - بخش 2 - تعریف فرم‌ها و اعتبارسنجی آن‌ها
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: ده دقیقه

در ادامه قصد داریم از سرویس زیر که در قسمت قبل تکمیل شد، در یک برنامه‌ی Blazor Server استفاده کنیم:
namespace BlazorServer.Services
{
    public interface IHotelRoomService
    {
        Task<HotelRoomDTO> CreateHotelRoomAsync(HotelRoomDTO hotelRoomDTO);

        Task<int> DeleteHotelRoomAsync(int roomId);

        IAsyncEnumerable<HotelRoomDTO> GetAllHotelRoomsAsync();

        Task<HotelRoomDTO> GetHotelRoomAsync(int roomId);

        Task<HotelRoomDTO> IsRoomUniqueAsync(string name);

        Task<HotelRoomDTO> UpdateHotelRoomAsync(int roomId, HotelRoomDTO hotelRoomDTO);
    }
}


تعریف کامپوننت‌های ابتدایی نمایش لیست اتاق‌ها و ثبت و ویرایش آن‌ها


در ابتدا کامپوننت‌های خالی نمایش لیست اتاق‌ها و همچنین فرم خالی ثبت و ویرایش آن‌ها را به همراه مسیریابی‌های مرتبط، ایجاد می‌کنیم. به همین جهت ابتدا داخل پوشه‌ی Pages، پوشه‌ی جدید HotelRoom را ایجاد کرده و فایل جدید HotelRoomList.razor را با محتوای ابتدایی زیر، به آن اضافه می‌کنیم.
@page "/hotel-room"

<div class="row mt-4">
    <div class="col-8">
        <h4 class="card-title text-info">Hotel Rooms</h4>
    </div>
    <div class="col-3 offset-1">
        <NavLink href="hotel-room/create" class="btn btn-info">Add New Room</NavLink>
    </div>
</div>

@code {

}
این کامپوننت در مسیر hotel-room/ قابل دسترسی خواهد بود. بر این اساس، به کامپوننت Shared\NavMenu.razor مراجعه کرده و مدخل منوی آن‌را تعریف می‌کنیم:
<li class="nav-item px-3">
    <NavLink class="nav-link" href="hotel-room">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Hotel Rooms
    </NavLink>
</li>

تا اینجا صفحه‌ی ابتدایی نمایش لیست اتاق‌ها، به همراه یک دکمه‌ی افزودن اتاق جدید نیز هست. به همین جهت فایل جدید Pages\HotelRoom\HotelRoomUpsert.razor را به همراه مسیریابی hotel-room/create/ برای تعریف کامپوننت ابتدایی ثبت و ویرایش اطلاعات اتاق‌ها، اضافه می‌کنیم:
@page "/hotel-room/create"

<h3>HotelRoomUpsert</h3>

@code {

}
- واژه‌ی Upsert در مورد فرمی بکاربرده می‌شود که هم برای ثبت اطلاعات و هم برای ویرایش اطلاعات از آن استفاده می‌شود.
- NavLink تعریف شده‌ی در کامپوننت نمایش لیست اتاق‌ها، به مسیریابی کامپوننت فوق اشاره می‌کند.


ایجاد فرم ثبت یک اتاق جدید

برای ثبت یک اتاق جدید نیاز است به مدل UI آن که همان HotelRoomDTO تعریف شده‌ی در قسمت قبل است، دسترسی داشت. به همین جهت در پروژه‌ی BlazorServer.App، ارجاعی را به پروژه‌ی BlazorServer.Models.csproj اضافه می‌کنیم:
<Project Sdk="Microsoft.NET.Sdk.Web">
  <ItemGroup>
    <ProjectReference Include="..\BlazorServer.Models\BlazorServer.Models.csproj" />
  </ItemGroup>
</Project>
سپس جهت سراسری اعلام کردن فضای نام آن، یک سطر زیر را به انتهای فایل BlazorServer.App\_Imports.razor اضافه می‌کنیم:
@using BlazorServer.Models
اکنون می‌توانیم کامپوننت Pages\HotelRoom\HotelRoomUpsert.razor را به صورت زیر تکمیل کنیم:
@page "/hotel-room/create"

<div class="row mt-2 mb-5">
    <h3 class="card-title text-info mb-3 ml-3">@Title Hotel Room</h3>
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <EditForm Model="HotelRoomModel">
                    <div class="form-group">
                        <label>Name</label>
                        <InputText @bind-Value="HotelRoomModel.Name" class="form-control"></InputText>
                    </div>
                </EditForm>
            </div>
        </div>
    </div>
</div>

@code
{
    private HotelRoomDTO HotelRoomModel = new HotelRoomDTO();
    private string Title = "Create";
}
توضیحات:
- در برنامه‌های Blazor، کامپوننت ویژه‌ی EditForm را بجای تگ استاندارد form، مورد استفاده قرار می‌دهیم.
- این کامپوننت، مدل فرم را از فیلد HotelRoomModel که در قسمت کدها تعریف کردیم، دریافت می‌کند. کار آن تامین اطلاعات فیلدهای فرم است.
- سپس در EditForm تعریف شده، بجای المان استاندارد input، از کامپوننت InputText برای دریافت اطلاعات متنی استفاده می‌شود. با bind-value@ در قسمت چهارم این سری بیشتر آشنا شدیم و کار آن two-way data binding است. در اینجا هر اطلاعاتی که وارد می‌شود، سبب به روز رسانی خودکار مقدار خاصیت HotelRoomModel.Name می‌شود و برعکس.

یک نکته: در قسمت قبل، مدل UI را از نوع رکورد C# 9.0 و init only تعریف کردیم. رکوردها، با EditForm و two-way databinding آن سازگاری ندارند (bind-value@ در اینجا) و بیشتر برای کنترلرهای برنامه‌های Web API که یکبار قرار است کار وهله سازی آن‌ها در زمان دریافت اطلاعات از کاربر صورت گیرد، مناسب هستند و نه با فرم‌های پویای Blazor. به همین جهت به پروژه‌ی BlazorServer.Models مراجعه کرده و نوع آن‌ها را به کلاس و init‌ها را به set معمولی تغییر می‌دهیم تا در فرم‌های Blazor هم قابل استفاده شوند.

تا اینجا کامپوننت ثبت اطلاعات یک اتاق جدید، چنین شکلی را پیدا کرده‌است:



تکمیل سایر فیلدهای فرم ورود اطلاعات اتاق

پس از تعریف فیلد ورود اطلاعات نام اتاق، سایر فیلدهای متناظر با HotelRoomDTO را نیز به صورت زیر به EditForm تعریف شده اضافه می‌کنیم که در اینجا از InputNumber برای دریافت اطلاعات عددی و از InputTextArea، برای دریافت اطلاعات متنی چندسطری استفاده شده‌است:
<EditForm Model="HotelRoomModel">
    <div class="form-group">
        <label>Name</label>
        <InputText @bind-Value="HotelRoomModel.Name" class="form-control"></InputText>
    </div>
    <div class="form-group">
        <label>Occupancy</label>
        <InputNumber @bind-Value="HotelRoomModel.Occupancy" class="form-control"></InputNumber>
    </div>
    <div class="form-group">
        <label>Rate</label>
        <InputNumber @bind-Value="HotelRoomModel.RegularRate" class="form-control"></InputNumber>
    </div>
    <div class="form-group">
        <label>Sq ft.</label>
        <InputText @bind-Value="HotelRoomModel.SqFt" class="form-control"></InputText>
    </div>
    <div class="form-group">
        <label>Details</label>
        <InputTextArea @bind-Value="HotelRoomModel.Details" class="form-control"></InputTextArea>
    </div>
    <div class="form-group">
        <button class="btn btn-primary">@Title Room</button>
        <NavLink href="hotel-room" class="btn btn-secondary">Back to Index</NavLink>
    </div>
</EditForm>
با این خروجی:



تعریف اعتبارسنجی‌های فیلدهای یک فرم Blazor

در حین تعریف یک فرم، برای واکنش نشان دادن به دکمه‌ی submit، می‌توان رویداد OnSubmit را به کامپوننت EditForm اضافه کرد که سبب فراخوانی متدی در قسمت کدهای کامپوننت جاری خواهد شد؛ مانند فراخوانی متد HandleHotelRoomUpsert در مثال زیر:
<EditForm Model="HotelRoomModel" OnSubmit="HandleHotelRoomUpsert">
</EditForm>

@code
{
    private HotelRoomDTO HotelRoomModel = new HotelRoomDTO();

    private async Task HandleHotelRoomUpsert()
    {

    }
}
هرچند HotelRoomDTO تعریف شده به همراه تعریف اعتبارسنجی‌هایی مانند Required است، اما اگر بر روی دکمه‌ی submit کلیک کنیم، متد HandleHotelRoomUpsert فراخوانی می‌شود. یعنی روال رویدادگردان OnSubmit، صرفنظر از وضعیت اعتبارسنجی مدل فرم، همواره با submit فرم، اجرا می‌شود.
اگر این مورد، مدنظر نیست، می‌توان بجای OnSubmit، از رویداد OnValidSubmit استفاده کرد. در این حالت اگر اعتبارسنجی مدل فرم با شکست مواجه شود، دیگر متد HandleHotelRoomUpsert فراخوانی نخواهد شد. همچنین در این حالت می‌توان خطاهای اعتبارسنجی را نیز در فرم نمایش داد:
<EditForm Model="HotelRoomModel" OnValidSubmit="HandleHotelRoomUpsert">
    <DataAnnotationsValidator />
    @*<ValidationSummary />*@
    <div class="form-group">
        <label>Name</label>
        <InputText @bind-Value="HotelRoomModel.Name" class="form-control"></InputText>
        <ValidationMessage For="()=>HotelRoomModel.Name"></ValidationMessage>
    </div>
    <div class="form-group">
        <label>Occupancy</label>
        <InputNumber @bind-Value="HotelRoomModel.Occupancy" class="form-control"></InputNumber>
        <ValidationMessage For="()=>HotelRoomModel.Occupancy"></ValidationMessage>
    </div>
    <div class="form-group">
        <label>Rate</label>
        <InputNumber @bind-Value="HotelRoomModel.RegularRate" class="form-control"></InputNumber>
        <ValidationMessage For="()=>HotelRoomModel.RegularRate"></ValidationMessage>
    </div>
- در اینجا قسمت‌های تغییر کرده را مشاهده می‌کنید که به همراه درج DataAnnotationsValidator و ValidationMessage‌ها است.
- کامپوننت DataAnnotationsValidator، اعتبارسنجی مبتنی بر data annotations را مانند [Required]، در دامنه‌ی دید یک EditForm فعال می‌کند.
- اگر خواستیم تمام خطاهای اعتبارسنجی را به صورت خلاصه‌ای در بالای فرم نمایش دهیم، می‌توان از کامپوننت ValidationSummary استفاده کرد.
- و یا اگر خواستیم خطاها را به صورت اختصاصی‌تری ذیل هر تکست‌باکس نمایش دهیم، می‌توان از کامپوننت ValidationMessage کمک گرفت. خاصیت For آن از نوع <Expression<System.Func تعریف شده‌است که اجازه‌ی تعریف strongly typed نام خاصیت در حال اعتبارسنجی را به صورتی که مشاهده می‌کنید، میسر می‌کند.



ثبت اولین اتاق هتل

در ادامه می‌خواهیم روال رویدادگردان HandleHotelRoomUpsert را مدیریت کنیم. به همین جهت نیاز به کار با سرویس IHotelRoomService ابتدای بحث خواهد بود. بنابراین در ابتدا به فایل BlazorServer.App\_Imports.razor مراجعه کرده و فضای نام سرویس‌های برنامه را اضافه می‌کنیم:
@using BlazorServer.Services
اکنون امکان تزریق IHotelRoomService را که در قسمت قبل پیاده سازی و به سیستم تزریق وابستگی‌های برنامه معرفی کردیم، پیدا می‌کنیم:
@page "/hotel-room/create"

@inject IHotelRoomService HotelRoomService
@inject NavigationManager NavigationManager


@code
{
    private HotelRoomDTO HotelRoomModel = new HotelRoomDTO();
    private string Title = "Create";

    private async Task HandleHotelRoomUpsert()
    {
        var roomDetailsByName = await HotelRoomService.IsRoomUniqueAsync(HotelRoomModel.Name);
        if (roomDetailsByName != null)
        {
            //there is a duplicate room. show an error msg.
            return;
        }

        var createdResult = await HotelRoomService.CreateHotelRoomAsync(HotelRoomModel);
        NavigationManager.NavigateTo("hotel-room");
    }
}
در اینجا در ابتدا، سرویس IHotelRoomService به کامپوننت جاری تزریق شده و سپس از متدهای IsRoomUniqueAsync و CreateHotelRoomAsync آن، جهت بررسی منحصربفرد بودن نام اتاق و ثبت نهایی اطلاعات مدل برنامه که به فرم جاری به صورت دو طرفه‌ای متصل است، استفاده کرده‌ایم. در نهایت پس از ثبت اطلاعات، کاربر به صفحه‌ی نمایش لیست اتاق‌ها، توسط سرویس توکار NavigationManager، هدایت می‌شود.

اگر پیشتر با ASP.NET Web Forms کار کرده باشید (اولین روش توسعه‌ی برنامه‌های وب در دنیای دات نت)، مدل برنامه نویسی Blazor Server، بسیار شبیه به کار با وب فرم‌ها است؛ البته بر اساس آخرین تغییرات دنیای دانت نت مانند برنامه نویسی async، کار با سرویس‌ها، تزریق وابستگی‌های توکار و غیره.


نمایش لیست اتاق‌های ثبت شده


تا اینجا موفق شدیم اطلاعات یک مدل اعتبارسنجی شده را در بانک اطلاعاتی ثبت کنیم. مرحله‌ی بعد، نمایش لیست اطلاعات ثبت شده‌ی در بانک اطلاعاتی است. بنابراین به کامپوننت HotelRoomList.razor مراجعه کرده و آن‌را به صورت زیر تکمیل می‌کنیم:
@page "/hotel-room"

@inject IHotelRoomService HotelRoomService

<div class="row mt-4">
    <div class="col-8">
        <h4 class="card-title text-info">Hotel Rooms</h4>
    </div>
    <div class="col-3 offset-1">
        <NavLink href="hotel-room/create" class="btn btn-info">Add New Room</NavLink>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Occupancy</th>
                    <th>Rate</th>
                    <th>
                        Sqft
                    </th>
                    <th>

                    </th>
                </tr>
            </thead>
            <tbody>
                @if (HotelRooms.Any())
                {
                    foreach (var room in HotelRooms)
                    {
                        <tr>
                            <td>@room.Name</td>
                            <td>@room.Occupancy</td>
                            <td>@room.RegularRate.ToString("c")</td>
                            <td>@room.SqFt</td>
                            <td></td>
                        </tr>
                    }
                }
                else
                {
                    <tr>
                        <td colspan="5">No records found</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

@code
{
    private List<HotelRoomDTO> HotelRooms = new List<HotelRoomDTO>();

    protected override async Task OnInitializedAsync()
    {
        await foreach(var room in HotelRoomService.GetAllHotelRoomsAsync())
        {
            HotelRooms.Add(room);
        }
    }
}
توضیحات:
- متد GetAllHotelRoomsAsync، لیست اتاق‌های ثبت شده را بازگشت می‌دهد. البته خروجی آن از نوع <IAsyncEnumerable<HotelRoomDTO است که از زمان C# 8.0 ارائه شد و روش کار با آن اندکی متفاوت است. IAsyncEnumerable‌ها را باید توسط await foreach پردازش کرد.
- همانطور که در مطلب بررسی چرخه‌ی حیات کامپوننت‌ها نیز عنوان شد، متدهای رویدادگران OnInitialized و نمونه‌ی async آن برای دریافت اطلاعات از سرویس‌ها طراحی شده‌اند که در اینجا نمونه‌ای از آن‌را مشاهده می‌کنید.
- پس از تشکیل لیست اتاق‌ها، حلقه‌ی foreach (var room in HotelRooms) تعریف شده، ردیف‌های آن‌را در UI نمایش می‌دهد.


کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید: Blazor-5x-Part-14.zip
  • #
    ‫۳ سال و ۴ ماه قبل، دوشنبه ۳۰ فروردین ۱۴۰۰، ساعت ۱۲:۵۰
    یک نکته‌ی تکمیلی: اعتبارسنجی خواص تو در تو

    DataAnnotationsValidator ای که در این مطلب معرفی شد، کار اعتبارسنجی خواص تو در تو را انجام نمی‌دهد. برای این موارد، بسته‌ی آزمایشی به نام Microsoft.AspNetCore.Components.DataAnnotations.Validation وجود دارد که پس از نصب، روش استفاده‌ی از آن به صورت زیر است:
    public class Employee
    {
        [Required]
        public string FirstName { get; set; }
    
        [Required]
        public string LastName { get; set; }
    
        [ValidateComplexType]
        public Department Department { get; set; } = new Department();
    }
    
    public class Department
    {
        [Required]
        public string DepartmentName { get; set; }
    }
    - ابتدا باید خاصیت تو در تویی که قرار است اعتبارسنجی شود با ویژگی ValidateComplexType مشخص شود.
    - سپس تعریف ویژگی‌های اعتبارسنجی بر روی خواص کلاس تو در توی مورد استفاده، همانند قبل خواهد بود و تفاوتی نمی‌کند.
    - در آخر جهت انجام عملیات اعتبارسنجی، بجای DataAnnotationsValidator قبلی باید از ObjectGraphDataAnnotationsValidator به صورت زیر استفاده کرد:
    <EditForm Model="@Employee">
        <ObjectGraphDataAnnotationsValidator />
        <InputText Id="name" Class="form-control" @bind-Value="@Model.Department.DepartmentName"></InputText>
        <ValidationMessage For="@(() => Model.Department.DepartmentName)" />
    </EditForm>
    • #
      ‫۳ سال و ۴ ماه قبل، سه‌شنبه ۳۱ فروردین ۱۴۰۰، ساعت ۱۴:۲۰
      یک نکته‌ی تکمیلی: روش اعتبارسنجی مقایسه‌ی مقدار دو ورودی
      در برنامه‌های Blazor بهتر است از ویژگی جدید [CompareProperty] بجای [Compare] استفاده شود که جزئی از بسته‌ی Microsoft.AspNetCore.Components.DataAnnotations.Validation است. (این مورد در Blazor 5x جزئی از همان ویژگی Compare اصلی شده و دیگر به آن نیازی نیست )
      public class EditEmployeeModel 
      {
          public string Email { get; set; }
      
          [CompareProperty("Email", 
              ErrorMessage = "Email and Confirm Email must match")]
          public string ConfirmEmail { get; set; }
      }
  • #
    ‫۳ سال و ۴ ماه قبل، دوشنبه ۳۰ فروردین ۱۴۰۰، ساعت ۱۳:۳۴
    یک نکته‌ی تکمیلی: استفاده از fluent validation در برنامه‌های Blazor
    کتابخانه‌ی FluentValidation به صورت توکار از Blazor پشتیبانی نمی‌کند؛ اما بسته‌های زیر چنین امکانی را برای آن فراهم کرده‌اند:
  • #
    ‫۳ سال و ۴ ماه قبل، دوشنبه ۳۰ فروردین ۱۴۰۰، ساعت ۱۴:۰۷
    یک نکته‌ی تکمیلی: روش تهیه‌ی ویژگی‌های سفارشی اعتبارسنجی، در برنامه‌های Blazor

    اگر ویژگی‌های پیش‌فرض مهیا، پاسخگوی اعتبارسنجی مدنظر نبودند، می‌توان یک attribute سفارشی را تهیه کرد:
    using System.ComponentModel.DataAnnotations;
    
    namespace CustomValidators
    {
        [AttributeUsage(AttributeTargets.Field | AttributeTargets.Property | AttributeTargets.Parameter)]
        public class EmailDomainValidator : ValidationAttribute
        {
            public string AllowedDomain { get; set; }
    
            protected override ValidationResult IsValid(object value, 
                ValidationContext validationContext)
            {
                string[] strings = value.ToString().Split('@');
                if (strings[1].ToUpper() == AllowedDomain.ToUpper())
                {
                    return null;
                }
    
                return new ValidationResult($"Domain must be {AllowedDomain}",
                new[] { validationContext.MemberName });
            }
        }
    }
    توضیحات:
    - کار با ارث بری از کلاس پایه‌ی ValidationAttribute شروع می‌شود و باید متد IsValid آن‌را بازنویسی کرد.
    - اگر متد IsValid، نال برگرداند، یعنی مشکلی نیست؛ در غیراینصورت خروجی آن باید از نوع ValidationResult باشد.
    - پارامتر validationContext اطلاعاتی مانند نام خاصیت در حال بررسی را ارائه می‌دهد.
    - در اینجا متد ()ValidationContext.GetService نال را بر می‌گرداند؛ یعنی فعلا از تزریق وابستگی‌ها در آن پشتیبانی نمی‌شود.

    و در آخر روش استفاده‌ی از آن، همانند سایر ویژگی‌های اعتبارسنجی است:
    public class Employee
    {
        [EmailDomainValidator(AllowedDomain = "site.com")]
        public string Email { get; set; }
    }
  • #
    ‫۳ سال و ۳ ماه قبل، دوشنبه ۲۰ اردیبهشت ۱۴۰۰، ساعت ۱۵:۵۵
    یک نکته‌ی تکمیلی: امکان اعتبارسنجی دستی فرم‌ها در Blazor

    در این مطلب با روش معرفی EditForm و خاصیت Model آن آشنا شدیم که کار اعتبارسنجی را به صورت خودکار مدیریت می‌کند. اگر خواستیم کنترل بیشتری را بر روی این فرآیند داشته باشیم، می‌توان عملیات اعتبارسنجی را دستی کرد:
    @implements IDisposable
    
    <EditForm EditContext="@_editContext" OnValidSubmit="submit">
    
    
        <button type="submit" disabled="@_isInvalidForm">Submit</button>
    </EditForm>
    
    @code
    {
        private User _userModel = new User();
        private EditContext _editContext;
        private bool _isInvalidForm = true;
    
    
        protected override void OnInitialized()
        {
            _editContext = new EditContext(_userModel);
            _editContext.OnFieldChanged += HandleFieldChanged;
        }
    
        private void submit()
        {
            if(_editContext.Validate())
            {
               
            }
        }
    
        private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
        {
            _isInvalidForm = !_editContext.Validate();
            StateHasChanged();
        }
    
        public void Dispose()
        {
            _editContext.OnFieldChanged -= HandleFieldChanged;
        }
    }
    اینبار در اینجا بجای استفاده از خاصیت Model، از خاصیت جدید EditContext استفاده می‌شود (تنها یکی از این دو را می‌توان ذکر کرد). روش مقدار دهی EditContext را در روال آغازین کامپوننت مشاهده می‌کنید که وهله‌ای از مدل را دریافت کرده و تحت بررسی قرار می‌دهد. EditContext یک پارامتر آبشاری است و به صورت خودکار در اختیار تمام کنترل‌ها و کامپوننت‌های محصور شده‌ی توسط EditForm قرار می‌گیرد.
    نمونه‌ای از روش کار با آن‌را در متد submit مشاهده می‌کنید که باید به همراه فراخوانی متد Validate آن باشد و یا می‌توان به صورت زیر در مورد یک فیلد عمل کرد:
    var isValid = !_editContext.GetValidationMessages(fieldIdentifier).Any();
    و یا حتی می‌توان با استفاده از رخ‌داد OnFieldChanged، برای مثال بررسی کرد که آیا کل فرم معتبر هست یا خیر؟ و اگر خیر، برای مثال دکمه‌ی submit را غیرفعال کرد. در این حالت همواره بهتر است که پاکسازی رویداد OnFieldChanged را در پایان کار انجام داد، تا برنامه دچار نشتی حافظه نشود.
  • #
    ‫۳ سال و ۳ ماه قبل، چهارشنبه ۲۹ اردیبهشت ۱۴۰۰، ساعت ۱۶:۴۹
    یک نکته‌ی تکمیلی: روش ایجاد کامپوننت‌های ورودی سفارشی در Blazor


    Blazor به صورت توکار به همراه تعدادی کنترل ورودی مانند InputText، InputTextArea، InputSelect، InputNumber، InputCheckbox و InputDate است که با سیستم اعتبارسنجی ورودی‌های آن نیز یکپارچه هستند.
    در یک برنامه‌ی واقعی نیاز است divهایی مانند زیر را که به همراه روش تعریف این کامپوننت‌های ورودی است، صدها بار در قسمت‌های مختلف تکرار کرد:
    <EditForm Model="NewPerson" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        
        <div class="form-group">
            <label for="firstname">First Name</label>
            <InputText @bind-Value="NewPerson.FirstName" class="form-control" id="firstname" />
            <ValidationMessage For="NewPerson.FirstName" />
        </div>
    و خصوصا اگر نگارش بوت استرپ مورد استفاده تغییر کند، برای به روز رسانی برنامه نیاز خواهیم داشت تا تمام فرم‌های آن‌را تغییر دهیم. در یک چنین حالت‌هایی امکان ایجاد مخزنی از کامپوننت‌های سفارشی شده در برنامه‌های Blazor نیز پیش‌بینی شده‌است.
    تمام کامپوننت‌های ورودی Blazor از کلاس پایه‌ی ویژه‌ای به نام <InputBase<T مشتق شده‌اند. این کلاس است که کار یکپارچگی با EditContext را جهت ارائه‌ی اعتبارسنجی‌های لازم، انجام می‌دهد. همچنین کار binding را نیز با ارائه‌ی پارامتر Value از نوع T انجام می‌دهد که نوشتن یک چنین کدهایی مانند "bind-Value="myForm.MyValue@ را میسر می‌کند. InputBase یک کلاس جنریک است که خاصیت Value آن از نوع T است. از آنجائیکه مرورگرها اطلاعات را به صورت رشته‌ای در اختیار ما قرار می‌دهند، این کامپوننت نیاز به روشی را دارد تا بتواند ورودی دریافتی را به نوع T تبدیل کند و اینکار را می‌توان با بازنویسی متد TryParseValueFromString آن انجام داد:
     protected abstract bool TryParseValueFromString(string value, out T result, out string validationErrorMessage);

    یک مثال: کامپوننت جدید Shared\InputPassword.razor
    @inherits InputBase<string>
    <input type="password" @bind="@CurrentValue" class="@CssClass" />
    
    @code {
        protected override bool TryParseValueFromString(string value, out string result, 
            out string validationErrorMessage)
        {
            result = value;
            validationErrorMessage = null;
            return true;
        }
    }
    در بین کامپوننت‌های پیش‌فرض Blazor، کامپوننت InputPassword را نداریم که نمونه‌ی سفارشی آن‌را می‌توان با ارث‌بری از InputBase، به نحو فوق طراحی کرد و نمونه‌ای از استفاده‌ی از آن می‌تواند به صورت زیر باشد:
    <EditForm Model="userInfo" OnValidSubmit="CreateUser">
        <DataAnnotationsValidator />
    
        <InputPassword class="form-control" @bind-Value="@userInfo.Password" />
    توضیحات:
    - در این مثال CurrentValue و CssClass از کلاس پایه‌ی InputBase تامین می‌شوند.
    - هربار که مقدار ورودی وارد شده‌ی توسط کاربر تغییر کند، متد TryParseValueFromString اجرا می‌شود.
    - در متد TryParseValueFromString، مقدار validationErrorMessage به نال تنظیم شده؛ یعنی اعتبارسنجی خاصی مدنظر نیست. اولین پارامتر آن مقداری است که از کاربر دریافت شده و دومین پارامتر آن مقداری است که به کامپوننت ورودی که از آن ارث‌بری کرده‌ایم، ارسال می‌شود تا CurrentValue را تشکیل دهد (و یا خاصیت CurrentValueAsString نیز برای این منظور وجود دارد).
    - اگر اعتبارسنجی اطلاعات ورودی در متد TryParseValueFromString با شکست مواجه شود، مقدار false را باید بازگشت داد.
  • #
    ‫۳ سال و ۲ ماه قبل، یکشنبه ۲۳ خرداد ۱۴۰۰، ساعت ۱۹:۱۰
    یک نکته‌ی تکمیلی: Blazor، حساس به بزرگی و کوچکی حروف است
    در حین تعاریف المان‌های فرم‌ها ممکن است بجای InputCheckbox بنویسیم InputCheckBox؛ در یک چنین حالتی خطای کامپایلر بسیار عمومی زیر را دریافت خواهیم کرد:
    The attribute names could not be inferred from bind attribute 'bind-value'. 
    Bind attributes should be of the form 'bind' or 'bind-value' along with their 
    corresponding optional parameters like 'bind-value:event', 'bind:format' etc.
    دلیل دیگر آن می‌تواند فراموش کردن یک using@ باشد. اگر کامپوننتی در فضای نام خاصی تعریف شده، ذکر using آن نباید فراموش شود. در کل اگر Blazor نتواند المان تعریف شده را شناسایی کند (به علت اشتباه تایپی و یا فراموش کردن ذکر فضای نام آن)، خطای فوق صادر می‌شود.
  • #
    ‫۳ سال قبل، یکشنبه ۱۷ مرداد ۱۴۰۰، ساعت ۱۴:۵۴
    یک نکته‌ی تکمیلی: روش سازگار کردن اعتبارسنجی فرم‌های استاندارد Blazor با کلاس‌های CSS بوت استرپ 4 و 5
    زمانیکه از EditForm و کامپوننت‌های توکار Blazor استفاده می‌کنیم، اگر کامپوننتی در وضعیت اعتبارسنجی شده قرار داشته باشد، با کلاس valid:
    class="modified valid form-control"
    و اگر در وضعیت شکست اعتبارسنجی قرارگیرد، با کلاس invalid مزین می‌شود:
    class="modified invalid form-control"
    اما برای یکپارچه سازی آن با کلاس‌های اعتبارسنجی بوت استرپ 4 و 5، نیاز است از کلاس‌های is-valid و is-invalid بجای valid و invalid استفاده شود. این تغییر نیاز به استفاده از «یک نکته‌ی تکمیلی: امکان اعتبارسنجی دستی فرم‌ها در Blazor» را دارد؛ چون با دسترسی به EditContext است که می‌توان CSS provider آن‌را سفارشی سازی کرد؛ برای مثال:
    EditContext = new EditContext(Model);
    EditContext.SetFieldCssClassProvider(new BootstrapFieldCssClassProvider());
    که سفارشی ساز مخصوص بوت استرپ، به صورت زیر قابل تعریف است:
    using System;
    using System.Linq;
    using Microsoft.AspNetCore.Components.Forms;
    
    namespace BlazorComponents
    {
        /// <summary>
        /// Supplies CSS class names for form fields to represent their validation state or other state information from an EditContext.
        /// </summary>
        public class BootstrapFieldCssClassProvider : FieldCssClassProvider
        {
            /// <summary>
            /// Gets a string that indicates the status of the specified field as a CSS class.
            /// </summary>
            public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
            {
                if (editContext == null)
                {
                    throw new ArgumentNullException(nameof(editContext));
                }
    
                var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
    
                if (editContext.IsModified(fieldIdentifier))
                {
                    return isValid ? "is-valid" : "is-invalid";
                }
                return isValid ? "" : "is-invalid";
            }
        }
    }
    در اینجا در ابتدا بررسی می‌شود که آیا فیلد جاری معتبر است یا خیر و همچنین آیا ویرایش شده‌است یا خیر؟ سپس بر این اساس، کلاس‌های ویژه‌ی بوت استرپ، بجای کلاس‌های پیش‌فرض ارائه خواهند شد.
  • #
    ‫۱ سال و ۹ ماه قبل، دوشنبه ۱۶ آبان ۱۴۰۱، ساعت ۱۵:۰۴
    آیا نیاز هست که ورودی‌ها قبل از ارسال به بانک توسط HtmlSanitizer پالایش شوند؟ برای مثال چنین داده ای می‌تواند در بانک به راحتی ذخیره شود. در رابطه با QueryString‌ها چطور؟ آیا پالایش آن‌ها نیاز است؟
    @"<script>alert('xss')</script><div onload=""alert('xss')"""
        + @"style=""background-color: rgba(0, 0, 0, 1)"">Test<img src=""test.png"""
        + @"style=""background-image: url(javascript:alert('xss')); margin: 10px""></div>";
    در رابطه با SQL injection چطور؟ صرف اینکه از ORM استفاده می‌شود کفایت می‌کند یا اینکه بایستی کامندهای مربوط به SQL injection را تمیز کنیم؟
  • #
    ‫۱۰ ماه قبل، دوشنبه ۲۹ آبان ۱۴۰۲، ساعت ۱۸:۳۷
    نحوه نمایش مقدار Display attribute پراپرتی‌ها در تگ‌های Label با استفاده از کامپوننت‌های جنریک

    در ASP.NET Core اگه بخوایم Display یک پراپرتی رو نمایش بدیم به این صورت عمل میکنیم:
    @model ProjectName.ViewModels.Identity.RegisterViewModel
    <label asp-for="PhoneNumber"></label>
    در حال حاضر چنین قابلیتی به صورت توکار در Blazor وجود ندارد، برای اینکه این قابلیت رو با استفاده از کامپوننت‌ها پیاده سازی کنیم میتوان از یک کامپوننت جنریک استفاده کرد (اطلاعات بیشتر در مورد کامپوننت‌های جنریک):
    @using System.Reflection
    @using System.Linq.Expressions
    @using System.ComponentModel.DataAnnotations
    @typeparam T
    @if (ChildContent is null)
    {
        <label>@Label</label>
    }
    else
    {
        <label>
            @Label
            @ChildContent
        </label>
    }
    @code {
    
        [Parameter, EditorRequired]
        public Expression<Func<T>> DisplayNameFor { get; set; } = default!;
    
        [Parameter]
        public RenderFragment? ChildContent { get; set; }
    
        private string Label => GetDisplayName();
    
        private string GetDisplayName()
        {
            var expression = (MemberExpression)DisplayNameFor.Body;
            var value = expression.Member.GetCustomAttribute(typeof(DisplayAttribute)) as DisplayAttribute;
            return value?.Name ?? expression.Member.Name;
        }
    }

    نحوه استفاده:
    private LoginDto Login { get; } = new();
    <CustomDisplayName DisplayNameFor="@(() => Login.UserName)" />
    همچنین میتوان ChildContent رو که یک RenderFragment است مقداری دهی کرد که در کنار Display، مقدار ChildContent رو هم نمایش بده.
    <CustomDisplayName DisplayNameFor="@(() => Login.UserName)">
        <span class="text-danger">(*)</span>
    </CustomDisplayName>

    نحوه استفاده در پروژه‌های چند زبانه
    کامپوننت فوق برای استفاده در پروژه چند زبانه باید به صورت زیر تغییر پیدا کنه:
    @using System.Reflection
    @using System.Linq.Expressions;
    @using System.ComponentModel.DataAnnotations;
    @typeparam T
    @if (ChildContent == null)
    {
        <label>@Label</label>
    }
    else
    {
        <label>
            @Label
            @ChildContent
        </label>
    }
    @code {
    
        [Parameter]
        public Expression<Func<T>> DisplayNameFor { get; set; } = default!;
    
        [Parameter]
        public RenderFragment? ChildContent { get; set; }
    
        [Inject]
        public IStringLocalizerFactory LocalizerFactory { get; set; } = default!;
    
        private string Label => GetDisplayName();
    
        private string GetDisplayName()
        {
            var expression = (MemberExpression)DisplayNameFor.Body;
            var displayAttribute = expression.Member.GetCustomAttribute(typeof(DisplayAttribute)) as DisplayAttribute;
            if (displayAttribute is {ResourceType: not null })
            {
                // Try to dynamically create an instance of the specified resource type
                var resourceType = displayAttribute.ResourceType;
                var localizer = LocalizerFactory.Create(resourceType);
    
                return localizer[displayAttribute.Name ?? expression.Member.Name];
            }
            return displayAttribute?.Name ?? expression.Member.Name;
        }
    }
    برای اتریبیوت Display هم باید مقدار ResourceType مقدار دهی شود:
    public class LoginDto
    {
        [Display(Name = nameof(LoginDtoResource.UserName), ResourceType = typeof(LoginDtoResource))]
        [Required]
        [MaxLength(100)]
        public string UserName { get; set; } = default!;
    
        //...
    }

    LoginDtoResource یک فایل Resource است که باید با باز کردنش در ویژوال استودیو، Access modifier اونو به public تغییر بدید.
    نحوه افزودن کلاس به Label ( ساده سازی تعاریف ویژگی‌های المان‌ها )
    افزودن یک دیکشنری به کامپوننت:
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> InputAttributes { get; set; } = new();
    استفاده از InputAttributes در تگ Label:
    @if (ChildContent is null)
    {
        <label @attributes="InputAttributes">
            @Label
        </label>
    }
    else
    {
        <label @attributes="InputAttributes">
            @Label
            @ChildContent
        </label>
    }
    الان میتونیم هر تعداد اتریبیوتی رو به کامپوننت پاس بدیم:
    <CustomDisplayName DisplayNameFor="@(() => Login.UserName)" class="form-label" id="test" for="UserName" />