Składniki Razor

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 składnik Home był wyświetlany, gdy użytkownik przejdzie 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 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, zauważysz, ż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ładnika

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 również atrybut [Parameter]. 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). Za pomocą @code można ś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, wybierając zakładkę 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"
@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 /counter w przeglądarce, określone na górze przez dyrektywę @page, powoduje, że składnik Counter renderuje swoją zawartość. Dyrektywa @rendermode umożliwia interaktywne renderowanie serwera dla komponentu, dzięki czemu może on obsługiwać zdarzenia interfejsu użytkownika pochodzące z przeglądarki.

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

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