Tworzenie interfejsu użytkownika za pomocą składników platformy Blazor

Ukończone

Składniki platformy Blazor umożliwiają definiowanie stron internetowych lub fragmentów kodu HTML zawierających zawartość dynamiczną przy użyciu kodu platformy .NET. W środowisku Blazor można sformułować zawartość dynamiczną przy użyciu języka C#, zamiast języka JavaScript.

Załóżmy, że pracujesz dla firmy dostarczającej pizze, aby utworzyć nową nowoczesną witrynę internetową. Zaczynasz od strony powitalnej, która stanie się stroną docelową dla większości użytkowników witryny. Chcesz wyświetlić specjalne oferty i popularne pizze na tej stronie.

W tej lekcji dowiesz się, jak tworzyć składniki na platformie Blazor i pisać kod renderujący zawartość dynamiczną na tych składnikach.

Omówienie składników platformy Blazor

Blazor to struktura, która umożliwia deweloperom tworzenie rozbudowanego interaktywnego interfejsu użytkownika przez napisanie kodu w języku C#. Za pomocą platformy Blazor możesz użyć tego samego języka dla całego kodu, zarówno po stronie serwera, jak i po stronie klienta, i renderować go do wyświetlania w wielu różnych przeglądarkach, w tym w przeglądarkach na urządzeniach przenośnych.

Uwaga

Istnieją dwa modele hostingu kodu w aplikacjach platformy Blazor:

• Serwer Blazor: w tym modelu aplikacja jest wykonywana na serwerze internetowym w aplikacji ASP.NET Core. Aktualizacje interfejsu użytkownika, zdarzenia i wywołania języka JavaScript po stronie klienta są wysyłane za pośrednictwem połączenia usługi SignalR między klientem a serwerem. W tym module omówimy i omówimy kod dla tego modelu.
• Zestaw WebAssembly platformy Blazor: w tym modelu aplikacja Blazor, jej zależności i środowisko uruchomieniowe platformy .NET są pobierane i uruchamiane w przeglądarce.

W środowisku Blazor utworzysz interfejs użytkownika z samodzielnie zawartych fragmentów kodu nazywanych składnikami. Każdy składnik może zawierać kombinację kodu HTML i C#. Składniki są pisane przy użyciu składni Razor, w której kod jest oznaczony dyrektywą @code . Inne dyrektywy mogą służyć do uzyskiwania dostępu do zmiennych, wiązania z wartościami i wykonywania innych zadań renderowania. Po skompilowaniu aplikacji kod HTML i kod są kompilowane w klasie składników. Składniki są zapisywane jako pliki z rozszerzeniem razor .

Uwaga

Składnia Razor służy do osadzania kodu platformy .NET na stronach internetowych. Można go używać w aplikacjach ASP.NET MVC, gdzie pliki mają rozszerzenie cshtml . Składnia Razor jest używana w blazor do pisania składników. Te składniki mają zamiast tego rozszerzenie razor i nie ma ścisłego rozdzielenia między kontrolerami i widokami.

Oto prosty przykład składnika platformy Blazor:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

W tym przykładzie kod ustawia wartość zmiennej ciągu o nazwie welcomeMessage. Ta zmienna jest renderowana w tagach <p> w kodzie HTML. W dalszej części tej lekcji przeanalizujemy bardziej złożone przykłady.

Tworzenie składników platformy Blazor

Podczas tworzenia aplikacji Blazor przy użyciu szablonu blazorserver w interfejsie wiersza polecenia dotnet są dołączane domyślnie kilka składników:

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

Domyślne składniki obejmują stronę główną Index.razor i składnik demo Counter.razor . Oba te składniki są umieszczane w folderze Pages . Możesz zmodyfikować te widoki zgodnie z potrzebami lub usunąć je i zastąpić je nowymi składnikami.

Aby dodać nowy składnik do istniejącej aplikacji internetowej, użyj następującego polecenia:

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• Opcja -n określa nazwę składnika do dodania. W tym przykładzie dodano nowy plik o nazwie PizzaBrowser.razor.
• Opcja -o określa folder, który będzie zawierać nowy składnik.
• Opcja -f wymusza skompilowania aplikacji przy użyciu platformy .NET 6.

Ważne

Nazwa składnika Blazor musi zaczynać się od wielkiej litery.

Po utworzeniu składnika można go otworzyć w celu edycji za pomocą programu Visual Studio Code:

code Pages/PizzaBrowser

Pisanie kodu w składniku blazor

Podczas tworzenia interfejsu użytkownika na platformie Blazor można mieszać statyczne znaczniki HTML i CSS z kodem języka C#, często w tym samym pliku. Aby odróżnić te typy kodu, należy użyć składni Razor. Składnia Razor zawiera dyrektywy, poprzedzone symbolem @ , który rozdziela kod języka C#, parametry routingu, powiązane dane, importowane klasy i inne funkcje.

Rozważmy ponownie ten przykładowy składnik:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

Znaczniki HTML można rozpoznać za pomocą <h1> tagów i .<p> Ten znacznik to statyczna struktura strony, w której kod wstawi zawartość dynamiczną. Znacznik Razor składa się z następujących elementów:

• Dyrektywa @page : Ta dyrektywa zawiera szablon trasy do platformy Blazor. W czasie wykonywania platforma Blazor lokalizuje stronę do renderowania, pasując do tego szablonu do adresu URL, którego zażądał użytkownik. W takim przypadku może być zgodny z adresem URL formularza http://yourdomain.com/index.
• Dyrektywa @code : Ta dyrektywa deklaruje, że tekst w poniższym bloku to kod języka C#. W składniku można umieścić dowolną liczbę bloków kodu. Składowe klasy składników można zdefiniować w tych blokach kodu i ustawić ich wartości na podstawie obliczeń, operacji wyszukiwania danych lub innych źródeł. W tym przypadku kod definiuje jeden element członkowski składnika o nazwie welcomeMessage i ustawia jego wartość ciągu.
• Dyrektywy dostępu do składowych: jeśli chcesz uwzględnić wartość elementu członkowskiego w logice renderowania, użyj symbolu @ , po którym następuje wyrażenie języka C#, takie jak nazwa elementu członkowskiego. W tym przypadku @welcomeMessage dyrektywa jest używana do renderowania wartości welcomeMessage elementu członkowskiego w tagach <p> .

Kontynuuj