Űrlapok és ellenőrzés

Jótanács

Ez a tartalom egy részlet az eBookból, Blazor az Azure-hoz készült ASP NET Web Forms Developers számára, amely elérhető a .NET Docs-on vagy egy ingyenesen letölthető PDF-fájlként, amely offline is olvasható.

PDF letöltése

Az ASP.NET webes űrlapok keretrendszere egy sor érvényesítési kiszolgálóvezérlőt tartalmaz, amelyek kezelik az űrlapba bevitt felhasználói bemenetek érvényesítését (RequiredFieldValidator, CompareValidator, RangeValidator stb.). Az ASP.NET Web Forms keretrendszer támogatja a modell összeillesztését és a modell érvényesítését adatmegjelölések ([Required], [StringLength], [Range] stb.) alapján. Az érvényesítési logikát érvényesíthetjük úgy a szerveren, mint a klienseken, láthatatlan JavaScript-alapú ellenőrzés használatával. A ValidationSummary kiszolgálóvezérlő az érvényesítési hibák összegzésének megjelenítésére szolgál a felhasználó számára.

Blazor támogatja az érvényesítési logika megosztását az ügyfél és a kiszolgáló között. ASP.NET számos gyakori kiszolgálóérvényesítés előre elkészített JavaScript-implementációit biztosítja. Sok esetben a fejlesztőnek továbbra is JavaScriptet kell írnia az alkalmazásspecifikus érvényesítési logikájuk teljes körű implementálásához. Ugyanazokat a modelltípusokat, adatjegyzeteket és érvényesítési logikát használhatja a kiszolgálón és az ügyfélen is.

Blazor bemeneti összetevők készletét biztosítja. A bemeneti összetevők kezelik a modellhez kötött mezőadatokat, és ellenőrzik a felhasználói bemenetet az űrlap elküldésekor.

Bemeneti összetevő	Renderelt HTML-elem
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

A EditForm komponens körülveszi ezeket a bemeneti komponenseket, és vezényli a validációs folyamatot egy EditContext segítségével. Amikor létrehoz egy EditFormmodellt, meg kell adnia, hogy melyik modellpéldányhoz kell kapcsolódnia a Model paraméter használatával. Az érvényesítés általában adatjegyzetekkel történik, és bővíthető. Az adatjegyzetalapú érvényesítés engedélyezéséhez adja hozzá a DataAnnotationsValidator komponenst a EditForm elem gyermekeként. Az EditForm összetevő kényelmes eseményt biztosít az érvényes (OnValidSubmit) és érvénytelen (OnInvalidSubmit) beküldések kezeléséhez. Van egy általánosabb OnSubmit esemény is, amely lehetővé teszi, hogy saját maga indítsa és kezelje az ellenőrzést.

Az érvényesítési hiba összegzésének megjelenítéséhez használja az összetevőt ValidationSummary . Egy adott bemeneti mező érvényesítési üzeneteinek megjelenítéséhez használja az ValidationMessage összetevőt, és adjon meg egy lambda kifejezést a For paraméterhez, amely a megfelelő modelltagra mutat.

Az alábbi modelltípus adatjegyzetek használatával több érvényesítési szabályt határoz meg:

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

Az alábbi összetevő bemutatja, hogyan lehet egy űrlapot létrehozni Blazor a Starship modell típusa alapján.

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

Az űrlap elküldése után a modellhez kötött adatok nem lettek mentve egyetlen adattárba sem, például egy adatbázisba. Blazor WebAssembly Egy alkalmazásban az adatokat el kell küldeni a kiszolgálónak. Például HTTP POST-kéréssel. Blazor Egy kiszolgálóalkalmazásban az adatok már a kiszolgálón találhatóak, de meg kell őrizni. Az alkalmazásokban az Blazor adathozzáférés kezelése az Adatok kezelése szakasz tárgya.

További erőforrások

Az űrlapokkal és az alkalmazásokban való Blazor ellenőrzéssel kapcsolatos további információkért tekintse meg a dokumentációt Blazor .

ElőzőKövetkező