Blazor er et rammeverk for å bygge interaktive klient-webgrensesnitt ved bruk av .NET:
- Bruk C# i stedet for JavaScript for å lage et rikt, interaktivt brukergrensesnitt.
- Del app-logikk på server- og klientsiden skrevet i .NET.
- Gjengi UI som HTML og CSS for å støtte mange nettlesere, inkludert mobilnettlesere.
Blazor er et webrammeverk designet for å kjøre klientsiden i en nettleser på en WebAssembly-basert .NET-runtime (Blazor WebAssembly) eller serverside i ASP.NET Core (Blazor-server). For enhver administrert modell er app- og komponentmodellene de samme.
Blazor-servere
Bruk Blazor-server-hostingmodellen for å kjøre apper på serveren fra ASP.NET Core-appene.UI-oppdateringer, hendelseshåndtering og JavaScript-kall gjøres gjennomSignalRKoblinger til prosess。
Blazor-serverhostingmodellen tilbyr følgende fordeler:
- Nedlastingsstørrelsen er betydelig mindre enn i Blazor WebAssembly-appen, og appen laster mye raskere.
- Apper kan utnytte serverfunksjonene fullt ut, inkludert bruk av alle .NET Core-kompatible API-er.
- .NET Core på serveren brukes til å kjøre appen, så eksisterende .NET-verktøy som feilsøking fungerer som forventet.
- Tynne klienter støttes. For eksempel er Blazor-serverappen egnet for nettlesere som ikke støtter WebAssembly og for ressursbegrensede enheter.
- Appens .NET/C#-kodebase, som inkluderer appens komponentkode, fungerer ikke på klienten.
Blazor-serverhosting har følgende ulemper:
Latenstiden er vanligvis høyere. Hver brukerinteraksjon involverer et nettverkshopp.
Å jobbe offline er ikke støttet. Hvis klienttilkoblingen feiler, slutter appen å fungere.
Hvis du har flere brukere, er det utfordringer med app-skalerbarhet. Serveren må håndtere flere klientforbindelser og håndtere klienttilstand.
ASP.NET Core-servere kreves for å betjene applikasjonen. Serverløse distribusjonsscenarier er ikke gjennomførbare (f.eks. å levere applikasjoner gjennom et CDN).
Opplæringen starter:
1. Først, opprett et nytt Blazor-appprosjekt med vs2019, som vist nedenfor:
2. Lag en ny Razor-komponent med følgende kode:
Vi trenger SkiaSharp-pakken for å generere base64-captchaen og installere den via nuget:
3. Start prosjektet, besøk:Innloggingen med hyperkoblingen er synlig.
Den genererte html-koden ser slik ut:
<!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" />
<lenke 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>
<knappklasse="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div-klasse="kollaps">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<spenn klasse="oi oi-hjem" aria-skjult="sann"></span> Hjem
</a>
</li>
<li class="nav-item px-3">
<a href="teller" klasse="nav-link">
<spanklasse="oi oi-plus" aria-skjult="sant"></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> 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>Verifisering</h3>
<p>
(Blazor) Et eksempel på hvordan man viser verifiseringskode og verifiserer den.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Forny</button>
<hr>
<div>Skriv inn tallet i bildet</div>
<form>
<inputtype="tekst" style="padding:5px" />
<button>Sjekk</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Et unntak uten håndtering har oppstått. Se nettleserutviklingsverktøy for detaljer.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Prøv å klikke på knappen, knappens hendelsestrigger kommuniseres via SignalR, som er basert på websocket, polling osv., som vist i figuren under:
Referanselenker:
Innloggingen med hyperkoblingen er synlig.
|
Publisert på 07.04.2020 11:15:36
|
|
|
|
Vert|
Publisert på 07.04.2020 11:45:47
|
Publisert på 15.11.2022 10:51:42
|
