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 Home se komponenta 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 syntaxe Razor?

Razor je syntaxe značek 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.

Jaké jsou komponenty syntaxe 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 komponent

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á [Parameter] také atribut. 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. Můžete použít @code ke sledování stavu součásti, přidání parametrů komponenty, implementaci událostí životního cyklu komponent a definování obslužných rutin událostí.

Vyzkoušení čítače

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:

Counter Screenshot.

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

Implementaci Counter komponenty najdete na stránce 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 v /counter prohlížeči, jak je uvedeno direktivou @page v horní části, způsobí, že komponenta Counter vykresluje 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 Kliknout na mě :

  • Událost onclick se aktivuje.
  • Volá se IncrementCount metoda.
  • Je currentCount navýšený.
  • Komponenta se vykreslí, aby se zobrazil aktualizovaný počet.