Składniki Razor w rozwiązaniu Blazor Hybrid

Teraz, gdy masz już skonfigurowane środowisko projektowe, przyjrzyjmy się strukturze projektu Blazor Hybrid i dowiesz się, jak dodawać nowe strony.

Co to jest Razor?

Razor to składnia znaczników umożliwiająca osadzanie kodu opartego na platformie .NET na stronach internetowych. Składnia Razor zawiera HTML, C# oraz składnię specyficzną dla Razor, która zwykle zaczyna się od znaku @. Pliki zawierające Razor zwykle mają rozszerzenie pliku .cshtml (używane w programowaniu po stronie serwera z użyciem Razor Pages i MVC) lub rozszerzenie .razor, gdy są używane w plikach komponentów Razor. Składnia Razor jest podobna do silników szablonów różnych JavaScriptowych frameworków aplikacji jednostronicowych (SPA), takich jak Angular, React, VueJs i Svelte.

Co to są składniki Razor?

Komponent Razor definiuje wielokrotnie używaną część interfejsu użytkownika w sieci. Składniki platformy Blazor są analogiczne do składników React i Angular w strukturach SPA.

Eksplorując projekt, zobaczysz różne składniki Razor zdefiniowane w plikach .razor.

W czasie kompilacji każdy składnik Razor jest wbudowywany w klasę .NET. Ta klasa zawiera wspólne elementy interfejsu użytkownika, takie jak stan, logika renderowania, metody cyklu życia i procedury obsługi zdarzeń.

Wypróbuj licznik

W uruchomionej aplikacji przejdź do strony licznika, wybierając kartę Licznik na pasku bocznym po lewej stronie. Powinna zostać wyświetlona następująca strona:

Wybierz przycisk Kliknij mnie, aby zwiększać liczbę bez odświeżania strony. Zwiększanie licznika na stronie internetowej zwykle wymaga pisania kodu JavaScript, ale w środowisku Blazor można użyć języka C#.

Implementację Counter składnika można znaleźć w sekcji Components/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++;
    }
}

Żądanie w przeglądarce /counter określone przez dyrektywę @page powoduje, że składnik Counter renderuje swoją zawartość.

Za każdym razem, gdy wybierzesz przycisk Kliknij mnie :

• Zdarzenie onclick jest wyzwalane.
• Metoda IncrementCount jest wywoływana.
• Zmienna currentCount jest zwiększana.
• Składnik jest renderowany w celu wyświetlenia zaktualizowanej liczby.