Phạm Duy Anh

Các cơ sở được cung cấp bởi các phần tử <form> và <input> rất đơn giản nhưng tương đối thô sơ. Blazor mở rộng khả năng của các form với thành phần <EditForm> của nó. Ngoài ra, Blazor cung cấp một loạt các yếu tố đầu vào chuyên biệt mà bạn có thể sử dụng để định dạng và xác thực dữ liệu do người dùng nhập.

Trong phần này, bạn sẽ học cách sử dụng phần tử <EditForm> và các phần tử đầu vào để xây dựng các biểu mẫu chức năng. Bạn cũng sẽ thấy cách liên kết dữ liệu với một biểu mẫu.

EditForm trong Blazor là gì

EditForm là một Blazor component thực hiện vai trò của một  HTML form trên trang Blazor. Sự khác biệt chính giữa EditForm và một HTML form là:

• Data binding.  bạn có thể liên kết đối tượng với một EditForm. EditForm như một view của đối tượng mục đích nhập và hiển thị dữ liệu.
• Validation. mộtEditForm cung cấp khả năng validation rộng và có thể mở rộng. bạn có thể thêm attributes vào elements trong một EditForm để  chỉ định các quy tắc xác thực.EditForm sẽ áp dụng các rules một cách tự động.
• Form submission. một HTML form gửi 1 post request đến form-handler khi nó được submitted. Trình xử lý biểu mẫu này dự kiến sẽ thực hiện quá trình gửi và sau đó hiển thị bất kỳ kết quả.Một EditForm tuân thủ theo Blazor event model; bạn chỉ định một trình xử lý sự kiện C# nắm bắt sự kiện OnSubmit event. Trình xử lý sự kiện thực hiện submit logic.
• Input elements.Một HTML form sử dụng một <input> control để thu thập user input, và một submit button để post form để xử lý. MộtEditForm  có thể sử dụng các phần tử tương tự này, nhưng Blazor cung cấp một thư viện các input components có các tính năng khác, chẳng hạn như validation và data binding tích hợp sẵn.

Tạo một EditForm với data binding

<EditForm> element hỗ trợ data binding với Model parameter. Bạn chỉ định một đối tượng làm đối số cho tham số này. input elements trong EditForm có thể thể liên kết với các properties và  fields mà model hiển thị bằng cách sử dụng @bind-Value parameter. Ví dụ dưới đây dựa trên lớp WeatherForecast  được tạo bởi Blazor Server App template mặc định. Lớp trông như thế này:

public class WeatherForecast
{
  public DateTime Date { get; set; }

  public int TemperatureC { get; set; }

  public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

  public string Summary { get; set; }
}

model cho EditForm là một instance của WeatherForecast class được lưu trữ trong @currentForecast variable, và các  input elements được liên kết với fields trong class:

@page "/fetchdata"

@using WebApplication.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<input type="number" width="2" min="0" max="@upperIndex" @onchange="ChangeForecast" value="@index"/>

<EditForm Model=@currentForecast>
<InputDate @bind-Value=currentForecast.Date></InputDate>
<InputNumber @bind-Value=currentForecast.TemperatureC></InputNumber>
<InputText @bind-Value=currentForecast.Summary></InputText>
</EditForm>

@code {
   private WeatherForecast[] forecasts;
   private WeatherForecast currentForecast;
   private int index = 0;
   private int upperIndex = 0;

   protected override async Task OnInitializedAsync()
   {
    forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    currentForecast = forecasts[index];
    upperIndex = forecasts.Count() - 1;
   }

   private async Task ChangeForecast(ChangeEventArgs e)
  {
    index = int.Parse(e.Value as string);
    if (index <= upperIndex && index >= 0)
    {
      currentForecast = forecasts[index];
    }
  }
}

Trong ví dụ này,  OnInitialized event điền giá trị array của WeatherForecast objects bằng một external service. currentForecast variable được set bằng giá trị đầu tiên của array; đối tượng này được hiển thị bởi EditForm. Người dùng có thể chuyển qua mảng bằng cách sử dụng trường nhập số phía trên EditFormtrên trang. Giá trị của field thì được sử dụng như là index bên trong array và biến currentForecast  thì được đặt thành đối tượng được tìm thấy tại chỉ mục đó bằng cách sử dụng phương thức ChangeForecast.

Kết quả khi run sẽ như hình bên dưới:

EditForm component implements 2 chiều (two-way) data binding. form hiện thị giá trị từ model, Nhưng user có thể update những giá trị này trên form và chúng sẽ được push back lại model.

Hiểu về Blazor input controls

Blazor cũng có các components riêng được thiết kế để hoạt động với <EditForm> element và hỗ trợ data binding giữa các tính năng với nhau. Khi Blazor hiển thị một trang chứa các components này, chúng được chuyển đổi thành các phần tử HTML <input> tương ứng được liệt kê trong bảng. Một số Blazor components là chung chung; tham số kiểu được xác định chắc chắn bằng  Blazor runtime tùy thuộc vào kiểu dữ liệu được liên kết với phần tử:

Xử lý form submission

khi các thay đổi hoàn tất, bạn có thể gửi form để validate dữ liệu trên máy chủ và lưu các thay đổi. Blazor hỗ trợ hai loại validate; khai báo và có lập trình. Các quy tắc xác thực khai báo hoạt động trên máy khách, trong trình duyệt. Chúng hữu ích để thực hiện xác thực kích thước máy khách cơ bản trước khi dữ liệu được truyền đến máy chủ. Xác thực phía máy chủ hữu ích để xử lý các tình huống phức tạp không có sẵn với xác thực khai báo, chẳng hạn như kiểm tra chéo dữ liệu trong một trường với dữ liệu từ các nguồn khác.

Một ứng dụng trong thế giới thực nên sử dụng kết hợp xác thực phía máy khách và phía máy chủ; xác thực phía máy khách bẫy các lỗi đầu vào cơ bản của người dùng và ngăn nhiều trường hợp dữ liệu không hợp lệ được gửi đến máy chủ để xử lý. Xác thực phía máy chủ đảm bảo rằng yêu cầu lưu dữ liệu của người dùng không cố gắng bỏ qua xác thực dữ liệu và lưu trữ dữ liệu không đầy đủ hoặc bị hỏng.

bạn cũng có thể bắt các JavaScript events như onchange vàoninput, các sự kiện @onchange và @oninput tương đương Blazor cho nhiều điều khiển trong EditForm. Bạn có thể sử dụng các sự kiện này để kiểm tra và xác thực dữ liệu theo chương trình, trên cơ sở từng trường, trước khi người dùng gửi biểu mẫu. Tuy nhiên, cách làm này không được khuyến khích. Người dùng có thể khó chịu khi thấy các thông báo xác thực xuất hiện khi họ nhập từng phím bấm hoặc tab giữa các trường. Lưu xác thực khi người dùng đã hoàn thành đầu vào của họ.

Một EditForm có 3 events được chay khi submitted:

• OnValidSubmit. Sự kiện này được kích hoạt nếu các trường đầu vào vượt qua thành công các quy tắc xác thực được xác định bởi các thuộc tính xác thực của chúng..
• OnInvalidSubmit. Sự kiện này được kích hoạt nếu bất kỳ trường đầu vào nào trên biểu mẫu không xác thực được xác định bởi các thuộc tính xác thực của chúng.
• OnSubmit. Sự kiện này xảy ra khi EditForm được gửi bất kể tất cả các trường đầu vào có hợp lệ hay không.

Các sự kiện OnValidSubmit và OnInvalidSubmit hữu ích cho một EditForm triển khai xác thực cơ bản ở cấp trường đầu vào riêng lẻ. Nếu bạn có các yêu cầu xác thực phức tạp hơn, chẳng hạn như kiểm tra chéo một trường đầu vào với một trường đầu vào khác để đảm bảo sự kết hợp hợp lệ của các giá trị, thì hãy xem xét sử dụng sự kiện OnSubmit. EditForm có thể xử lý cặp sự kiện OnValidSubmit và OnInvalidSubmit hoặc sự kiện OnSubmit, nhưng không phải cả ba. Bạn kích hoạt gửi bằng cách thêm nút Gửi vào EditForm. Khi người dùng chọn nút này, các sự kiện gửi được chỉ định bởi EditForm sẽ được kích hoạt.

Quá trình xây dựng và triển khai không kiểm tra sự kết hợp không hợp lệ của các sự kiện gửi, nhưng một lựa chọn bất hợp pháp sẽ tạo ra lỗi trong thời gian chạy. Ví dụ: nếu bạn cố gắng sử dụng OnValidSubmit với OnSubmit, ứng dụng của bạn sẽ tạo ra ngoại lệ thời gian chạy sau:

Error: System.InvalidOperationException: When supplying an OnSubmit parameter to EditForm, do not also supply OnValidSubmit or OnInvalidSubmit.

Ví dụ dưới đây cho thấy EditForm từ ví dụ trước với một nút gửi.

<EditForm Model="@shirt" OnSubmit="ValidateData">
...
<input type="submit" class="btn btn-primary" value="Save"/>
<p></p>
<div>@Message</div>
</EditForm>

@code {
private string Message = String.Empty;

...

private async Task ValidateData(EditContext editContext)
{
var shirt = editContext.Model as Shirt;
if (shirt is null)
{
Message = "T-Shirt object is invalid";
return;
}

if (shirt.Color is ShirtColor.Red && shirt.Size is ShirtSize.ExtraLarge)
{
Message = "Red T-Shirts not available in Extra Large size";
return;
}

if (shirt.Color is ShirtColor.Blue && shirt.Size is ShirtSize.Small or ShirtSize.Medium)
{
Message = "Blue T-Shirts not available in Small or Medium sizes";
return;
}

if (shirt.Color is ShirtColor.White && shirt.Price > 50)
{
Message = "White T-Shirts must be priced at 50 or lower";
return;
}

// Data is valid
// Save the data
Message = "Changes saved";
}
}

Hình ảnh bên dưới cho thấy kết quả nếu người dùng cố gắng cung cấp dữ liệu không hợp lệ:

theo: https://docs.microsoft.com/en-us/learn/modules/blazor-improve-how-forms-work/4-take-advantage-power-blazor-forms