Формы и проверка

Подсказка

Это фрагмент из электронной книги для разработчиков ASP NET веб-формы для Azure, Blazor доступных в документации .NET или в виде бесплатного скачиваемого PDF-файла, который можно читать в автономном режиме.

Скачать в формате PDF

Платформа веб-форм ASP.NET включает набор элементов управления сервером проверки, обрабатывающим проверку входных данных пользователя, введенных в форму (RequiredFieldValidator, CompareValidatorи RangeValidatorт. д.). Платформа веб-форм ASP.NET также поддерживает привязку моделей и проверку модели на основе заметок данных ([Required], [StringLength]и [Range]т. д.). Логика проверки может применяться как на сервере, так и на клиенте с помощью ненавязчивой проверки на основе JavaScript. Серверный ValidationSummary элемент управления используется для отображения сводки ошибок проверки пользователю.

Blazor поддерживает совместное использование логики проверки между клиентом и сервером. ASP.NET предоставляет предварительно созданные реализации JavaScript для многих распространенных проверок сервера. Во многих случаях разработчику по-прежнему приходится писать JavaScript, чтобы полностью реализовать логику проверки для конкретного приложения. Одни и те же типы моделей, заметки данных и логика проверки можно использовать как на сервере, так и на клиенте.

Blazor предоставляет набор входных компонентов. Входные компоненты обрабатывают данные поля привязки к модели и проверяют входные данные пользователя при отправке формы.

Компонент ввода	Отрисованный HTML-элемент
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

Компонент EditForm упаковывает эти входные компоненты и управляет процессом проверки с помощью EditContext. При создании экземпляра модели EditForm необходимо указать, к чему следует привязаться, используя параметр Model. Как правило, проверка выполняется с помощью заметок данных, и это расширяемо. Чтобы включить проверку на основе аннотаций данных, добавьте DataAnnotationsValidator компонент в EditForm как дочерний элемент. Компонент EditForm предоставляет удобное событие для обработки допустимых (OnValidSubmit) и недопустимых (OnInvalidSubmit) отправки. Существует также более универсальное OnSubmit событие, которое позволяет активировать и обрабатывать проверку самостоятельно.

Чтобы отобразить сводку ошибки проверки, используйте компонент ValidationSummary. Чтобы отобразить сообщения проверки для определенного поля ввода, используйте ValidationMessage компонент, указав лямбда-выражение для For параметра, указывающего на соответствующий элемент модели.

Следующий тип модели определяет несколько правил проверки с помощью заметок данных:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16,
        ErrorMessage = "Identifier too long (16 character limit).")]
    public string Identifier { get; set; }

    public string Description { get; set; }

    [Required]
    public string Classification { get; set; }

    [Range(1, 100000,
        ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true",
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

Следующий компонент демонстрирует построение формы в Blazor на основе типа модели Starship.

<h1>New Ship Entry Form</h1>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="identifier">Identifier: </label>
        <InputText id="identifier" @bind-Value="starship.Identifier" />
        <ValidationMessage For="() => starship.Identifier" />
    </p>
    <p>
        <label for="description">Description (optional): </label>
        <InputTextArea id="description" @bind-Value="starship.Description" />
    </p>
    <p>
        <label for="classification">Primary Classification: </label>
        <InputSelect id="classification" @bind-Value="starship.Classification">
            <option value="">Select classification ...</option>
            <option value="Exploration">Exploration</option>
            <option value="Diplomacy">Diplomacy</option>
            <option value="Defense">Defense</option>
        </InputSelect>
        <ValidationMessage For="() => starship.Classification" />
    </p>
    <p>
        <label for="accommodation">Maximum Accommodation: </label>
        <InputNumber id="accommodation" @bind-Value="starship.MaximumAccommodation" />
        <ValidationMessage For="() => starship.MaximumAccommodation" />
    </p>
    <p>
        <label for="valid">Engineering Approval: </label>
        <InputCheckbox id="valid" @bind-Value="starship.IsValidatedDesign" />
        <ValidationMessage For="() => starship.IsValidatedDesign" />
    </p>
    <p>
        <label for="productionDate">Production Date: </label>
        <InputDate id="productionDate" @bind-Value="starship.ProductionDate" />
        <ValidationMessage For="() => starship.ProductionDate" />
    </p>

    <button type="submit">Submit</button>
</EditForm>

@code {
    private Starship starship = new Starship();

    private void HandleValidSubmit()
    {
        // Save the data
    }
}

После отправки формы данные, привязанные к модели, не были сохранены в любом хранилище данных, например в базе данных. Blazor WebAssembly В приложении данные должны отправляться на сервер. Например, с помощью HTTP-запроса POST. В серверном Blazor приложении данные уже хранятся на сервере, но их необходимо сохранить. Обработка доступа к данным в Blazor приложениях — это тема раздела "Работа с данными ".

Дополнительные ресурсы

Дополнительные сведения о формах и проверкеBlazor в приложениях см. в Blazor документации.

НазадДалее