Úkol JSON

4. Řešení úkolu

Třída Film

using System.Text.Json.Serialization;

namespace JSON_Filmy.Models
{
    public class Film
    {
        // Vlastnosti dodržují C# konvence a jsou namapovány na JSON klíče
        [JsonPropertyName("id")]
        public int Id { get; set; }

        [JsonPropertyName("nazev")]
        public string Nazev { get; set; }

        [JsonPropertyName("rokVydani")]
        public int RokVydani { get; set; }

        [JsonPropertyName("reziser")]
        public string Reziser { get; set; }
    }
}

V třídě Film definujeme základní datovou strukturu pro uchování informací o konkrétním snímku. Pro zajištění správné automatické deserializace z formátu JSON, při současném dodržení standardních jmenných konvencí jazyka C# je využit atribut [JsonPropertyName]. Tento atribut explicitně mapuje vlastnosti třídy v kódu na odpovídající textové klíče ve zdrojovém JSON souboru, které často začínají malým písmenem.

Razor komponenta

@page "/"
@inject HttpClient Http

<PageTitle>Moje filmy</PageTitle>

<h1>Seznam oblíbených filmů</h1>

@if (seznamFilmu == null)
{
    <p><em>Načítám data z JSON souboru...</em></p>
}
@else
{
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Název filmu</th>
                <th>Rok vydání</th>
                <th>Režisér</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var film in seznamFilmu)
            {
                <tr>
                    <td><strong>@film.Nazev</strong></td>
                    <td>@film.RokVydani</td>
                    <td>@film.Reziser</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    // Proměnná pro uložení načtených dat (pole filmů)
    private Models.Film[]? seznamFilmu;

    // Tato metoda se spustí automaticky při načtení stránky
    protected override async Task OnInitializedAsync()
    {
        // Cesta ukazuje do složky wwwroot/data
        seznamFilmu = await Http.GetFromJsonAsync<Models.Film[]>("data/filmy.json");
    }
}

Direktivou @inject vkládáme systémovou službu HttpClient, která komponentě zprostředkovává asynchronní síťovou komunikaci. V bloku @code deklarujeme privátní proměnnou seznamFilmu jako nullable pole (?), do kterého se v rámci životního cyklu komponenty přes přetíženou asynchronní metodu OnInitializedAsync nahrají data. Metoda GetFromJsonAsync<Models.Film[]> v jediném kroku stáhne textový soubor ze složky wwwroot a automaticky jej deserializuje do pole objektů. Uživatelské rozhraní následně reaguje pomocí podmínky @if – dokud je proměnná null (data se ještě stahují). Teprve po dokončení operace await se UI plynule přepne do větve else, kde pomocí cyklu @foreach vygeneruje pro každý jednotlivý objekt Film odpovídající řádek tabulky.