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.
Natychmiastowa aktualizacja aplikacji za pomocą szybkiego przeładowania
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.
Możesz ulepszyć ten przepływ pracy przy użyciu przeładowywania na gorąco. Za pomocą funkcji Przeładowywania na gorąco możesz zastosować zmianę uruchomionej aplikacji bez konieczności 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 jako ciąg "Blazor", który następnie jest renderowany wewnątrz tagu div. Renderowane dane wyjściowe wyglądają następująco:
<div>Blazor</div>
Górna część przykładu w Razor składa się z znaczników HTML, które składnik wyrenderuje podczas wykonywania. Wartość wyrażeń języka C# można renderować przy użyciu znaku @. Razor będzie kontynuować interpretowanie kodu C# po @, 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: @(...).
Wszystko w @code {} zawiera 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 @code służy do definiowania elementów członkowskich języka C# dla typu składnika, takich jak pola, właściwości i metody.
Stylowanie składnika Blazor
Składniki Blazor renderują HTML, więc można je stylować używając zwykłych arkuszy 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 tagu HeadContent:
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Ten tag i zawartość style są renderowane wewnątrz tagu head 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ść dyrektywy @page "/" w pierwszym wierszu. Ta dyrektywa przypisuje trasę "/" do składnika i nakazuje Blazorowi odpowiedzieć zawartością tego pliku, gdy zażądana zostanie strona domyślna pod adresem "/".