Formulir dan validasi

Kerangka kerja ASP.NET Web Forms menyertakan sekumpulan kontrol server validasi yang menangani validasi input pengguna yang dimasukkan ke dalam formulir (RequiredFieldValidator, CompareValidator, RangeValidator, dan sebagainya). Kerangka kerja ASP.NET Web Forms juga mendukung pengikatan model dan memvalidasi model berdasarkan anotasi data ([Required], , [StringLength][Range], dan sebagainya). Logika validasi dapat diberlakukan baik di server maupun pada klien menggunakan validasi berbasis JavaScript yang tidak mengganggu. ValidationSummary Kontrol server digunakan untuk menampilkan ringkasan kesalahan validasi kepada pengguna.

Blazor mendukung berbagi logika validasi antara klien dan server. ASP.NET menyediakan implementasi JavaScript bawaan dari banyak validasi server umum. Dalam banyak kasus, pengembang masih harus menulis JavaScript untuk sepenuhnya menerapkan logika validasi khusus aplikasi mereka. Jenis model, anotasi data, dan logika validasi yang sama dapat digunakan di server dan klien.

Blazor menyediakan sekumpulan komponen input. Komponen input menghubungkan data bidang ke model dan memvalidasi masukan pengguna ketika formulir disubmit.

Komponen EditForm membungkus komponen input ini dan mengatur proses validasi melalui EditContext. Saat membuat EditForm, Anda menentukan instans model apa yang akan diikat menggunakan Model parameter . Validasi biasanya dilakukan menggunakan anotasi data, dan dapat diperluas. Untuk mengaktifkan validasi berbasis anotasi data, tambahkan DataAnnotationsValidator komponen sebagai anak dari EditForm. Komponen EditForm ini menyediakan fungsi yang praktis untuk mengatasi pengiriman yang valid (OnValidSubmit) dan tidak valid (OnInvalidSubmit). Ada juga peristiwa generik OnSubmit yang memungkinkan Anda untuk memicu dan menangani validasi secara mandiri.

Untuk menampilkan ringkasan kesalahan validasi, gunakan ValidationSummary komponen . Untuk menampilkan pesan validasi untuk bidang input tertentu, gunakan ValidationMessage komponen , menentukan ekspresi lambda untuk For parameter yang menunjuk ke anggota model yang sesuai.

Jenis model berikut menentukan beberapa aturan validasi menggunakan anotasi data:

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; }
}

Komponen berikut menunjukkan cara membuat formulir di Blazor berdasarkan jenis model 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
    }
}

Setelah pengiriman formulir, data yang terikat model belum disimpan ke penyimpanan data apa pun, seperti database. Dalam aplikasi Blazor WebAssembly , data harus dikirim ke server. Misalnya, menggunakan permintaan HTTP POST. Blazor Di aplikasi Server, data sudah ada di server, tetapi harus dipertahankan. Menangani akses data di Blazor aplikasi adalah subjek bagian Menangani data .

Sumber daya tambahan

Untuk informasi selengkapnya tentang formulir dan validasi di Blazor aplikasi, lihat Blazor dokumentasi.