Úkol validace dat

1. Zadání

Příklad, jak by mohla stránka vypadat:

2. Grafická nápověda

Třída Kniha

Třída Kniha slouží jako základní datový model čtenářského deníku a přesně definuje strukturu pro uložení informací o jednotlivých titulech. Obsahuje veřejné vlastnosti Nazev a Autor určené pro textové řetězce. Dále jsou definovány celočíselné vlastnosti RokVydani a PocetStran. Tato jasná struktura studentům slouží jako prvotní šablona před implementací samotného kódu v C#.

Logika aplikace

Po kliknutí na tlačítko Uložit do deníku proběhne nejprve automatická kontrola dat na základě pravidel z modelu. Pokud uživatel udělal chybu (např. nevyplnil název), proces se okamžitě zastaví a značky <ValidationMessage> zobrazí varování.

Pokud formulář projde validací bez chyb, spustí se díky události OnValidSubmit metoda UlozitKnihu. V té se odehrají dva kroky: platná data se přidají do kolekce seznamKnih a proměnná pro formulář se vyčistí (přepíše se čistou instancí), aby mohl uživatel rovnou zadávat další knihu.

Jakmile metoda skončí, Blazor automaticky zkontroluje stav rozhraní. Protože v seznamu už je alespoň jedna kniha, splní se podmínka @if (seznamKnih.Count > 0) a na obrazovce se dynamicky vykreslí HTML tabulka s novým záznamem.

3. Řešení úkolu

Třída Kniha

using System.ComponentModel.DataAnnotations;

namespace ValidaceDat.Models
{
    public class Kniha
    {
        [Required(ErrorMessage = "Název knihy musí být vyplněn.")]
        public string Nazev { get; set; } = "";

        [Required(ErrorMessage = "Zadejte jméno autora (minimálně 3 znaky).")]
        [MinLength(3, ErrorMessage = "Zadejte jméno autora (minimálně 3 znaky).")]
        public string Autor { get; set; } = "";

        // Poznámka: Atribut [Range] vyžaduje konstantní hodnoty.
        // Pro zjednodušení v rámci tohoto úkolu používáme pevný horní limit (např. aktuální rok 2026).
        [Range(1440, 2026, ErrorMessage = "Rok vydání musí být reálný letopočet (1440 - současnost).")]
        public int RokVydani { get; set; }

  // Počet stran musí být minimálně 1. Horní limit můžeme nastavit na maximální hodnotu datového typu int.
        [Range(1, int.MaxValue, ErrorMessage = "Kniha musí mít alespoň jednu stranu.")]
        public int PocetStran { get; set; }
    }
}

Třída Kniha definuje datový model pro uložení informací o novém záznamu. Importem jmenného prostoru System.ComponentModel.DataAnnotations získáváme možnost aplikovat na jednotlivé vlastnosti přímočará validační pravidla.

Vlastnosti Nazev a Autor jsou pomocí atributu [Required] označeny jako povinné, takže je uživatel nesmí vynechat. U autora se navíc nachází atribut [MinLength], který hlídá, aby zadaný text obsahoval alespoň tři znaky.

U číselných vlastností RokVydani a PocetStran je použit atribut [Range]. Ten zajišťuje, že uživatel zadá číselnou hodnotu v logickém a předem definovaném rozpětí (např. alespoň 1 stranu). Všechny tyto atributy zároveň obsahují parametr ErrorMessage, ve kterém je připravena chybová hláška. Ta se automaticky propíše do uživatelského rozhraní v případě, že formulářová data poruší dané pravidlo.

Razor komponenta

@page "/"
<PageTitle>Přidat knihu</PageTitle>

<div class="card shadow-sm p-4 mb-4" style="max-width: 600px;">
    <h2 class="mb-4">Přidat novou knihu do deníku</h2>

    <EditForm Model="novaKniha" OnValidSubmit="UlozitKnihu">
        <DataAnnotationsValidator />

        <div class="mb-3">
            <label class="form-label">Název knihy:</label>
            <InputText @bind-Value="novaKniha.Nazev" class="form-control" />
            <ValidationMessage For="@(() => novaKniha.Nazev)" class="text-danger" />
        </div>

        <div class="mb-3">
            <label class="form-label">Autor:</label>
            <InputText @bind-Value="novaKniha.Autor" class="form-control" />
            <ValidationMessage For="@(() => novaKniha.Autor)" class="text-danger" />
        </div>

        <div class="mb-3">
            <label class="form-label">Rok vydání:</label>
            <InputNumber @bind-Value="novaKniha.RokVydani" class="form-control" />
            <ValidationMessage For="@(() => novaKniha.RokVydani)" class="text-danger" />
        </div>

        <div class="mb-3">
            <label class="form-label">Počet stran:</label>
            <InputNumber @bind-Value="novaKniha.PocetStran" class="form-control" />
            <ValidationMessage For="@(() => novaKniha.PocetStran)" class="text-danger" />
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">Uložit do deníku</button>
        </div>
    </EditForm>
</div>

@if (seznamKnih.Count > 0)
{
    <div class="card shadow-sm p-4" style="max-width: 600px;">
        <h3 class="mb-3">Můj čtenářský deník</h3>
        <table class="table table-striped table-hover">
            <thead class="table-dark">
                <tr>
                    <th>Název</th>
                    <th>Autor</th>
                    <th>Rok</th>
                    <th>Stran</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var kniha in seznamKnih)
                {
                    <tr>
                        <td><strong>@kniha.Nazev</strong></td>
                        <td>@kniha.Autor</td>
                        <td>@kniha.RokVydani</td>
                        <td>@kniha.PocetStran</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}

@code {
    // Vytvoření prázdné instance knihy pro napojení na formulář (předvyplníme aktuální rok)
    private Models.Kniha novaKniha = new Models.Kniha() { RokVydani = 2024 };

    // Lokální seznam, do kterého se budou ukládat platné knihy
    private List<Models.Kniha> seznamKnih = new List<Models.Kniha>();

    // Tato metoda se spustí POUZE tehdy, pokud všechna data projdou validací
    private void UlozitKnihu()
    {
        // 1. Přidáme vyplněnou knihu do našeho seznamu
        seznamKnih.Add(novaKniha);

        // 2. Vyčistíme formulář vytvořením nového, prázdného objektu pro další zadávání
        novaKniha = new Models.Kniha() { RokVydani = 2024 };
    }
}

Základem této stránky je komponenta <EditForm>, která nahrazuje klasický HTML formulář a je napojena přímo na objekt novaKniha. Klíčovým prvkem je událost OnValidSubmit, která zaručuje, že se metoda pro uložení dat spustí pouze v případě, kdy uživatel vyplní formulář zcela bez chyb. Samotné hlídání pravidel definovaných v modelu aktivuje nenápadná, ale nezbytná značka <DataAnnotationsValidator />.

Jednotlivá vstupní pole využívají speciální Blazor prvky (jako <InputText> nebo <InputNumber>), které jsou obousměrně svázány s daty pomocí @bind-Value. Pod každým z nich je umístěna značka <ValidationMessage>. Právě zde se automaticky vykreslí červená chybová hláška z modelu, pokud zadaná data nesplní naše kritéria.

V sekci @code se nachází logika stránky. Pokud validace proběhne úspěšně, zavolá se metoda UlozitKnihu. Ta přidá aktuálně vyplněnou knihu do připravené kolekce seznamKnih a ihned formulář "vyčistí" tím, že do proměnné vloží úplně novou, prázdnou instanci. Jakmile je v seznamu alespoň jeden záznam, díky podmínce @if (seznamKnih.Count > 0) se na obrazovce automaticky vykreslí i HTML tabulka s přehledem přečtených knih.