Blazor je framework pro tvorbu interaktivních webových uživatelských rozhraní pro klienty pomocí .NET:
- Používejte C# místo JavaScriptu pro vytvoření bohatého, interaktivního uživatelského rozhraní.
- Sdílení logiky aplikací na straně serveru a klienta napsané v .NET.
- Vykreslujte uživatelské rozhraní jako HTML a CSS pro podporu mnoha prohlížečů, včetně mobilních.
Blazor je webový framework navržený pro spouštění na straně klienta v prohlížeči na webAssembly-based .NET runtime (Blazor WebAssembly) nebo serverově v ASP.NET Core (Blazor server). Pro jakýkoli spravovaný model jsou aplikace a komponenty stejné.
Blazor servery
Použijte model hostingu serveru Blazor pro spouštění aplikací na serveru z ASP.NET Core aplikací.Aktualizace uživatelského rozhraní, zpracování událostí a JavaScriptová volání jsou prováděny prostřednictvímSignalRSpojení s procesem。
Model hostingu serveru Blazor nabízí následující výhody:
- Velikost stahování je výrazně menší než u aplikace Blazor WebAssembly a aplikace se načítá mnohem rychleji.
- Aplikace mohou plně využít možnosti serveru, včetně používání jakýchkoli API kompatibilních s .NET Core.
- Na serveru se používá .NET Core k provozu aplikace, takže stávající .NET nástroje jako ladění fungují podle očekávání.
- Podporují se tenké klienty. Například aplikace Blazor server je vhodná pro prohlížeče, které nepodporují WebAssembly, a pro zařízení s omezenými zdroji.
- Kódová základna aplikace .NET/C#, která zahrnuje komponentní kód aplikace, na klientovi nefunguje.
Hosting serveru Blazor má následující nevýhody:
Latence je obvykle vyšší. Každá uživatelská interakce zahrnuje síťový skok.
Offline práce není podporována. Pokud připojení ke klientovi selže, aplikace přestane fungovat.
Pokud máte více uživatelů, existují výzvy v škálovatelnosti aplikací. Server musí spravovat více klientských připojení a spravovat stav klienta.
ASP.NET Core servery jsou potřeba k aplikaci pro servis. Scénáře serverless nasazení nejsou proveditelné (např. servisování aplikací přes CDN).
Tutoriál začíná:
1. Nejprve vytvořte nový projekt aplikace Blazor pomocí vs2019, jak je uvedeno níže:
2. Vytvořte novou komponentu Razor s následujícím kódem:
Potřebujeme balíček SkiaSharp, který vygeneruje base64 captcha a nainstaluje ho přes nuget:
3. Začněte projekt, navštivte:Přihlášení k hypertextovému odkazu je viditelné.
Generovaný html kód vypadá takto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta název="viewport" obsah="width=zařízení-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<základní 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="horní řada PL-4 navbar-Navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<tlačítková třída="navigační přepínač">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="kolaps">
<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="hlavní">
<div class="horní řada px-4">
<a href="https://docs.microsoft.com/aspnet/" cíl="_blank">O</a> nás
</div>
<div class="obsah px-4">
<h3>Ověření</h3>
<p>
(Blazor) Ukázka, jak ukázat ověřovací kód a ověřit ho.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Obnova</button>
<hr>
<div>Zadejte číslo do obrázku</div>
<form>
<typ vstupu="text" styl="padding:5px" />
<button>Zkontrolováno</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Došlo k nezpracované výjimce. Podrobnosti najdete v nástrojích pro vývoj prohlížeče.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Zkuste kliknout na tlačítko, spouštěč události je komunikován přes SignalR, který je založen na websocketu, pollingu atd., jak je znázorněno na obrázku níže:
Referenční odkazy:
Přihlášení k hypertextovému odkazu je viditelné.
|
Zveřejněno 07.04.2020 11:15:36
|
|
|
|
Pronajímatel|
Zveřejněno 07.04.2020 11:45:47
|
Zveřejněno 15.11.2022 10:51:42
|
