Składniki Razor w rozwiązaniu Blazor Hybrid
- 8 min
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
onclickjest wyzwalane. - Metoda
IncrementCountjest wywoływana. - Zmienna
currentCountjest zwiększana. - Składnik jest renderowany w celu wyświetlenia zaktualizowanej liczby.