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ột
EditForm
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ộtEditForm
để 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ệnOnSubmit
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 EditForm
trê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ử:
Input component | Rendered as (HTML) |
---|---|
InputCheckbox | <input type=”checkbox”> |
InputDate<TValue> | <input type=”date”> |
InputFile | <input type=”file”> |
InputNumber<TValue> | <input type=”number”> |
InputRadio<TValue> | <input type=”radio”> |
InputRadioGroup<TValue> | Group of child radio buttons |
InputSelect<TValue> | <select> |
InputText | <input> |
InputTextArea | <textarea> |
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 trongEditForm
. 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
Pingback: Validate thông tin nhập của người dùng không cần viết validation code | Phạm Duy Anh