Blazor to framework do tworzenia interaktywnych interfejsów webowych dla klientów z wykorzystaniem .NET:
- Użyj C# zamiast JavaScript, aby tworzyć bogaty, interaktywny interfejs użytkownika.
- Udostępnianie logiki aplikacji po stronie serwera i klienta napisanej w .NET.
- Renderuj interfejs użytkownika jako HTML i CSS, aby wspierać liczne przeglądarki, w tym przeglądarki mobilne.
Blazor to framework webowy zaprojektowany do uruchamiania po stronie klienta w przeglądarce na środowisku uruchomieniowym opartym na WebAssembly .NET (Blazor WebAssembly) lub po stronie serwera w ASP.NET Core (serwer Blazor). Dla każdego modelu zarządzanego model aplikacji i komponentów są takie same.
Serwery Blazor
Użyj modelu hostingu serwera Blazor, aby uruchamiać aplikacje na serwerze z ASP.NET aplikacji Core.Aktualizacje interfejsu, obsługa zdarzeń oraz wywołania JavaScript są realizowane przezSignalRPołączenia z procesem。
Model hostingu serwerów Blazor oferuje następujące korzyści:
- Rozmiar pobierania jest znacznie mniejszy niż w aplikacji Blazor WebAssembly, a aplikacja ładuje się znacznie szybciej.
- Aplikacje mogą w pełni korzystać z możliwości serwera, w tym korzystać z dowolnych API kompatybilnych z .NET Core.
- Do uruchamiania aplikacji używany jest .NET Core na serwerze, więc istniejące narzędzia .NET, takie jak debugowanie, działają zgodnie z oczekiwaniami.
- Obsługiwane są cienkie klienty. Na przykład aplikacja serwerowa Blazor jest odpowiednia dla przeglądarek, które nie obsługują WebAssembly oraz dla urządzeń o ograniczonych zasobach.
- Kod aplikacji .NET/C#, który zawiera kod komponentów, nie działa na kliencie.
Hosting serwerów Blazor ma następujące wady:
Opóźnienia są zwykle wyższe. Każda interakcja użytkownika wiąże się z przeskokiem sieciowym.
Praca offline nie jest obsługiwana. Jeśli połączenie z klientem się nie uda, aplikacja przestaje działać.
Jeśli masz wielu użytkowników, pojawiają się wyzwania związane ze skalowalnością aplikacji. Serwer musi zarządzać wieloma połączeniami klientów i obsługiwać stan klienta.
ASP.NET Serwery rdzeniowe są wymagane do obsługi aplikacji. Scenariusze wdrożenia serwerless nie są wykonalne (np. obsługa aplikacji przez CDN).
Rozpoczyna się samouczek:
1. Po pierwsze, stwórz nowy projekt aplikacji Blazor używając vs2019, jak pokazano poniżej:
2. Stwórz nowy komponent Razor z następującym kodem:
Potrzebujemy pakietu SkiaSharp, aby wygenerować captcha base64 i zainstalować go przez nuget:
3. Rozpocznij projekt, odwiedź:Logowanie do linku jest widoczne.
Wygenerowany kod html wygląda tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta nazwa="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<bazowy href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<!--Blazor:{"sequence":0,"type":"server","prerenderId":"19210eabb9054fe79ea7cc3e6f501df5","descriptor": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<Div Class="górny rząd PL-4 navbar-ciemny">
<a class="navbar-brand" href>BlazorApp1</a>
<Button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="górny rząd px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">O</a>
</div>
<div class="zawartość px-4">
<h3>Weryfikacja</h3>
<p>
(Blazor) Przykład, jak pokazać kod weryfikacyjny i go zweryfikować.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Odnawianie</button>
<hr>
<div>Wpisz numer na obrazie</div>
<form>
<typ wejścia=styl "tekstu"="padding:5px" />
<button>Sprawdzone</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Wystąpił wyjątek nieobsługiwany. Szczegóły znajdziesz w narzędziach deweloperskich w przeglądarce.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Spróbuj kliknąć przycisk, wyzwalacz zdarzenia przycisku jest komunikowany przez SignalR, który opiera się na websocket, polllingu itp., jak pokazano na poniższym rysunku:
Linki referencyjne:
Logowanie do linku jest widoczne.
|
Opublikowano 07.04.2020 11:15:36
|
|
|
|
Ziemianin|
Opublikowano 07.04.2020 11:45:47
|
Opublikowano 15.11.2022 10:51:42
|
