Blazor is een framework voor het bouwen van interactieve client webinterfaces met behulp van .NET:
- Gebruik C# in plaats van JavaScript om een rijke, interactieve gebruikersinterface te creëren.
- Deel server- en client-side app-logica geschreven in .NET.
- Render de UI als HTML en CSS om talrijke browsers te ondersteunen, waaronder mobiele browsers.
Blazor is een webframework dat is ontworpen om client-side te draaien in een browser op een WebAssembly-gebaseerde .NET-runtime (Blazor WebAssembly) of server-side in ASP.NET Core (Blazor-server). Voor elk beheerd model zijn de app- en componentmodellen hetzelfde.
Blazor-servers
Gebruik het Blazor serverhostingmodel om apps op de server uit te voeren vanuit ASP.NET Core-apps.UI-updates, event handling en JavaScript-aanroepen worden uitgevoerd viaSignalRVerbindingen met het proces。
Het Blazor-serverhostingmodel biedt de volgende voordelen:
- De downloadgrootte is aanzienlijk kleiner dan die van de Blazor WebAssembly-app, en de app laadt veel sneller.
- Apps kunnen volledig gebruikmaken van servermogelijkheden, inclusief het gebruik van alle .NET Core-compatibele API's.
- .NET Core op de server wordt gebruikt om de app uit te voeren, dus bestaande .NET-tools zoals debugging werken zoals verwacht.
- Thin clients worden ondersteund. De Blazor-serverapp is bijvoorbeeld geschikt voor browsers die WebAssembly niet ondersteunen en voor apparaten met beperkte middelen.
- De .NET/C#-codebase van de app, die de componentcode van de app bevat, werkt niet op de client.
Blazor serverhosting heeft de volgende nadelen:
De latentie is meestal hoger. Elke gebruikersinteractie omvat een netwerksprong.
Offline werken wordt niet ondersteund. Als de clientverbinding faalt, stopt de app met werken.
Als je meerdere gebruikers hebt, zijn er uitdagingen bij de schaalbaarheid van apps. De server moet meerdere clientverbindingen beheren en de clientstatus afhandelen.
ASP.NET Core-servers zijn vereist om de applicatie te bedienen. Serverless deploymentscenario's zijn niet haalbaar (bijvoorbeeld applicaties serveren via een CDN).
De tutorial begint:
1. Maak eerst een nieuw Blazor App-project aan met vs2019, zoals hieronder getoond:
2. Maak een nieuwe Razor-component aan met de volgende code:
We hebben het SkiaSharp-pakket nodig om de base64-captcha te genereren en via nuget te installeren:
3. Start het project, bezoek:De hyperlink-login is zichtbaar.
De gegenereerde html-code ziet er als volgt uit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta naam="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<basis 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="zijbalk">
<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>
<divklasse="instorten">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span klas="oi oi-thuis" aria-verborgen="waar"></span> Thuis
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Teller
</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">Over</a>
</div>
<div class="content px-4">
<h3>Verificatie</h3>
<p>
(Blazor) Een voorbeeld van hoe je een verificatiecode kunt tonen en verifiëren.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Vernieuwen</button>
<hr>
<div>Typ het nummer in de afbeelding</div>
<form>
<invoertype="tekst" stijl="padding:5px" />
<button>Check</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Er is een niet-afgehandelde uitzondering opgetreden. Zie de ontwikkeltools van browsers voor details.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Probeer op de knop te klikken, de trigger voor het knopevent wordt gecommuniceerd via SignalR, dat gebaseerd is op websocket, polling, enzovoort, zoals te zien is in de onderstaande figuur:
Referentielinks:
De hyperlink-login is zichtbaar.
|
Geplaatst op 07-04-2020 11:15:36
|
|
|
|
Huisbaas|
Geplaatst op 07-04-2020 11:45:47
|
Geplaatst op 15-11-2022 10:51:42
|
