Blazor
Istnieje wiele podejść do tworzenia aplikacji internetowych. Aby tworzyć aplikacje internetowe, które są wysoce interaktywne i szybkie, zwykle używasz dużej ilości kodu JavaScript.
Innym podejściem jest użycie struktury Blazor firmy Microsoft, która umożliwia korzystanie z języka C# i platformy .NET w celu obsługi wszystkich problemów związanych z programowaniem internetowym.
Co to jest Blazor?
Blazor to struktura do tworzenia stron internetowych za pomocą języków HTML, CSS i C#. Możemy zdefiniować układ i projekt witryny internetowej przy użyciu standardowych kodów HTML i CSS. Składniki interakcyjne stron sieci Web można następnie zarządzać przy użyciu kodu języka C#, który działa na serwerze lub w przeglądarce przy użyciu standardowej technologii internetowej o nazwie WebAssembly. Platforma Blazor umożliwia definiowanie stron internetowych i składników przy użyciu składni Razor, wygodnej kombinacji języków HTML i C#. Składniki platformy Blazor można łatwo używać na innych stronach i składnikach. Ta możliwość oznacza, że możemy łatwo tworzyć i ponownie używać części naszej aplikacji.
Co to jest zestaw WebAssembly?
WebAssembly to standardowa technologia dostępna w każdej nowoczesnej przeglądarce, która umożliwia uruchamianie kodu, podobnie jak w języku JavaScript, w przeglądarce. Możemy użyć narzędzi, aby przygotować kod języka C# do użycia w przeglądarce jako aplikację zestawu WebAssembly, a te narzędzia są dołączone do zestawu SDK platformy .NET.
Natychmiast zaktualizuj aplikację przy użyciu Przeładowywanie na gorąco
Podczas tworzenia aplikacji chcesz upewnić się, że przepływ dewelopera jest szybki, aby zobaczyć, jak zmiany wpływają na aplikację. Może to być czasochłonne, aby wprowadzić zmianę, zapisać ją, ponownie skompilować cały zasób i ponownie wdrożyć aplikację w przeglądarce.
Ten przepływ pracy można ulepszyć przy użyciu Przeładowywanie na gorąco. Dzięki Przeładowywanie na gorąco możesz zastosować zmianę uruchomionej aplikacji bez konieczności jej ponownego uruchamiania.
Składniki platformy Blazor
Podczas tworzenia aplikacji przy użyciu platformy Blazor aplikacja składa się z wielu składników, z których każda ma własny obszar odpowiedzialności. Aby utworzyć składniki, użyj plików Razor z rozszerzeniem razor . Co to jest Razor?
Razor to składnia programowania, która miesza składnię HTML z kodem C#. Oto przykład:
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
W tym przykładzie @product.Name jest rozpoznawany ciąg "Blazor", który jest następnie renderowany wewnątrz tagu div . Renderowane dane wyjściowe wyglądają następująco:
<div>Blazor</div>
Górna część przykładu Razor składa się z znaczników HTML, które składnik będzie renderowany podczas wykonywania. Wartość wyrażeń języka C# można renderować przy użyciu @ znaku . Razor będzie kontynuować interpretowanie kodu C# po @ nim, dopóki nie zidentyfikuje tag, a następnie wznowi renderowanie kodu HTML. Możesz jawnie określić, kiedy rozpoczyna się wyrażenie języka C# i kończy się przy użyciu parens: @(...).
Wszystkie elementy w pliku @code {} zawierają kod języka C# do definiowania składowych wygenerowanej klasy składników. Plik Razor można traktować jako wygodny sposób definiowania klasy języka C#, która definiuje logikę renderowania HTML. Blok służy @code do definiowania składowych języka C# dla typu składnika, takich jak pola, właściwości i metody.
Stylowanie składnika Blazor
Składniki platformy Blazor renderować kod HTML, dzięki czemu można stylować składniki platformy Blazor przy użyciu zwykłych arkuszy stylów CSS. Alternatywnie składniki platformy Blazor mają funkcję o nazwie Izolacja CSS, która umożliwia tworzenie reguł stylów, które mają zastosowanie tylko do zawartości tego składnika. Tworząc plik o tej samej nazwie co nasz składnik i dodając rozszerzenie nazwy pliku CSS, blazor rozpoznaje to nazewnictwo jako style, które powinny być stosowane tylko do zawartości HTML w odpowiednim składniku.
Składniki platformy Blazor mogą również definiować zawartość do dodania do nagłówka HTML strony przy użyciu specjalnego HeadContent tagu:
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Ten style tag i zawartość są renderowane wewnątrz head tagu strony.
Składniki routingu
Plik Home.razor jest składnikiem, do którego można przejść z przeglądarki internetowej. Zawiera on kod HTML, C# i odwołania do innych składników platformy Blazor. Ten plik można zidentyfikować jako stronę ze względu na obecność @page "/" dyrektywy w pierwszym wierszu. Ta dyrektywa przypisuje trasę "/" do składnika i nakazuje blazorowi odpowiedź na zawartość tego pliku po zażądaniu strony domyślnej pod adresem "/".