Ú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.