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í verzi najdete ve verzi .NET 8 tohoto článku.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v tématu .NET a .NET Core Zásady podpory. Aktuální verzi najdete ve verzi .NET 8 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í.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

V článku Základní informace najdete doprovodné materiály k základním konceptům architektury 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 MODELU DOM zůstávají nedotčené, ale žádné uživatelské události v klientovi se nedají zpracovat pomocí .NET spuštěných na serveru.

Interaktivní nebo interaktivní vykreslování znamená, že komponenta má kapacitu pro zpracování událostí .NET prostřednictvím kódu jazyka C#. Události .NET se zpracovávají na serveru modulem runtime ASP.NET Core nebo v prohlížeči v klientovi pomocí modulu runtime založeného na Blazor 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 se ujistěte, že aplikace přijme globální interaktivitu nebo komponenta přijme interaktivní režim vykreslování.

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.

Vykreslování výrazu znamená, že vytvoří kód HTML, který prohlížeč zobrazí.

  • 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, jako je 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 být ze dvou odrůd:

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

  • 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 nastavenou relativní adresu URL na název 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 komponenta je dosažena FileUpload3 na /file-upload-3adrese .
  • 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. Typ private je například uvedený v deklaraci pole maxAllowedFiles: private int maxAllowedFiles = 3;.
  • Hodnoty parametrů komponenty vedou s vyhrazeným @ Razor symbolem, ale nevyžaduje se. 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, můžete před literály předponovat vlastním kódem @ .
  • 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.

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 téma je podrobně popsáno v článku režimy vykreslování ASP.NET Core Blazor v uzlu Komponenty, který se zobrazí po uzlu Základy článků.

Pro počáteční odkazy v tomto uzlu článků o vykreslení konceptů režimu pouze všimněte následující:

Každá komponenta Blazor Web App v režimu vykreslování přijímá režim vykreslování, aby určila model hostování, který používá, kde se vykresluje a jestli se vykresluje staticky na serveru, vykresluje se pro interaktivitu uživatele na serveru nebo se vykresluje pro interaktivitu uživatele v klientovi (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í opravené na konceptech modelu hostování, ne režimy vykreslování. Režimy vykreslování se koncepčně použijí na Blazor Web Apps v .NET 8 nebo novějším.

Následující tabulka uvádí dostupné režimy vykreslování pro vykreslovací Razor součásti v nástroji Blazor Web App. Režimy vykreslování se použijí na komponenty s direktivou @rendermode instance komponenty nebo definicí 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) 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í automatické Interaktivní SSR s využitím Blazor Server počátečního a následného převzetí služeb při následné návštěvě po Blazor stažení sady 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 s obsahem teprve začínáte Blazor a čtete Blazor články, můžete zpozdit podrobné informace o režimech vykreslování, dokud se nedostanete na článek o režimech vykreslování ASP.NET Core Blazor 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 kurátorovaných rozhraní API .NET podporovaných 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 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é úložiště obsahuje dva typy ukázek:

  • Ukázkové aplikace fragmentu kódu poskytují příklady kódu, 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 pro Blazor kompilaci a spuštění článků pro následující scénáře:
    • Blazor Server s EF Core
    • Blazor Server a Blazor WebAssembly se SignalR
    • Protokolování s podporou oborů Blazor WebAssembly

Další informace a seznam ukázek v úložišti najdete Blazor v ukázkách úložiště GitHub README.md souboru.

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

Stažení ukázkových aplikací:

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 související s dokumentací. 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ě možných chyb v architektuře nebo zpětné vazby k produktu otevřete problém pro produktovou jednotku ASP.NET Core v problémech v úložišti dotnet/aspnetcore. 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 o architektuře Blazor otevřete problém s dokumentací. 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 odešle příkaz ping 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 gesta funkce v sadě Visual Studio, která otevírají interní problémy 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í k architektuře Blazor na GitHubu se automaticky označí k určení priorit podle dostupnosti zdrojů v projektu Blazor.Docs (úložiště dotnet/AspNetCore.Docs 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 zdroje informací o architektuře Blazor spravovanou komunitou najdete v úložišti 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.