Składniki Razor

  • 8 min

Teraz, gdy masz już skonfigurowane środowisko projektowe, przyjrzyjmy się strukturze projektu Blazor i dowiesz się, jak działają składniki platformy Blazor.

Strona główna

Strona główna aplikacji jest definiowana przez plik Home.razor znajdujący się w katalogu Components/Pages . Home.razor zawiera następujący kod:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

Dyrektywa @page u góry określa trasę dla tej strony, tak aby Home składnik był wyświetlany po przejściu użytkownika do katalogu głównego aplikacji. Tag PageTitle jest składnikiem platformy Blazor, który ustawia tytuł bieżącej strony, tak aby był wyświetlany na karcie przeglądarki. Pozostała część pliku to normalny kod HTML, który definiuje zawartość strony.

Co to jest składnia Razor?

Razor to składnia znaczników oparta na językach HTML i C#. Plik Razor (.razor) zawiera zwykły kod HTML, a następnie język C#, aby zdefiniować dowolną logikę renderowania, na przykład w przypadku warunkowych, przepływu sterowania i oceny wyrażeń. Pliki Razor są następnie kompilowane w klasach języka C#, które hermetyzują logikę renderowania składnika.

Co to są składniki Razor?

Jeśli eksplorujesz pliki w projekcie Blazor, zobaczysz, że większość plików tworzących projekt to pliki razor . W środowisku Blazor plik Razor definiuje składnik wielokrotnego użytku, który stanowi część interfejsu użytkownika aplikacji. Składniki definiują kod HTML do renderowania i sposób obsługi zdarzeń użytkownika.

W czasie kompilacji każdy składnik Razor jest wbudowany w klasę języka C#. Klasa może zawierać typowe elementy interfejsu użytkownika, takie jak stan, logika renderowania, metody cyklu życia i programy obsługi zdarzeń. Ponieważ składniki platformy Blazor utworzone w języku Razor to tylko klasy języka C#, możesz użyć dowolnego kodu platformy .NET ze składników.

Używanie składników

Aby użyć składnika z innego składnika, należy dodać tag w stylu HTML z nazwą zgodną z nazwą składnika. Jeśli na przykład masz składnik o nazwie MyButton.razor, możesz dodać MyButton składnik do innego składnika, dodając <MyButton /> tag.

Parametry składników

Składniki mogą również mieć parametry, które umożliwiają przekazywanie danych do składnika podczas jego użycia. Parametry składnika są definiowane przez dodanie publicznej właściwości języka C# do składnika, który ma [Parameter] również atrybut. Następnie można określić wartość parametru składnika przy użyciu atrybutu w stylu HTML, który pasuje do nazwy właściwości. Wartość parametru może być dowolnym wyrażeniem języka C#.

Blok @code

Blok @code w pliku Razor służy do dodawania do składnika składowych klas języka C# (pól, właściwości i metod). Możesz użyć polecenia @code , aby śledzić stan składnika, dodawać parametry składnika, implementować zdarzenia cyklu życia składnika i definiować programy obsługi zdarzeń.

Wypróbuj licznik

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

Counter Screenshot.

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"
@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++;
    }
}

Żądanie w /counter przeglądarce określone przez @page dyrektywę u góry powoduje Counter , że składnik renderuje jego zawartość. Dyrektywa @rendermode umożliwia renderowanie interakcyjnego serwera dla składnika, dzięki czemu może obsługiwać zdarzenia interfejsu użytkownika z przeglądarki.

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

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