Komponenty Razor

  • 8 min

Teď, když máte nastavené vývojové prostředí, pojďme prozkoumat strukturu projektu Blazor a zjistit, jak komponenty Blazor fungují.

Domovská stránka

Domovská stránka aplikace je definována souborem Home.razor umístěným v adresáři Components/Pages. Home.razor obsahuje následující kód:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

Direktiva @page v horní části určuje trasu pro tuto stránku, aby se komponenta Home zobrazila, když uživatel přejde do kořenového adresáře aplikace. Značka PageTitle je komponenta Blazor, která nastaví název aktuální stránky tak, aby se zobrazovala na kartě prohlížeče. Zbytek souboru je normální HTML, který definuje obsah stránky.

Co je Razor?

Razor je syntaxe markup založená na HTML a C#. Soubor Razor (.razor) obsahuje prostý kód HTML a potom jazyk C# k definování jakékoli logiky vykreslování, jako jsou podmíněné podmínky, tok řízení a vyhodnocení výrazu. Soubory Razor se pak kompilují do tříd jazyka C#, které zapouzdřují logiku vykreslování komponenty.

Co jsou komponenty Razor?

Pokud prozkoumáte soubory v projektu Blazor, uvidíte, že většina souborů, které tvoří projekt, jsou soubory .razor. V Blazoru definuje soubor Razor opakovaně použitelnou komponentu, která tvoří část uživatelského rozhraní aplikace. Komponenty definují, co má kód HTML vykreslit a jak zpracovávat uživatelské události.

V době kompilace je každá komponenta Razor integrovaná do třídy jazyka C#. Třída může zahrnovat běžné prvky uživatelského rozhraní, jako je stav, logika vykreslování, metody životního cyklu a obslužné rutiny událostí. Vzhledem k tomu, že komponenty Blazor vytvořené v Razoru jsou pouze třídy jazyka C#, můžete z komponent použít libovolný kód .NET.

Použití komponent

Chcete-li použít komponentu z jiné komponenty, přidáte značku stylu HTML s názvem, který odpovídá názvu komponenty. Pokud máte například komponentu s názvem MyButton.razor, můžete přidat komponentu MyButton do jiné komponenty přidáním značky <MyButton />.

Parametry komponenty

Komponenty můžou mít také parametry, které umožňují předávat data komponentě při použití. Parametry komponenty jsou definovány přidáním veřejné vlastnosti C# do komponenty, která má také atribut [Parameter]. Pak můžete zadat hodnotu parametru komponenty pomocí atributu ve stylu HTML, který odpovídá názvu vlastnosti. Hodnota parametru může být libovolný výraz jazyka C#.

Blok @code

Blok @code v souboru Razor se používá k přidání členů třídy jazyka C# (pole, vlastnosti a metody) do komponenty. Pomocí @code můžete sledovat stav komponenty, přidávat parametry komponent, implementovat události životního cyklu komponent a definovat obslužné rutiny událostí.

Vyzkoušejte čítač

Ve spuštěné aplikaci přejděte na stránku Čítač kliknutím na kartu Čítač na bočním panelu vlevo. Pak by se měla zobrazit následující stránka:

snímek obrazovky čítače

Vyberte tlačítko Kliknutím zvýšíte počet bez aktualizace stránky. Zvýšení čítače na webové stránce obvykle vyžaduje psaní JavaScriptu, ale s Blazorem můžete použít C#.

Implementaci komponenty Counter najdete v Components/Pages/Counter.razor.

@page "/counter"
@rendermode InteractiveServer

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

Požadavek na /counter v prohlížeči, jak je uvedeno příkazem @page v horní části, způsobí, že komponenta Counter vykreslí svůj obsah. Direktiva @rendermode umožňuje interaktivní vykreslování serveru pro komponentu, aby mohla zpracovávat události uživatelského rozhraní z prohlížeče.

Pokaždé, když vyberete tlačítko Klikni na mě:

  • Událost onclick je vyvolána.
  • Volá se metoda IncrementCount.
  • currentCount je zvýšeno.
  • Komponenta se vykreslí, aby se zobrazil aktualizovaný počet.