Blazor este un cadru pentru construirea interfețelor web interactive ale clienților folosind .NET:
- Folosește C# în loc de JavaScript pentru a crea o interfață interactivă și bogată.
- Partajează logica aplicațiilor pe partea de server și pe cea de client scrisă în .NET.
- Redați UI ca HTML și CSS pentru a suporta numeroase browsere, inclusiv cele mobile.
Blazor este un framework web conceput să ruleze pe partea clientului într-un browser pe un runtime .NET bazat pe WebAssembly (Blazor WebAssembly) sau pe partea serverului în ASP.NET Core (Blazor server). Pentru orice model gestionat, modelele aplicației și componentelor sunt aceleași.
Serverele Blazor
Folosește modelul de găzduire Blazor pentru a executa aplicații pe server din aplicațiile ASP.NET Core.Actualizările interfeței, gestionarea evenimentelor și apelurile JavaScript se fac prinSignalRConexiuni cu proces。
Modelul de găzduire a serverelor Blazor oferă următoarele beneficii:
- Dimensiunea descărcării este semnificativ mai mică decât în aplicația Blazor WebAssembly, iar aplicația se încarcă mult mai repede.
- Aplicațiile pot profita pe deplin de capabilitățile serverelor, inclusiv utilizarea oricăror API-uri compatibile cu .NET Core.
- .NET Core de pe server este folosit pentru rularea aplicației, astfel încât uneltele .NET existente, cum ar fi depanarea, funcționează conform așteptărilor.
- Clienții subțiri sunt susținuți. De exemplu, aplicația server Blazor este potrivită pentru browserele care nu suportă WebAssembly și pentru dispozitive cu resurse limitate.
- Baza de cod .NET/C# a aplicației, care include codul componentelor aplicației, nu funcționează pe client.
Găzduirea serverelor Blazor are următoarele dezavantaje:
Latența este de obicei mai mare. Fiecare interacțiune a utilizatorului implică un salt în rețea.
Lucrul offline nu este suportat. Dacă conectarea clientului eșuează, aplicația încetează să mai funcționeze.
Dacă ai mai mulți utilizatori, există provocări legate de scalabilitatea aplicațiilor. Serverul trebuie să gestioneze mai multe conexiuni ale clienților și să gestioneze starea clientului.
ASP.NET Serverele de bază sunt necesare pentru a deservi aplicația. Scenariile de implementare serverless nu sunt fezabile (de exemplu, deservirea aplicațiilor printr-un CDN).
Tutorialul începe:
1. Mai întâi, creează un nou proiect Blazor App folosind vs2019, așa cum se arată mai jos:
2. Creează un nou component Razor cu următorul cod:
Avem nevoie de pachetul SkiaSharp pentru a genera captcha-ul base64 și a-l instala prin nuget:
3. Începe proiectul, vizitează:Autentificarea cu hyperlink este vizibilă.
Codul html generat arată astfel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, inicial-scale=1.0" />
<title>BlazorApp1</title>
<base 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="top-row pl-4 navbar navbar-dark">
<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> Contor
</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 date
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="rând superior px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Despre</a>
</div>
<div class="content px-4">
<h3>Verificare</h3>
<p>
(Blazor) Un exemplu despre cum să arăt codul de verificare și să-l verifici.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Reînnoire</button>
<hr>
<div>Tastează numărul din imagine</div>
<form>
<input type="text" style="padding:5px" />
<button>Bifat</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
A apărut o excepție nerezolvată. Consultați uneltele de dezvoltare a browserului pentru detalii.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Încearcă să dai click pe buton, evenimentul declanșator al butonului este comunicat prin SignalR, care se bazează pe websocket, polling etc., așa cum se arată în figura de mai jos:
Linkuri de referință:
Autentificarea cu hyperlink este vizibilă.
|
Postat pe 07.04.2020 11:15:36
|
|
|
|
Proprietarul|
Postat pe 07.04.2020 11:45:47
|
Postat pe 15.11.2022 10:51:42
|
