Blazor è un framework per costruire interfacce web client interattive utilizzando .NET:
- Usa C# invece di JavaScript per creare un'interfaccia utente ricca e interattiva.
- Condividi la logica dell'app lato server e lato client scritta in .NET.
- Renderizza l'interfaccia utente come HTML e CSS per supportare numerosi browser, inclusi quelli mobili.
Blazor è un framework web progettato per girare lato client in un browser su un runtime .NET basato su WebAssembly (Blazor WebAssembly) o lato server in ASP.NET Core (server Blazor). Per qualsiasi modello gestito, il modello app e quello dei componenti sono gli stessi.
Server Blazor
Usa il modello di hosting server Blazor per eseguire le app sul server da ASP.NET app Core.Gli aggiornamenti UI, la gestione degli eventi e le chiamate JavaScript avvengono tramiteSignalRCollegamenti al processo。
Il modello di hosting server Blazor offre i seguenti vantaggi:
- La dimensione del download è significativamente più piccola rispetto all'app Blazor WebAssembly e l'app si carica molto più velocemente.
- Le app possono sfruttare appieno le capacità dei server, incluso l'uso di qualsiasi API compatibile con .NET Core.
- .NET Core sul server viene utilizzato per eseguire l'app, quindi gli strumenti .NET esistenti come il debug funzionano come previsto.
- I thin clients sono supportati. Ad esempio, l'app server Blazor è adatta per browser che non supportano WebAssembly e per dispositivi con risorse limitate.
- Il codice .NET/C# dell'app, che include il codice component dell'app, non funziona sul client.
L'hosting dei server Blazor presenta i seguenti svantaggi:
La latenza è solitamente più alta. Ogni interazione dell'utente comporta un salto di rete.
Il lavoro offline non è supportato. Se la connessione client fallisce, l'app smette di funzionare.
Se hai più utenti, ci sono sfide nella scalabilità delle app. Il server deve gestire più connessioni client e gestire lo stato del client.
ASP.NET server core sono obbligati a servire l'applicazione. Gli scenari di distribuzione serverless non sono fattibili (ad esempio, servire applicazioni tramite una CDN).
Inizia il tutorial:
1. Innanzitutto, crea un nuovo progetto Blazor App usando vs2019, come mostrato di seguito:
2. Creare un nuovo componente Razor con il seguente codice:
Abbiamo bisogno del pacchetto SkiaSharp per generare il captcha base64 e installarlo tramite nuget:
3. Avvia il progetto, visita:Il login del link ipertestuale è visibile.
Il codice html generato appare così:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-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="contatore" classe="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Contatore
</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="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Informazioni</a>
</div>
<div class="content px-4">
<h3>Verifica</h3>
<p>
(Blazor) Un esempio su come mostrare il codice di verifica e verificarlo.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Rinnova</button>
<hr>
<div>Digita il numero nell'immagine</div>
<form>
<input type="text" style="padding:5px" />
<button>Controllo</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Si è verificata un'eccezione non risolta. Consulta gli strumenti di sviluppo del browser per i dettagli.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Prova a cliccare sul pulsante, l'evento di attivazione del pulsante viene comunicato tramite SignalR, che si basa su websocket, polling, ecc., come mostrato nella figura qui sotto:
Collegamenti di riferimento:
Il login del link ipertestuale è visibile.
|
Pubblicato su 07/04/2020 11:15:36
|
|
|
|
Padrone di casa|
Pubblicato su 07/04/2020 11:45:47
|
Pubblicato su 15/11/2022 10:51:42
|
