1. diel - Blazor - .NET Core SPA s C # .NET aj na strane klienta

Posledných niekoľko rokov sa venujem vývoji .NET webových aplikácií s architektúrou MVC a pozerám sa po nejakých novších technológiách. Áno, .NET nahrádza .NET Core a EF zase EF Core, ale priznám sa, že z môjho pohľadu sa zas toľko nezmenilo a vývoj vyzerá vcelku podobne.

Veľa klientov si želá také tie "rýchlejšie" stránky, kde s každým kliknutím nemusíte přenačítat celý obsah a na to nie je MVC úplne stavané. Máme možnosť vrhnúť sa do písania JavaScriptov na klientovi a používať AJAX alebo začať písať klienta s pomocou Angular, Vue či podobných JS nadstavieb. V každom prípade musíme objavovať svet odlišný od .net. Nie, že by na tom bolo niečo zlé. Hovorí sa "koľko jazykov vieš, toľkokrát si programátorom". Ale stojí to veľa času a nie každý ho má:)

Blazor

Keď Microsoft prišiel s frameworkom Blazor, povedal som si, že to by mohla byť presne tá cesta, ktorú hľadám. Umožňuje totiž:

interaktívne užívateľské rozhranie pomocou jazyka C# namiesto JavaScriptu
zdieľanie logiky aplikácie na strane servera a klienta napísané v .NET
využitie existujúcich .NET knižníc

Vytvorenie novej aplikácie

Vo Visual Studio zvoľme Create a new project a šablónu Blazor App. Po tradičnom zadaní názvu projektu dostaneme na ďalšej stránke sprievodca na výber medzi variantmi Blazor Server App a Blazor WebAssembly App.

Blazor WebAssembly App chápem ako plnohodnotnú SPA (aplikácia beží priamo na klientovi), zatiaľ čo prvá varianta beží na serveri a správanie SPA simuluje s pomocou technológie SignalR. Z toho môžu vyplynúť aj výhody / nevýhody každej z variantov. Zatiaľ čo u serverového typu Blazoru by malo byť rýchlejšie počiatočné načítanie aplikácie, jednotlivé akcie v aplikácii môžu mať o niečo pomalší odozvu z dôvodu nutnosti neustálej komunikácie so serverom. U WebAssembly by to malo byť presne naopak - dlhší načítanie aplikácie, ale rýchlejší odozvy. Navyše musí prehliadač užívateľa podporovať technológiu WebAssembly.

Spustení aplikácie

Ja zvolím pre začiatok Server App, pretože táto technológia bola oficiálne vydaná prvá. Šablóna programu už obsahuje tri jednoduché stránky ako príklady použitia, takže ju skúsme hneď spustiť a uvidíme funkčnú aplikáciu so stránkami:

Home - jednoduchá stránka s komponentom, ale bez vlastného kódu
Counter - stránka zobrazujúci obsah premennej a možnosťou zvýšenia hodnoty premennej kliknutím na tlačidlo
Fetch dáta - stránka zobrazujúci dáta získané zo služby inicializované s pomocou Dependency Injection

Štruktúra aplikácie

Štruktúra šablóny aplikácie je pomerne jednoduchá. V Solution Exploreri nájdeme nasledovné zložky:

wwwroot/ - obsahuje súbory s kaskádovými štýlmi a JavaScript
Data/ - obsahuje model a servisu pre zobrazované dáta na poslednej stránke (vo väčších aplikáciách možno budú tieto súbory v iných vrstvách - dátové resp. Business, v menších aplikáciách by som ich rovnako minimálne oddelil do nových zložiek, napr. Model/ a Service/)
Pages/ - pre jednotlivé stránky výslednej aplikácie
Shared/ - pre komponenty, ktoré môžeme naprieč stránkami zdieľať

Okrem toho v roote aplikácie nájdeme súbory ako Startup.cs, Program.cs a appsettings.json, ktoré už by ste mali poznať z predchádzajúcich typov .NET Core aplikácií. Ak ich nepoznáte, na ITnetworku sa o nich určite dočítate v iných kurzoch, takže to tu nebudeme opakovať. Zaujímavým pre nás bude súbor _Imports.razor, kam si budeme pridávať ďalšie menné priestory, ktoré budeme chcieť v aplikácii využívať.

Základ celej aplikácie nájdeme v súbore _Host.cshtml, čo je vlastne webová stránka. V nej je odkaz na súbor App.razor, kde sa zabezpečuje routovanie. Ani jeden z týchto súborov zatiaľ nebudeme upravovať. V súbore App.razor je ako predvolený layout definovaná komponenta MainLayout.razor a v nej už vidíme vzhľad našej aplikácie - menu s pomocou komponenty NavMenu.razor, horný riadok s odkazom a časť pre telo aplikácie (<body>).

Prvý úpravy

Hello world! už v šablóne máme, tak musíme vymyslieť niečo sofistikovanejšieho. Pre prvé zoznámenie s frameworkom Blazor som teda zvolil jednoduchý príklad - zoznam úloh. Každá úloha bude samostatnou zložkou, začnime teda vytvorením nové komponenty TodoItem.

Pravým tlačidlom myši nad zložkou Shared/ (pretože komponenty sú opakovane použiteľné a patrí práve tam) vyvoláme kontextové menu a zvolíme Add -> New item ... -> Razor component alebo priamo Add -> Razor component (ak máte ako ja v ponuke). Komponent pomenujeme TodoItem.

Každý komponent má časť s HTML kódom a časť sa C# kódom, ktoré sú od seba oddelené (vlastne sa môžu nachádzať aj v rôznych súboroch). Naša nová komponenta bude obsahovať text úlohy a informáciu, či je úloha splnená alebo nie. Jej obsah bude nasledujúce:

<div>

    <input type="checkbox" />
    Naučit se Blazor na ITnetwork
</div>

Prvá verzia komponenty žiadny C# kód neobsahuje, takže časť @code môžeme odstrániť úplne. Samozrejme táto komponenta nevie zatiaľ nič než zobraziť príslušný HTML kód. Čo si hneď overíme. V súbore Index.razor nahradíme existujúci obsah (okrem prvého riadku) zavolaním našej nové komponenty:

<TodoItem/>

Aplikáciu spustíme, výsledok by mal vyzerať nejako takto:

Druhá verzia - Parametre

Aby bola komponenta znovupoužiteľná, musí byť samozrejme "múdrejší". Pridáme si teda do našej komponenty dva parametre, konkrétne:

zobrazovaný text a
údaj, či je úloha splnený alebo nie.

Príslušne tomu musíme samozrejme tiež upraviť aktuálne HTML kód:

<div>

    <input type="checkbox" checked="@Done"/>
    <span>@Text</span>
</div>


@code{
    [Parameter]
    public string Text { get; set; } = "Naučit se Blazor na ITnetwork";
    [Parameter]
    public bool Done { get; set; } = false;
}

Je dobré nastavovať parametrom predvolené hodnoty, pretože naplnenie parametrov pri použití komponenty nie je povinné.

Teraz už môžeme úpravou súboru Index.razor zobraziť viac rozdielnych položiek nášho zoznamu úloh napríklad takto:

<TodoItem/>
<TodoItem Text="Vytvořit vlastní Blazor aplikaci" />
<TodoItem Text="Pochopit práci s parametry komponenty" Done="true"/>

Tretia verzia - Štýl

V poslednej dnešnej verzii komponenty si pridáme nový štýl pre splnené úlohy. Takéto úlohy budeme zobrazovať preškrtnutým písmom. Do komponenty pridáme textovú premennú textStyle, ktorej hodnota sa bude odvodzovať od hodnoty vlastnosti Done a bude ovplyvňovať štýl zobrazeného textu:

<div>

    <input type="checkbox" checked="@Done"/>
    <span class="@textStyle">@Text</span>
</div>


@code{
    [Parameter]
    public string Text { get; set; } = "Naučit se Blazor na ITnetwork";
    [Parameter]
    public bool Done { get; set; } = false;

    string textStyle => Done ? "done" : "";
}

A samozrejme do súboru site.css musíme pridať definíciu nového štýlu:

.done {
    text-decoration:line-through;
}

Po spustení aplikácie vyzerá všetko v poriadku, ale po kliknutí na ľubovoľný z úloh zistíme, že sa nový štýl na text neuplatňuje. Dôvod je v jednosmernom Binding našej vlastnosti Done na komponent. V takýchto prípadoch sa pri renderovaní komponenty použije hodnota premennej, ale zmena stavu komponenty na stránke sa už neprenesie späť do premennej. Preto musíme zmeniť binding na obojsmerný:

...
<input type="checkbox" @bind="Done"/>
...

Teraz si môžeme vyskúšať, že sa štýl textu sa zaškrtnutím komponenty naozaj zmení. No nie je to krásne bez kúska JavaScriptu?:-)

To je pre dnešok všetko. Pokiaľ bude o tento článok záujem a v komentároch sa objaví konštruktívna kritika, pokúsim sa pokračovať ďalšie lekcií:-)

Prajem veľa programátorských úspechov!

V ďalšej lekcii, Blazor - Rozšírenie Todo aplikácie v .NET Core SPA , budeme v našej Todo aplikácii pokračovať a ukážeme si, ako správne reagovať na udalosti.

Článok pre vás napísal JOF

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Aktivity

Najčastejšie vyhľadávané

1. diel - Blazor - .NET Core SPA s C # .NET aj na strane klienta

Blazor

Vytvorenie novej aplikácie

Spustení aplikácie

Štruktúra aplikácie

Prvý úpravy

Druhá verzia - Parametre

Tretia verzia - Štýl