Blazor Forms
Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті
Привіт! Подивимось, як можна створити форму в BlazorServer.
Розпочнемо з моделі. Створю файл Models/User.cs
, який буде містити поля для форми.
namespace BlazorLearn.Models { public class User { public string UserName { get; set; } public string LastName { get; set; } public string Email { get; set; } public int Age { get; set; } public string Gender { get; set; } } }
Для того, щоб модель була доступна для razor-компонентів, її потрібно добавити в _Imports.razor
, @using BlazorLearn.Models
.
Basic Form
Тепер я створю razor компонент Register.razor
, який буде містити в собі форму. Для того, щоб форму можна було відкрити в браузері зверху сторінки, додам @page "/register"
. В code секції потрібно створити новий обєкт класу User
, і також пусту стрінгу в яку буде записано дані після сабміту форми. І додам <p>@_formResult</p>
для того, щоб відобразити внесені дані після сабміту.
Тепер перейдемо до самої форми.
В blazor форма створюється за допомогою тегу EditForm
, в який потрібно передати модель. В нас це об’єкт типу User
який створено в секції code
— <EditForm Model="_user"></EditForm>
. Тепер в форму потрібно додати input поля. Для тексту це буде <InputText></InputText>
для інших типів даних є свої теги, наприклад InputNumber
для числових типів. Додам інпут поле для кожного елемента з моделі. Також в формі можна викликати метод на івенти типу OnValidSubmit
чи OnInvalidSubmit
. Для цього я зроблю метод HandleValidSubmit
, який запише в UserName i LastName з формив пусту стрінгу створену вище.
@page "/register" <p>@_formResult</p> <EditForm Model="_user" OnValidSubmit="HandleValidSubmit" On> <InputText id="UserName" @bind-Value="_user.UserName"></InputText> <InputText id="LastName" @bind-Value="_user.LastName"></InputText> <InputText id="Email" @bind-Value="_user.Email"></InputText> <InputSelect id="Gender" @bind-Value="_user.Gender"> <option value="">Select Gender</option> <option value="1">Male</option> <option value="2">Female</option> </InputSelect> <InputNumber id="Age" @bind-Value="_user.Age"></InputNumber> <button class="btn btn-primary" type="submit">Submit</button> </EditForm> @code { private User _user = new User(); private string _formResult = ""; private void HandleValidSubmit() { _formResult = $"{_user.UserName}, {_user.LastName} was created"; } }
Форма працює, але в полі Age я ввів −30 і ніякої валідації не відбулось. Додамо тепер валідацію.
Form Validation
Валідація додається за допомогою атрибутів. Повернемось до моделі і внесемо декілька змін.
using System.ComponentModel.DataAnnotations; namespace BlazorLearn.Models { public class User { [Required] [StringLength(maximumLength: 20, MinimumLength = 5, ErrorMessage = "Invalid UserName length")] public string UserName { get; set; } [Required] [StringLength(maximumLength: 10, MinimumLength = 5, ErrorMessage = "Invalid LastName length")] public string LastName { get; set; } [Required] [EmailAddress(ErrorMessage = "Provide a valid email address")] public string Email { get; set; } [Required] [Range(1, 100, ErrorMessage = "You need to enter valid range")] public int Age { get; set; } public string Gender { get; set; } } }
Тепер для UserName
та LestName
діє валідація на довжину і також ці поля обов’язкові для заповнення. Для Email
додана валідація на email адрес. І для Age
додана валідація на вік від 1 до 100. Також ці поля є обовязковими. Для поля Gender
ніякої валідації не додано.
Для того, щоб валідація відбувалась, потрібно додати <DataAnnotationsValidator></DataAnnotationsValidator>
тег в форму.
Тепер валідація працює, але ніякі повідомлення не відображаються. Для повідомлень, я додам ще один тег <ValidationSummary></ValidationSummary>
. В результаті форма набуде такого вигляду
@page "/register" <p>@_formResult</p> <EditForm Model="_user" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator></DataAnnotationsValidator> <ValidationSummary></ValidationSummary> <label> First Name: <InputText id="UserName" @bind-Value="_user.UserName"></InputText> </label> <label> Last Name: <InputText id="LastName" @bind-Value="_user.LastName"></InputText> </label> <label> Email: <InputText id="Email" @bind-Value="_user.Email"></InputText> </label> <label> Gender: <InputSelect id="Gender" @bind-Value="_user.Gender"> <option value="">Select Gender</option> <option value="1">Male</option> <option value="2">Female</option> </InputSelect> </label> <label> Age: <InputNumber id="Age" @bind-Value="_user.Age"></InputNumber> </label> <button class="btn btn-primary" type="submit">Submit</button> </EditForm> @code { private User _user = new User(); private string _formResult = ""; private void HandleValidSubmit() { _formResult = $"{_user.UserName}, {_user.LastName} was created"; } }
Немає коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів