Jak Blazor funguje
Blazor nabízí mnoho funkcí, které vám pomůžou začít a rychle doručovat další projekt webové aplikace. Pojďme se podívat na základní funkce Blazoru, abychom vám pomohli rozhodnout se, jestli byste měli Blazor použít pro svou další skvělou webovou aplikaci.
Součásti Blazoru
Aplikace Blazor jsou vytvořené ze součástí. Komponenta Blazor je opakovaně použitelná část webového uživatelského rozhraní. Komponenta Blazor zapouzdřuje logiku vykreslování i zpracování událostí uživatelského rozhraní. Blazor obsahuje různé integrované komponenty pro zpracování formulářů, ověřování vstupu uživatele, zobrazení velkých datových sad, ověřování a autorizaci. Vývojáři můžou také vytvářet a sdílet vlastní komponenty a mnoho předem připravených komponent Blazor jsou k dispozici v ekosystému Blazor.
Použití standardních webových technologií
Komponenty Blazor vytvoříte pomocí syntaxe Razor, pohodlné kombinace HTML, CSS a C#. Soubor Razor obsahuje prostý kód HTML a pak jazyk C# k definování jakékoli logiky vykreslování, například pro podmíněné, tok řízení a vyhodnocení výrazu. Soubory Razor se pak kompilují do tříd jazyka C#, které zapouzdřují logiku vykreslování komponenty. Vzhledem k tomu, že komponenty Blazor vytvořené v Razoru jsou pouze třídy jazyka C#, můžete z komponent volat libovolný kód .NET.
Zpracování událostí uživatelského rozhraní a datová vazba
Interaktivní komponenty Blazor můžou zpracovávat standardní interakce s webovým uživatelským rozhraním pomocí obslužných rutin událostí jazyka C#. Komponenty mohou aktualizovat stav v reakci na události uživatelského rozhraní a odpovídajícím způsobem upravit jejich vykreslování. Blazor také zahrnuje podporu obousměrné datové vazby na prvky uživatelského rozhraní jako způsob synchronizace stavu součástí s prvky uživatelského rozhraní.
Následující příklad je jednoduchá komponenta čítače Blazor implementovaná v Razoru. Většina obsahu je HTML, zatímco @code blok obsahuje C#. Při každém stisknutí IncrementCount tlačítka se vyvolá metoda jazyka C#, která pole zvýší currentCount a pak komponenta vykreslí aktualizovanou hodnotu:
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Vykreslování na straně serveru a klienta
Blazor podporuje vykreslování komponent na straně serveru i klienta pro zpracování různých architektur webového uživatelského rozhraní. Komponenty vykreslené ze serveru mají přístup k prostředkům serveru, jako jsou databáze a back-endové služby. Ve výchozím nastavení se komponenty Blazor vykreslují staticky ze serveru a generují kód HTML v reakci na požadavky.
Součásti serveru můžete také nakonfigurovat tak, aby byly interaktivní, aby mohly zpracovávat libovolné události uživatelského rozhraní, udržovat stav napříč interakcemi a dynamicky vykreslovat aktualizace. Interaktivní součásti serveru zpracovávají interakce uživatelského rozhraní a aktualizace prostřednictvím připojení WebSocket s prohlížečem.
Alternativně je možné komponenty Blazor vygenerovat interaktivně z klienta. Komponenta se stáhne do klienta a spustí se z prohlížeče přes WebAssembly. Interaktivní komponenty WebAssembly mají přístup k klientským prostředkům prostřednictvím webové platformy, jako je místní úložiště a hardware, a mohou dokonce po stažení fungovat offline.
Můžete se rozhodnout vykreslit různé komponenty ze serveru nebo klienta ve stejné aplikaci. Mnoho stránek v aplikaci nemusí vůbec vyžadovat žádnou interaktivitu a může se vykreslit staticky ze serveru. Zatímco jiné interaktivnější části aplikace je možné zpracovat ze serveru nebo klienta. Můžete se rozhodnout, který režim vykreslování komponent se má použít v době návrhu nebo za běhu. S Blazorem můžete flexibilně vytvářet architekturu webové aplikace, která je pro váš scénář nejvhodnější.
Použití Blazoru k vytvoření pizzerie
Uživatelské rozhraní aplikace pro pizzerii rozdělí do mnoha opakovaně použitelných komponent: rozložení stránky s navigačním panelem, jednotlivými stránkami, katalogem pizzy a editorem, komponentou objednávky atd. Blazor poskytuje podporu sestavení pro mnoho z těchto komponent, jako jsou komponenty pro formuláře a ověřování. Mnoho stránek v aplikaci je možné zpracovat ze serveru pomocí statického vykreslování na straně serveru, aby byl web většinou bezstavový a připravený ke škálování. Pokud je potřeba více interaktivity, jsou komponenty interaktivní použitím interaktivního režimu vykreslování. Pokud chcete práci ze serveru přesměrovat, interaktivní komponenty se v klientovi vykreslují přes WebAssembly. Když vytvoříte celou aplikaci s jedním zásobníkem vývoje webu, aplikace se rychle spojí a brzy se doručí objednávky pizzy.