Sdílet prostřednictvím

Základy architektury ASP.NET Core Blazor

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Varování

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Základní články obsahují pokyny k základním Blazor konceptům. Některé koncepty jsou propojeny se základními znalostmi Razor komponent, které jsou popsány dále v další části tohoto článku a podrobně popsány v článcích o komponentách .

Koncepty statického a interaktivního vykreslování

Razor komponenty jsou buď staticky vykreslené, nebo interaktivně vykreslené.

Statické nebo statické vykreslování je scénář na straně serveru, který znamená, že se komponenta vykresluje bez kapacity pro interplay mezi uživatelem a kódem .NET/C#. Události JavaScriptu a HTML DOM zůstávají nedotčeny, ale žádné uživatelské události na klientovi nelze zpracovat, pokud je .NET spuštěn na serveru.

Interaktivní/interaktivita nebo interaktivní vykreslování znamená, že komponenta má kapacitu pro zpracování událostí a vazeb .NET prostřednictvím kódu jazyka C#. Události a vazby rozhraní .NET se zpracovávají na serveru modulem runtime ASP.NET Core nebo v prohlížeči v klientovi pomocí modulu runtime Blazor založeného na WebAssembly.

Důležité

Při použití Blazor Web App, většina ukázkových Blazor komponent dokumentace vyžaduje interaktivitu k fungování a předvedení konceptů popsaných v článcích. Při testování ukázkové komponenty poskytované článkem v Blazor Web Appse ujistěte, že aplikace přijímá globální interaktivitu nebo komponenta přijímá interaktivní režim vykreslování. Další informace o tomto tématu poskytují režimy vykreslování ASP.NET Core Blazor v části Komponenty, které se zobrazí dále v Blazor sadě dokumentace.

Další informace o těchto konceptech a o tom, jak řídit statické a interaktivní vykreslování, najdete v článku o režimech vykreslování ASP.NET Core Blazor dále v Blazor dokumentaci.

Koncepty vykreslování klientů a serverů

V rámci Blazor dokumentace se říká, že aktivita, která probíhá v systému uživatele, probíhá na straně klienta nebo klienta. Aktivita, která probíhá na serveru, se říká, že na serveru nebo na straně serveru.

Termín vykreslování znamená tvorbu kódu HTML, který prohlížeče zobrazují.

  • Vykreslování na straně klienta (CSR) znamená, že poslední kód HTML je generován modulem runtime .NET WebAssembly v klientovi. Pro tento typ vykreslování se z serveru do klienta neposílají žádné kódy HTML pro uživatelské rozhraní vygenerované klientem aplikace. Předpokládá se interaktivita uživatele se stránkou. Neexistuje žádný koncept pro statické vykreslování na straně klienta. Předpokládá se, že csr je interaktivní, takže "interaktivní vykreslování na straně klienta" a "interaktivní CSR" nejsou používány odvětvím ani v Blazor dokumentaci.

  • Vykreslování na straně serveru (SSR) znamená, že poslední kód HTML je generován modulem runtime ASP.NET Core na serveru. Kód HTML se odešle klientovi přes síť pro zobrazení prohlížečem klienta. Klient pro tento typ vykreslování nevytvořil žádný kód HTML pro uživatelské rozhraní vygenerované serverem aplikace. SSR může mít dvě varianty:

    • Statická služba SSR: Server vytváří statický kód HTML, který neposkytuje interaktivitu uživatelů ani udržování Razor stavu součástí.
    • Interaktivní SSR: Blazor Události umožňují uživatelskou interaktivitu a Razor stav komponent je udržován Blazor rámcem.

  • Předběžné vykreslování je proces počátečního vykreslování obsahu stránky na serveru bez povolení obslužných rutin událostí pro vykreslované ovládací prvky. Server vypíše uživatelské rozhraní HTML stránky co nejdříve v reakci na počáteční požadavek, což aplikaci umožní reagovat na uživatele. Prerendering může také zlepšit optimalizaci vyhledávače (SEO) vykreslením obsahu pro počáteční odpověď HTTP, kterou vyhledávací weby používají k výpočtu pořadí stránek. Po předběžném vykreslování vždy následuje konečné vykreslování, a to buď na serveru, nebo na klientovi.

Komponenty Razor

Blazor aplikace jsou založené na Razor komponentách, často označovaných jako jen komponenty. Komponenta je prvek uživatelského rozhraní, například stránka, dialogové okno nebo formulář pro zadávání dat. Komponenty jsou třídy jazyka C# .NET integrované do sestavení .NET.

Razor označuje způsob, jakým se komponenty obvykle píší – ve formě stránky kódu Razor v případě logiky a kompozice uživatelského rozhraní na straně klienta. Razor je syntaxe pro kombinování jazyka značek HTML s kódem jazyka C#, která zvyšuje produktivitu vývojářů. Soubory Razor mají příponu .razor.

Přestože někteří vývojáři a některé online zdroje informací o architektuře Blazor používají termín „komponenty Blazor“, v dokumentaci se tento termín nepoužívá, a místo toho se univerzálně používá termín „komponenty Razor“ nebo „komponenty“.

Dokumentace k architektuře Blazor se v ukázkách a popisu komponent řídí několika konvencemi:

  • Obecně platí, že se v příkladech dodržují konvence psaní kódu ASP.NET Core nebo jazyka C# a související technické pokyny. Další informace najdete v následujících zdrojích informací:
  • Kód projektů, cesty k souborům, názvy souborů, názvy šablon projektů a další odborné termíny jsou v americké angličtině a obvykle ohraničené značkou code.
  • Komponenty se obvykle označují slovem „komponenta“ a názvem třídy jazyka C# (v notaci PascalCase). Například typická komponenta pro nahrávání souborů se označuje jako „komponenta FileUpload“.
  • Název třídy jazyka C# komponenty je obvykle stejný jako název souboru komponenty.
  • Směrovatelné komponenty mají obvykle relativní adresu URL podle názvu třídy komponenty v notaci kebab-case. Například komponenta FileUpload obsahuje konfiguraci směrování zpřístupňující vykreslenou komponentu na relativní adrese URL /file-upload. Směrování a navigace jsou popsané v ASP.NET Core Blazor směrování a navigace.
  • Pokud se používá několik verzí komponenty, jsou tyto verze číslované. Například na komponentu FileUpload3 je dosaženo /file-upload-3.
  • Razor direktivy v horní části definice komponenty (.razor file) jsou umístěny v následujícím pořadí: @page, @rendermode (.NET 8 nebo novější), @using příkazy, další direktivy v abecedním pořadí.
  • I když nejsou pro private členy povinné, modifikátory přístupu se používají v příkladech článku a ukázkových aplikacích. Například se používá private pro deklaraci pole s názvem maxAllowedFiles jako private int maxAllowedFiles = 3;.
  • Hodnoty parametrů komponenty začínají vyhrazeným symbolem, ale není to povinné. Literály (například logické hodnoty), klíčová slova (například this) a null jako hodnoty parametrů komponent nejsou předponou @, ale jde o pouze konvenci dokumentace. Pokud chcete, váš kód může před literály přidat předponu @.
  • Třídy v jazyce C# používají klíčové slovo a vyhýbají se používání podtržítka () jako předpony u polí, které jsou inicializovány v konstruktorech, což se liší od směrnic pro navrhování frameworku ASP.NET Core .
  • V příkladech, které používají primární konstruktory (C# 12 nebo novější) jsou parametry primárního konstruktoru obvykle používány přímo členy třídy. V příkladech článku jsou řádky kódu rozdělené tak, aby se omezilo vodorovné posouvání. Tyto chyby nemají vliv na provádění, ale při vkládání do projektu je možné je odebrat.

Další informace o Razor syntaxi komponent najdete v Razor části syntaxekomponent ASP.NET CoreRazor.

Následuje příklad komponenty čítače, která je součástí aplikace vytvořené z šablony projektu Blazor. Podrobné informace o součástech najdete v článcích o komponentách dále v dokumentaci. Následující příklad ukazuje koncepty komponent, které jsou vidět v článcích Základy před tím, než se dostanete k článkům komponenty později v dokumentaci.

Counter.razor:

Komponenta předpokládá, že interaktivní režim vykreslování je zděděný z nadřazené komponenty nebo globálně použit v aplikaci.

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
}

Komponenta předpokládá, že interaktivní režim vykreslování je zděděný z nadřazené komponenty nebo globálně použit v aplikaci.

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
    }
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Výše uvedená komponenta Counter:

  • Na prvním řádku nastaví svou trasu pomocí direktivy @page.
  • Nastaví svůj název stránky a nadpis.
  • Vykreslí aktuální počet pomocí direktivy @currentCount. currentCount je celočíselná proměnná definovaná v kódu jazyka C# bloku @code.
  • Zobrazí tlačítko pro aktivaci metody IncrementCount, která se také nachází v bloku @code a zvýší hodnotu proměnné currentCount.

Režimy vykreslování

Články v uzlu Základy odkazují na koncept režimů vykreslování. Toto téma je podrobně popsáno v článku režimy vykreslování ASP.NET Core Blazor v uzlu Komponenty, který se zobrazí za uzlem Základy článků.

Pro počáteční odkazy v tomto uzlu článků týkajících se konceptů režimu vykreslování si v tuto chvíli pouze zaznamenejte následující:

Každá komponenta Blazor Web App přijímá režim vykreslování, aby určila model hostování, který používá, kde se vykresluje a zda se vykresluje staticky na serveru, pro interaktivitu uživatele na serveru nebo pro interaktivitu uživatele na klientu (obvykle s předběžným vykreslováním na serveru).

Blazor Server a Blazor WebAssembly aplikace pro verze ASP.NET Core starší než .NET 8 zůstávají zaměřené na koncepty hostitelského modelu, nikoli na režimy vykreslování. Režimy vykreslování jsou koncepčně používány na Blazor Web App v .NET 8 nebo pozdějším.

Následující tabulka uvádí dostupné režimy vykreslování pro komponenty Razor v rámci Blazor Web App. Režimy vykreslování se použijí na komponenty s direktivou @rendermode na instanci komponenty nebo na definici komponenty. Pro celou aplikaci je také možné nastavit režim vykreslování.

Název Popis Umístění vykreslení Interaktivní
Statický server Statické vykreslování na straně serveru (statické SSR) počítačový server
Interaktivní server Interaktivní vykreslování na straně serveru (interaktivní SSR) pomocí Blazor Server počítačový server
Interactive WebAssembly Vykreslování na straně klienta (CSR) pomocí Blazor WebAssembly† Klient
Interaktivní systém Interaktivní SSR s využitím Blazor Server zpočátku, a poté CSR při následných návštěvách po stažení balíčku Blazor Server, pak klient

† Vykreslování na straně klienta (CSR) se předpokládá jako interaktivní. "Interaktivní vykreslování na straně klienta" a "interaktivní CSR" se nepoužívají v oboru ani v Blazor dokumentaci.

Předchozí informace o režimech vykreslování jsou vše, co potřebujete vědět k porozumění článkům o uzlu Základy. Pokud jste nováčkem v Blazor a čtete Blazor články postupně podle obsahu, můžete odložit podrobné seznámení s informacemi o režimech vykreslování, dokud nedosáhnete článku o režimech vykreslování ASP.NET Core Blazor v sekci Komponenty.

Model objektu dokumentu (DOM)

Odkazy na model objektu dokumentu používají zkratku DOM.

Další informace naleznete v následujících zdrojích:

Podmnožina rozhraní .NET API pro Blazor WebAssembly aplikace

Seznam vybraných rozhraní API .NET, která jsou podporována v prohlížeči Blazor WebAssembly, není k dispozici. Můžete ale ručně vyhledat seznam rozhraní API .NET s poznámkami [UnsupportedOSPlatform("browser")] a zjistit rozhraní .NET API, která nejsou ve službě WebAssembly podporovaná.

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam Přepnout větve nebo značky . Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Další informace naleznete v následujících zdrojích:

Ukázkové aplikace

Ukázkové aplikace v dokumentaci si můžete prohlédnout a stáhnout:

Blazor Ukázky úložiště GitHub (dotnet/blazor-samples)

Vyhledejte ukázkovou aplikaci tak, že nejprve vyberete složku verze, která odpovídá verzi .NET, se kterou pracujete.

Ukázkové aplikace v úložišti:

Ukázkové aplikace v úložišti:

Ukázkové úložiště obsahuje dva typy ukázek:

  • Aplikace s ukázkovými fragmenty kódu poskytují příklady, které se zobrazují v článcích. Tyto aplikace se kompilují, ale nemusí být nutně spustitelné aplikace. Tyto aplikace jsou užitečné jenom pro získání ukázkového kódu, který se zobrazuje v článcích.
  • Ukázkové aplikace k Blazor článkům zkompilovat a spustit pro následující scénáře:
    • Blazor Server a Blazor WebAssembly se SignalR
    • Protokolování s podporou oborů Blazor WebAssembly

Další informace najdete v seznamu ukázek v úložišti a pokyny ke stažení, viz Blazor soubor README úložiště GitHubu.

Základní testovací aplikace úložiště ASP.NET Core je také užitečná sada ukázek pro různé Blazor scénáře:

BasicTestApp v referenčním zdroji ASP.NET Core (dotnet/aspnetcore)

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam Přepnout větve nebo značky . Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Bajtové násobky

Velikosti bajtů .NET používají předpony metrik pro ne desetinné násobky bajtů na základě mocnin 1024.

Název (zkratka) Velikost Příklad
Kilobajt (KB) 1 024 bajtů 1 kB = 1 024 bajtů
Megabajt (MB) 1 0242 bajtů 1 MB = 1 048 576 bajtů
Gigabajt (GB) 1 0243 bajtů 1 GB = 1 073 741 824 bajtů

Žádosti o podporu

Pro úložiště dotnet/AspNetCore.Docs jsou vhodné pouze problémy týkající se dokumentace. V případě podpory produktů neotevírejte problém s dokumentací. Požádejte o pomoc jeden nebo více z následujících kanálů podpory:

Pokud máte potenciální chybu v rámci nebo chcete poskytnout zpětnou vazbu k produktu, vytvořte problém pro produktovou jednotku ASP.NET Core na stránce dotnet/aspnetcore issues. Zprávy o chybách obvykle vyžadují následující:

  • Jasné vysvětlení problému: Při otevření problému postupujte podle pokynů v šabloně problému GitHubu, kterou poskytuje produktová jednotka.
  • Minimální reprodukční projekt: Umístěte projekt na GitHub pro techniky produktu, který si mohou stáhnout a spustit. Uveďte odkaz na projekt v úvodním komentáři k problému.

V případě možného problému s článkem Blazor otevřete hlášení o dokumentaci. Pokud chcete otevřít problém s dokumentací, použijte odkaz Otevřít problém s dokumentací v dolní části článku. Metadata přidaná k vašemu problému poskytují sledovací data a automaticky upozorní autora článku. Pokud se téma probíralo s produktovou jednotkou před otevřením problému s dokumentací, umístěte křížový odkaz na technický problém v úvodním komentáři k problému s dokumentací.

V případě problémů nebo zpětné vazby k sadě Visual Studio použijte příkaz Nahlásit problém nebo Navrhnout funkci v rámci sady Visual Studio, které otevřou interní záležitosti pro Visual Studio. Další informace najdete v tématu Zpětná vazba k sadě Visual Studio.

V případě problémů s Visual Studio Code požádejte o podporu na komunitních fórech podpory. V případě zpráv o chybách a zpětné vazby k produktům otevřete problém v úložištimicrosoft/vscode GitHub.

Problémy s dokumentací pro Blazor na GitHubu se automaticky označí k vyřízení v rámci projektu Blazor.Docs (dotnet/AspNetCore.Docs úložiště na GitHubu). Na odpověď chvíli počkejte, zejména o víkendech a svátcích. Ve všední dny autoři dokumentace obvykle odpovídají do 24 hodin.

Pro kolekci odkazů na Blazor zdroje spravované komunitou navštivte Awesome Blazor.

Poznámka:

Microsoft nevlastní, udržuje ani nepodporuje awesome Blazor a většinu komunitních produktů a služeb popsaných a propojených tam.