Sdílet prostřednictvím

Základy architektury ASP.NET Core Blazor

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální vydání najdete v článku verze .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í vydání najdete v verzi .NET 9 tohoto článku.

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

Pro aktuální vydání si přečtěte článek o verzi .NET 9.

Články Základy poskytují vedení k základním konceptům. Blazor Některé koncepty jsou spojené se základním porozuměním komponent Razor, kterým se blíže věnuje další část tohoto článku a podrobně se jim věnují články týkající se komponent.

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 rozhraní .NET pomocí 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 Součásti, které se zobrazí dále v sadě dokumentace Blazor.

Další informace o těchto konceptech a o tom, jak řídit statické a interaktivní vykreslování, najdete v článku o vykreslovacích režimech 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á vytvořit HTML kód, 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. CSR se považuje za interaktivní, takže "interaktivní vykreslování na straně klienta" a "interaktivní CSR" nejsou používány v odvětví 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í interaktivitu uživatele a Razor stav Blazor komponent je spravován frameworkem.

  • 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

Aplikace Blazor jsou založené na komponentách Razor, které se často označují pouze jako 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 .NET C# 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 navigaci se věnuje téma Směrování a navigace v architektuře ASP.NET Core Blazor.
  • 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 jazyka this C# používají klíčové slovo a vyhněte se polím s předponami s podtržítkem (_) přiřazeným v konstruktorech, které se liší od pokynů pro architekturu ASP.NET Core Framework.
  • 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 vRazorčásti syntaxe ASP.NET základních Razor komponent.

Následuje příklad komponenty čítače, která je součástí aplikace vytvořené z šablony projektu Blazor. Podrobný popis komponent najdete v článcích věnovaných komponentám v dalších částech dokumentace. Následující příklad ukazuje koncepty komponent uvedené v článcích věnovaných základům, než se dostanete k článkům věnovaným komponentám v dalších částech dokumentace.

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 se téma podrobně popisuje v článku o režimech vykreslování ASP.NET Core v Komponenty, který se zobrazí za uzlem Základy.

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 v Blazor Web App používá režim vykreslování k určení modelu hostování, který používá, kde je vykreslena, a zda je vykreslena staticky na serveru, pro interaktivitu uživatele na serveru nebo pro interaktivitu uživatele na straně klienta (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 modelem hostování, ne 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 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, abyste porozuměli článkům o uzlech Základy. Pokud jste noví v Blazor a čtete Blazor články postupně podle pořadí v obsahu, můžete odložit čtení podrobných informací o režimech vykreslování, dokud nedosáhnete článku ASP.NET Core Blazor render modes v uzlu 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í .NET API s poznámkami s [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 pro přepnutí větví nebo značek. 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 ukázky souboru README úložiště GitHub.

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 pro přepnutí větví nebo značek. 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ě žádostí o podporu k produktu neotevírejte problém s dokumentací. Vyhledejte pomoc prostřednictvím některého z následujících kanálů podpory:

V případě potenciální chyby ve frameworku nebo chyby v produktu otevřete issue pro produktovou jednotku ASP.NET Core na dotnet/aspnetcore issues. Hlášené chyby obvykle musí obsahovat následující:

  • Jasné vysvětlení problému: Při otevírání problému postupujte podle pokynů v šabloně problému na GitHubu od produktové jednotky.
  • Minimální projekt pro reprodukci: Umístěte na GitHub projekt, který si budou moct technici produktové jednotky 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 funkce Navrhnout funkci v sadě Visual Studio, které otevřou interní hlášení 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ě hlášení chyb a zpětné vazby k produktu otevřete problém v úložišti microsoft/vscode na GitHubu.

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.

Sbírku odkazů na Blazor zdroje spravované komunitou najdete na Awesome Blazor.

Poznámka:

Microsoft nevlastní, neudržuje ani nepodporuje úložiště Awesome Blazor ani většinu komunitních produktů a služeb, které jsou v tomto úložišti popsané a na které toto úložiště odkazuje.