Blazor är ett ramverk för att bygga interaktiva klientwebbgränssnitt med hjälp av .NET:
- Använd C# istället för JavaScript för att skapa ett rikt, interaktivt användargränssnitt.
- Dela server- och klientsidans applogik skriven i .NET.
- Rendera UI som HTML och CSS för att stödja många webbläsare, inklusive mobila webbläsare.
Blazor är ett webbramverk utformat för att köras klient-sidan i en webbläsare på en WebAssembly-baserad .NET-runtime (Blazor WebAssembly) eller server-sida i ASP.NET Core (Blazor-server). För alla hanterade modeller är app- och komponentmodellerna desamma.
Blazor-servrar
Använd Blazor-servervärdmodellen för att köra appar på servern från ASP.NET Core-appar.UI-uppdateringar, händelsehantering och JavaScript-anrop görs viaSignalRKopplingar till processen。
Blazor-servervärdmodellen erbjuder följande fördelar:
- Nedladdningsstorleken är betydligt mindre än i Blazor WebAssembly-appen, och appen laddar mycket snabbare.
- Appar kan utnyttja serverfunktioner fullt ut, inklusive att använda alla .NET Core-kompatibla API:er.
- .NET Core på servern används för att köra appen, så befintliga .NET-verktyg som felsökning fungerar som förväntat.
- Tunna klienter stöds. Till exempel är Blazor-serverappen lämplig för webbläsare som inte stödjer WebAssembly och för resursbegränsade enheter.
- Appens .NET/C#-kodbas, som inkluderar appens komponentkod, fungerar inte på klienten.
Blazor-serverhosting har följande nackdelar:
Latensen är vanligtvis högre. Varje användarinteraktion involverar ett nätverkshopp.
Att arbeta offline stöds inte. Om klientanslutningen misslyckas slutar appen fungera.
Om du har flera användare finns det utmaningar med app-skalbarheten. Servern måste hantera flera klientanslutningar och hantera klientstatus.
ASP.NET Core-servrar krävs för att hantera applikationen. Serverlösa distributionsscenarier är inte genomförbara (t.ex. att leverera applikationer via ett CDN).
Handledningen börjar:
1. Skapa först ett nytt Blazor-appprojekt med vs2019, som visas nedan:
2. Skapa en ny Razor-komponent med följande kod:
Vi behöver SkiaSharp-paketet för att generera base64-captchan och installera den via nuget:
3. Starta projektet, besök:Inloggningen med hyperlänken är synlig.
Den genererade html-koden ser ut så här:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<metanamn="viewport" innehåll="bredd=enhetsbredd, initialskala=1,0" />
<title>BlazorApp1</title>
<bas href="/" />
<länk rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<länk 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="sidofält">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<knappklass="navbar-toggler">
<spanklass="navbar-toggler-icon"></span>
</button>
</div>
<divisionsklass="kollaps">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<spanklass="oi oi-hem" aria-dolden="sann"></span> Hem
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<spanklass="oi oi-plus" aria-dolden="sann"></span> Räknare
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Hämta 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>Verifiering</h3>
<p>
(Blazor) Ett exempel på hur man visar verifieringskoden och verifierar den.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Förnya</button>
<hr>
<div>Skriv in numret i bilden</div>
<form>
<inmatningstyp="text" stil="padding:5px" />
<button>Check</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Ett ohanterat undantag har inträffat. Se webbläsarutvecklingsverktyg för detaljer.
<a href="" klass="omladdning">Ladda om</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Försök klicka på knappen, knapphändelseutlösaren kommuniceras via SignalR, som baseras på websocket, polling med mera, som visas i figuren nedan:
Referenslänkar:
Inloggningen med hyperlänken är synlig.
|
Publicerad på 2020-04-07 11:15:36
|
|
|
|
Hyresvärd|
Publicerad på 2020-04-07 11:45:47
|
Publicerad på 2022-11-15 10:51:42
|
