Blazor er et framework til at bygge interaktive klient-webbrugerflader ved brug af .NET:
- Brug C# i stedet for JavaScript til at skabe en rig, interaktiv brugerflade.
- Del server-side og klient-side app-logik skrevet i .NET.
- Gengiv UI som HTML og CSS for at understøtte adskillige browsere, inklusive mobile browsere.
Blazor er et webframework designet til at køre klient-side i en browser på en WebAssembly-baseret .NET-runtime (Blazor WebAssembly) eller server-side i ASP.NET Core (Blazor-server). For enhver managed model er app- og komponentmodellerne de samme.
Blazor-servere
Brug Blazor-serverhostingmodellen til at køre apps på serveren fra ASP.NET Core-apps.UI-opdateringer, hændelseshåndtering og JavaScript-kald foretages viaSignalRForbindelser til processen。
Blazor-serverhostingmodellen tilbyder følgende fordele:
- Downloadstørrelsen er betydeligt mindre end Blazor WebAssembly-appen, og appen indlæses meget hurtigere.
- Apps kan udnytte serverfunktioner fuldt ud, herunder brug af alle .NET Core-kompatible API'er.
- .NET Core på serveren bruges til at køre appen, så eksisterende .NET-værktøjer som fejlfinding fungerer som forventet.
- Thin clients understøttes. For eksempel er Blazor-serverappen velegnet til browsere, der ikke understøtter WebAssembly, og til ressourcebegrænsede enheder.
- Appens .NET/C#-kodebase, som inkluderer appens komponentkode, virker ikke på klienten.
Blazor-serverhosting har følgende ulemper:
Latenstiden er som regel højere. Hver brugerinteraktion involverer et netværkshop.
At arbejde offline understøttes ikke. Hvis klientforbindelsen fejler, stopper appen med at virke.
Hvis du har flere brugere, er der udfordringer med app-skalerbarhed. Serveren skal håndtere flere klientforbindelser og håndtere klienttilstand.
ASP.NET Core-servere er nødvendige for at betjene applikationen. Serverløse udrulningsscenarier er ikke mulige (f.eks. at levere applikationer via et CDN).
Tutorialen starter:
1. Først opretter du et nyt Blazor App-projekt med vs2019, som vist nedenfor:
2. Opret en ny Razor-komponent med følgende kode:
Vi har brug for SkiaSharp-pakken til at generere base64-captchaen og installere den via nuget:
3. Start projektet, besøg:Hyperlink-login er synlig.
Den genererede html-kode ser sådan ud:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" indhold="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>
<knapklasse="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<divklasse="kollaps">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<spænd klasse="oi oi-hjem" aria-skjult="sandt"></span> Hjem
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<spænd klasse="oi oi-plus" aria-hidden="true"></span> Tæller
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Hent data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Om</a>
</div>
<div class="content px-4">
<h3>Verifikation</h3>
<p>
(Blazor) Et eksempel på, hvordan man viser verifikationskoden og verificerer den.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Forny</button>
<hr>
<div>Skriv tallet i billedet</div>
<form>
<inputtype="tekst" style="padding:5px" />
<button>Tjek</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}->
</app>
<div id="blazor-error-ui">
En undtagelse uden håndtering er opstået. Se browserudviklingsværktøjer for detaljer.
<a href="" klasse="genlad">Genindlæsning</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Prøv at klikke på knappen, knapbegivenhedsudløseren kommunikeres via SignalR, som er baseret på websocket, polling osv., som vist i figuren nedenfor:
Referencelinks:
Hyperlink-login er synlig.
|
Opslået på 07/04/2020 11.15.36
|
|
|
|
Udlejer|
Opslået på 07/04/2020 11.45.47
|
Opslået på 15/11/2022 10.51.42
|
