Blazor ist ein Framework zum Aufbau interaktiver Client-Web-UIs mit .NET:
- Verwenden Sie C# statt JavaScript, um eine reichhaltige, interaktive Benutzeroberfläche zu erstellen.
- Teilen Sie serverseitige und clientseitige App-Logik, geschrieben in .NET.
- Rendern Sie die Benutzeroberfläche als HTML und CSS, um zahlreiche Browser zu unterstützen, einschließlich mobiler Browser.
Blazor ist ein Webframework, das darauf ausgelegt ist, clientseitig in einem Browser auf einer WebAssembly-basierten .NET-Laufzeit (Blazor WebAssembly) oder serverseitig in ASP.NET Core (Blazor-Server) auszuführen. Für jedes verwaltete Modell sind App- und Komponentenmodelle gleich.
Blazor-Server
Verwenden Sie das Blazor-Server-Hosting-Modell, um Apps auf dem Server von ASP.NET Core-Apps auszuführen.UI-Updates, Ereignisbehandlung und JavaScript-Aufrufe erfolgen überSignalRVerbindungen zum Prozess。
Das Blazor-Server-Hosting-Modell bietet folgende Vorteile:
- Die Downloadgröße ist deutlich kleiner als bei der Blazor WebAssembly-App, und die App lädt viel schneller.
- Apps können die Serverfähigkeiten voll ausnutzen, einschließlich der Nutzung beliebiger .NET Core-kompatibler APIs.
- .NET Core auf dem Server wird verwendet, um die App auszuführen, daher funktionieren bestehende .NET-Tools wie Debugging wie erwartet.
- Thin-Clients werden unterstützt. Zum Beispiel eignet sich die Blazor-Server-App für Browser, die WebAssembly nicht unterstützen, sowie für ressourcenbeschränkte Geräte.
- Der .NET/C#-Code der App, der den Komponentencode der App enthält, funktioniert auf dem Client nicht.
Blazor-Server-Hosting hat folgende Nachteile:
Die Latenz ist in der Regel höher. Jede Benutzerinteraktion beinhaltet einen Netzwerk-Hop.
Offline-Arbeit wird nicht unterstützt. Wenn die Client-Verbindung fehlschlägt, funktioniert die App nicht mehr.
Wenn du mehrere Nutzer hast, gibt es Herausforderungen bei der App-Skalierbarkeit. Der Server muss mehrere Client-Verbindungen verwalten und den Client-Status verwalten.
ASP.NET Core-Server sind erforderlich, um die Anwendung zu bedienen. Serverlose Bereitstellungsszenarien sind nicht machbar (z. B. Anwendungen über ein CDN bereitstellen).
Tutorial beginnt:
1. Erstens, erstelle ein neues Blazor-App-Projekt mit vs2019, wie unten gezeigt:
2. Erstellen Sie eine neue Razor-Komponente mit folgendem Code:
Wir brauchen das SkiaSharp-Paket, um das Base64-Captcha zu generieren und über Nuget zu installieren:
3. Starte das Projekt, besuche:Der Hyperlink-Login ist sichtbar.
Der generierte HTML-Code sieht so aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<metaname="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="sidebar">
<div class="Top-row PL-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span-Klasse="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">
<Klasse spanen="Oi Oi-Home" aria-versteckt="wahr"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<Klasse spanen="oi oi-plus" aria-versteckt="wahr"></span> Zähler
</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-Klasse="Haupt">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Über</a>
</div>
<div class="content px-4">
<h3>Verifikation</h3>
<p>
(Blazor) Ein Beispiel, wie man den Verifizierungscode zeigt und verifiziert.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Erneuern</button>
<hr>
<div>Gib die Zahl im Bild ein</div>
<form>
<Eingabetyp="Text" Stil="Padding:5px" />
<button>prüfen</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Eine unbearbeitete Ausnahme ist eingetreten. Siehe Browser-Entwicklungstools für Details.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Versuchen Sie, auf den Button zu klicken, der Button-Event-Auslöser wird über SignalR kommuniziert, das auf Websocket, Poling usw. basiert, wie in der Abbildung unten gezeigt:
Referenzlinks:
Der Hyperlink-Login ist sichtbar.
|
Veröffentlicht am 07.04.2020 11:15:36
|
|
|
|
Vermieter|
Veröffentlicht am 07.04.2020 11:45:47
|
Veröffentlicht am 15.11.2022 10:51:42
|
