A Blazor egy keretrendszer interaktív kliens webfelületek építésére .NET használatával:
- Használj C#-ot JavaScript helyett, hogy gazdag, interaktív felhasználói felületet hozz létre.
- Szerveroldali és kliensoldali alkalmazáslogika megosztása .NET nyelven írt.
- Rendereld a UI-t HTML és CSS formátumban, hogy számos böngészőt, beleértve a mobilböngészőket is támogassa.
A Blazor egy webkeretrendszer, amelyet arra terveztek, hogy kliensoldali futtatást hajtson végre böngészőben WebAssembly-alapú .NET futásidőn (Blazor WebAssembly) vagy szerveroldalon ASP.NET Core (Blazor szerver) rendszeren. Bármely menedzselt modellnél az alkalmazás és a komponens modellek ugyanazok.
Blazor szerverek
Használd a Blazor szerver hosztolási modellt ASP.NET Core alkalmazásokból a szerveren alkalmazások végrehajtásához.Felhasználói felület frissítések, eseménykezelés és JavaScript hívások aSignalRKapcsolatok a folyamathoz。
A Blazor szerver hosztolási modellje a következő előnyöket kínálja:
- A letöltés mérete jelentősen kisebb, mint a Blazor WebAssembly alkalmazásé, és az alkalmazás sokkal gyorsabban töltődik be.
- Az alkalmazások teljes mértékben kihasználhatják a szerver lehetőségeit, beleértve bármely .NET Core-kompatibilis API-t is.
- A szerveren a .NET Core futatja az alkalmazást, így a meglévő .NET eszközök, mint a hibakeresés, a várakozásoknak megfelelően működnek.
- A vékony kliensek támogatottak. Például a Blazor szerveralkalmazás alkalmas olyan böngészőkhöz, amelyek nem támogatják a WebAssembly-t, illetve erőforrás-korlátozott eszközökhöz.
- Az alkalmazás .NET/C# kódbázisa, amely tartalmazza az alkalmazás komponens kódját, nem működik a kliensen.
A Blazor szerver hosztegete a következő hátrányokkal rendelkezik:
A késleltetés általában magasabb. Minden felhasználói interakció hálózati ugrást igényel.
Offline munkavégzés nem támogatott. Ha a klienskapcsolat meghibásodik, az alkalmazás leáll a működéssel.
Ha több felhasználód van, kihívásokkal járnak az alkalmazások skálázhatósága terén. A szervernek több klienskapcsolatot kell kezelnie és kezelnie kell az ügyfélállapotot.
ASP.NET Magszerverek szükségesek az alkalmazás kiszolgálásához. Szerver nélküli telepítési forgatókönyvek nem megvalósíthatók (például alkalmazások kiszolgálása CDN keresztül).
A tutorial kezdete:
1. Először hozz létre egy új Blazor alkalmazásprojektet a vs2019 használatával, ahogy az alábbiakban látható:
2. Hozz létre egy új Razor komponenst a következő kóddal:
Szükségünk van a SkiaSharp csomagra, hogy létrehozzuk a base64 captcha-t és telepítsük nuget-en keresztül:
3. Kezdje el a projektet, látogasson el alábbi:A hiperlink bejelentkezés látható.
A generált html kód így néz ki:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<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="felső sorban pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-kapcsoló-ikon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="navigációs tárgy px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="navigációs tárgy px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Számláló
</a>
</li>
<li class="navigációs tárgy px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Adat keresése
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" cél="_blank"> Róla</a>
</div>
<div class="content px-4">
<h3>Ellenőrzés</h3>
<p>
(Blazor) Egy példa arra, hogyan lehet igazolni a verifikációs kódot és annak igazolását.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Megújítás</button>
<hr>
<div>Írja be a számot a képen</div>
<form>
<input type="text" style="padding:5px" />
<button>Megvan</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Kezeletlen kivétel történt. A részletekért lásd a böngészőfejlesztő eszközöket.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Próbáld meg rákattintani a gombra, az esemény kiváltó gomb a SignalR-en keresztül kommunikál, amely websocketen, felméréseken stb. alapul, ahogy az alábbi ábrán látható:
Hivatkozások:
A hiperlink bejelentkezés látható.
|
Közzétéve 2020. 04. 07. 11:15:36
|
|
|
|
Háziúr|
Közzétéve 2020. 04. 07. 11:45:47
|
Közzétéve 2022. 11. 15. 10:51:42
|
