ایجاد فرم و اعتبارسنجی مقادیر آن در Blazor

برای اینکه بتوانید از فرم‌ها در Blazor استفاده کنید، مثال زیر می‌تواند شما را یاری کند:

@page "/ContactUs"

<h3>ContactUs</h3>

<EditForm Model="@ContactModel" OnValidSubmit="SubmitData">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <div class="form-group">
        <div class="col-12">
            <label>نام:</label>
            <InputText @bind-Value="ContactModel.Name" placeholder="نام..." class="form-control"></InputText>
            <ValidationMessage For="()=>ContactModel.Name" class="text-danger"></ValidationMessage>
        </div>
        <div class="col-12">
            <label>ایمیل:</label>
            <InputText @bind-Value="ContactModel.Email" placeholder="ایمیل..." class="form-control"></InputText>
            <ValidationMessage For="()=>ContactModel.Email" class="text-danger"></ValidationMessage>
        </div>
        <div class="col-12">
            <label>متن پیام:</label>
            <InputTextArea @bind-Value="ContactModel.Content" placeholder="متن پیام..." class="form-control"></InputTextArea>
            <ValidationMessage For="()=>ContactModel.Content" class="text-danger"></ValidationMessage>
        </div>
        <div class="col-12">
            <button class="btn btn-success">ثبت پیام</button>
        </div>
    </div>
</EditForm>

@code {
    private Models.ContactUs_ViewModel ContactModel { get; set; } = new Models.ContactUs_ViewModel();

    private async Task SubmitData()
    {
        ContactModel.Name = "Mohammad Shadman";
    }
}

در این حالت برای ایجاد فرم می‌توانید از کامپوننت پیش‌فرض خود Blazor یعنی EditForm استفاده کنید اما باید توجه داشته باشید که این کامپوننت نیاز به یک مدل دارد تا بتواند فرم شما را نمایش دهد.

برای اعتبارسنجی مقادیر داخل فرم، باید از دو کامپوننت دیگر استفاده کنید، اولی DataAnnotationsValidator که درست در زیر فرم قرار گرفته و دومی ValidationMessage است که در زیر هر ورودی قرار می‌گیرد تا خطاهای مربوطه را نمایش دهند. دقت داشته باشید که این اعتبارسنجی از DataAnnotationsهای موجود در کلاس مدل شما نشات خواهد گرفت.

همچنین برای اینکه اعتبارسنجی و نمایش خطاهای آن به درستی نمایش داده شود باید کامپوننت فرم را به OnValidSubmit بایند کنید. در این حالت قبل از submit شدن فرم خطاها نمایش داده می‌شود.