Úkol JSON

1. Zadání

Co je cílem zadání?

  • Vytvoření datové třídy Film, jejíž vlastnosti svým názvem přesně odpovídají struktuře a klíčům v externím JSON souboru.
  • Asynchronní načtení dat z lokálního souboru pomocí HTTP klienta a jejich automatické namapování do pole objektů ihned při startu komponenty.
  • Dynamické vykreslení úspěšně načtené kolekce filmů do přehledné HTML tabulky pomocí cyklu.

Zadání

Nejprve definujte C# třídu Film, která bude sloužit jako datová šablona (s vlastnostmi Id, Nazev, RokVydani a Reziser). Následně ve veřejné složce wwwroot vytvořte podsložku data a umístěte do ní soubor filmy.json, který bude obsahovat pole alespoň 30 vašich oblíbených filmů ve formátu JSON.

V Razor komponentě si pomocí direktivy @inject připojte systémovou službu HttpClient. Pro automatické načtení dat využijte vestavěnou metodu životního cyklu OnInitializedAsync(), uvnitř které pomocí příkazu await Http.GetFromJsonAsync() stáhnete váš lokální soubor a rovnou ho převedete do pole připravených C# objektů.

Získané informace následně projděte cyklem @foreach a přehledně je vypište do HTML tabulky. Nezapomeňte v uživatelském rozhraní elegantně ošetřit také stav, kdy se data teprve stahují do paměti, například dočasným zobrazením textu „Načítám...“.

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

Pokud se okno nenačetlo, klikněte zde.