Komponenty Razor v hybridním prostředí Blazor

  • 8 min

Teď, když máte nastavené vývojové prostředí, prozkoumáte strukturu projektu Blazor Hybrid a naučíte se přidávat nové stránky.

Co je syntaxe Razor?

Razor je syntaxe značek pro vkládání kódu založeného na .NET do webových stránek. Syntaxe Razor se skládá ze syntaxe specifické pro HTML, C# a Razor, která obvykle začíná znakem @ . Soubory obsahující Razor mají obecně příponu .cshtml souboru (používá se při vývoji na straně serveru s Razor Pages a MVC) nebo příponu .razor při použití v souborech komponent Razor. Syntaxe Razor se podobá šablonovacím modulům různých architektur jednostránkové aplikace JavaScriptu (SPA), jako jsou Angular, React, VueJs a Svelte.

Jaké jsou komponenty syntaxe Razor?

Komponenta Razor definuje opakovaně použitelnou část webového uživatelského rozhraní. Komponenty Blazor jsou podobné komponentám React a Angular v architekturách SPA.

Pokud projekt prozkoumáte, uvidíte různé komponenty Razor definované v souborech .razor.

V okamžiku kompilace se každá komponenta syntaxe Razor integruje do třídy .NET. Třída obsahuje běžné prvky uživatelského rozhraní, jako je stav, logika vykreslení, metody životního cyklu nebo obslužné rutiny událostí.

Vyzkoušení čítače

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

Screenshot that shows the counter tab.

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ánkách Pages/Counter.razor.

@page "/counter"

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

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

  • Událost onclick se aktivuje.
  • Volá se IncrementCount metoda.
  • Proměnná currentCount se zvýší.
  • Komponenta se vykreslí, aby se zobrazil aktualizovaný počet.

Prověřte si své znalosti

1.

Hybridní aplikace Blazor používají modul runtime .NET?

2.

Jak se obvykle definuje uživatelské rozhraní Blazor?