نحوه استفاده و نمایش Validation ها در Form در Blazor

پاسخ هوش مصنوعی

برای استفاده از اعتبارسنجی (Validation) در فرم ها در Blazor، ابتدا باید مدل داده ها (Model) خود را تعریف کنید و از ویژگی های داده ای (Data Annotations) برای اعتبارسنجی استفاده کنید. سپس می توانید از کامپوننت DataAnnotationsValidator به همراه ValidationSummary در فرم خود استفاده کنید.

در زیر یک نمونه ساده از چگونگی استفاده از اعتبارسنجی در یک فرم Blazor آورده شده است:

using System.ComponentModel.DataAnnotations;

public class UserModel
{
    [Required(ErrorMessage = "نام الزامی است")]
    public string Name { get; set; }

    [EmailAddress(ErrorMessage = "ایمیل معتبر نیست")]
    public string Email { get; set; }

    [Range(18, 100, ErrorMessage = "سن باید بین 18 تا 100 باشد")]
    public int Age { get; set; }
}

سپس می توانید از فرم در کامپوننت Blazor خود استفاده کنید:

@page "/validation-example"

@using System.ComponentModel.DataAnnotations

فرم ثبت نام


    
    

    

        نام:
        
        
    

    

        ایمیل:
        
        
    

    

        سن:
        
        
    

    ارسال


@code {
    private UserModel userModel = new UserModel();

    private void HandleValidSubmit()
    {
        // در اینجا می توانید داده ها را پردازش کنید
    }
}

در این کد، ما یک کلاس مدل به نام UserModel با ویژگی های داده ای تعریف کردیم و سپس از آن در کامپوننت EditForm استفاده کردیم. اعتبارسنجی به صورت خودکار بر اساس ویژگی های مدل انجام می شود و پیام های خطا در صورت وجود در کنار هر فیلد نمایش داده می شوند.

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

برای اعتبارسنجی فرم ها در Blazor راههای مختلفی وجود دارد. شما هم میتوانید از طریق Server Side و هم به صورت Client Side اعتبارسنجی فرم ها در Blazor را انجام دهید. اما برای انجام Validation در form ها در Blazor دو راه مهم تر و پراستفاده تر در ادامه توضیح داده میشه.

در ابتدا یک کلاس با نام Customer ایجاد می کنیم. این کلاس در واقع یک انتیتی هست و شامل فیلدهای زیر می باشد.

کلاس Customer

public class Customer
{
    [Key]
    public int Id { get; set; }
  
    [Required(ErrorMessage = "نام مشتری وارد نشده است")]
    public string CustomerName { get; set; }
    
    [Required(ErrorMessage = "تلفن مشتری وارد نشده است")]
    public string CustomerTel { get; set; }
}

خب حالا کدهای زیر را در صفحه index بنویسید.

صفحه Index.razor

@page "/"

<EditForm Model="customer" OnValidSubmit="Create">
    <label>Customer Name :</label>
    <br />
    <InputText @bind-Value="customer.CustomerName" />
    <br />
    <label>Customer Address :</label>
    <br />
    <InputText @bind-Value="customer.CustomerTel" />

    <button type="submit" class="btn btn-success">Create Customer</button>
</EditForm>

@code {
    Customer customer;
    protected override void OnInitialized()
    {
        customer = new Customer();
    }

    private void Create()
    {

    }
}

خب حالا اگر برنامه رو اجرا کنید چنین چیزی رو مشاهده می کنید.

خب تا اینجا یک فرم ساده رو داشتیم. اما حالا چجوری Validation ها رو برای فرم فعال کنیم.

نصب پکیج System.ComponentModel.Annotations برای اعتبار سنجی Form ها در Blazor

جهت فعال کردن و استفاده از قابلیت های اعتبارسنجی فیلدها در Form پکیج زیر را از طریق nuget نصب کنید.

System.ComponentModel.Annotations

نمایش خطاهای اعتبارسنجی توسط DataAnnotationsValidator

خب حالا برای نمایش خطاهای اعتبارسنجی میتونید از دستورات زیر استفاده کنید. این دستورات رو میتونید در درون تگ EditForm در بالای تگ قرار بدید.

<EditForm Model="customer" OnValidSubmit="Create">
    <DataAnnotationsValidator />
    <ValidationSummary />
   
    ...
</EditForm>

در این حالت خطاهای مربوط به اعتبارسنجی در بالای فرم نمایش داده می شود.

نمایش خطاهای اعتبارسنجی توسط ValidationMessage

راه بعدی برای نمایش خطاهای اعتبار سنجی این هست که خطا رو دقیقا زیر همون فیلد نمایش بدیم. برای این منظور بعد از هر فیلد میتونید دستور زیر رو بنویسید.

<InputText @bind-Value="customer.CustomerName" />
<ValidationMessage For="@(() => customer.CustomerName)" />

خب بنابراین Form شما به صورت زیر میشه :

<EditForm Model="customer" OnValidSubmit="Create">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>Customer Name :</label>
    <br />
    <InputText @bind-Value="customer.CustomerName" />
    <ValidationMessage For="@(() => customer.CustomerName)" />
    <br />
    <label>Customer Address :</label>
    <br />
    <InputText @bind-Value="customer.CustomerTel" />
    <ValidationMessage For="@(() => customer.CustomerTel)" />
    <button type="submit" class="btn btn-success">Create Customer</button>
</EditForm>

حالا اگر برنامه رو مجددا اجرا کنید و روی دکمه Create Customer کلیک کنید باید خطاهای اعتبارسنجی رو ببینید.

اطلاعات بیشتر 

Blazor Form Validation

دانلود سورس