Składniki Razor w rozwiązaniu Blazor Hybrid

  • 8 min

Po skonfigurowaniu środowiska projektowego poznasz strukturę projektu Blazor Hybrid i dowiesz się, jak dodawać nowe strony.

Co to jest składnia Razor?

Razor to składnia znaczników umożliwiająca osadzanie kodu opartego na platformie .NET na stronach internetowych. Składnia Razor składa się z składni HTML, C# i Składni razor, która zwykle zaczyna się od @ znaku. Pliki zawierające razor zwykle mają .cshtml rozszerzenie pliku (używane w programowaniu po stronie serwera za pomocą stron Razor i MVC) lub .razor rozszerzenie używane w plikach składników Razor. Składnia Razor jest podobna do aparatów tworzenia szablonów różnych struktur jednostronicowych aplikacji JavaScript (SPA), takich jak Angular, React, VueJs i Svelte.

Co to są składniki Razor?

Składnik Razor definiuje element internetowego interfejsu użytkownika wielokrotnego użytku. Składniki platformy Blazor są analogiczne do składników React i Angular w strukturach SPA.

W przypadku eksplorowania projektu 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:

Zrzut ekranu przedstawiający kartę licznika.

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 /counter przeglądarce określone przez @page dyrektywę u góry powoduje Counter , że składnik renderuje jego zawartość.

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

  • Zdarzenie onclick zostanie wyzwolone.
  • Wywoływana IncrementCount jest metoda .
  • Zmienna currentCount jest zwiększana.
  • Składnik jest renderowany w celu wyświetlenia zaktualizowanej liczby.

Sprawdź swoją wiedzę

1.

Aplikacje hybrydowe platformy Blazor używają tego środowiska uruchomieniowego platformy .NET?

2.

W jaki sposób interfejs użytkownika platformy Blazor jest zwykle definiowany?