Blazor on raamistik interaktiivsete kliendi veebiliideste loomiseks, kasutades .NET-i:
- Kasuta C#-i JavaScripti asemel, et luua rikkalik ja interaktiivne kasutajaliides.
- Jaga serveri- ja kliendipoolset rakendusloogikat, mis on kirjutatud .NET-is.
- Renderda kasutajaliides HTML-ina ja CSS-ina, et toetada mitmeid brausereid, sealhulgas mobiilibrausereid.
Blazor on veebiraamistik, mis on loodud jooksutama kliendipoolselt brauseris WebAssembly-põhisel .NET käitusajal (Blazor WebAssembly) või serveripoolsel ASP.NET Core'is (Blazor server). Iga hallatud mudeli puhul on rakenduse ja komponentide mudelid samad.
Blazor serverid
Kasuta Blazor serveri hostimise mudelit, et käivitada rakendusi serveris ASP.NET Core rakendustest.Kasutajaliidese uuendused, sündmuste käsitlemine ja JavaScripti kutsed tehakse läbiSignalRÜhendused protsessiga。
Blazor serveri majutusmudel pakub järgmisi eeliseid:
- Allalaadimismaht on oluliselt väiksem kui Blazor WebAssembly rakendusel ning rakendus laadib palju kiiremini.
- Rakendused saavad täielikult kasutada serveri võimalusi, sealhulgas kasutada mistahes .NET Core-ühilduvaid API-sid.
- Rakenduse käivitamiseks kasutatakse serveris olevat .NET Core'i, seega töötavad olemasolevad .NET tööriistad nagu silumine ootuspäraselt.
- Õhukesed kliendid on toetatud. Näiteks sobib Blazor serveri rakendus brauseritele, mis WebAssembly't ei toeta, ning ressursipiiratud seadmetele.
- Rakenduse .NET/C# koodibaas, mis sisaldab rakenduse komponendikoodi, ei tööta kliendil.
Blazor serveri majutusel on järgmised puudused:
Latentsus on tavaliselt suurem. Iga kasutaja suhtlus hõlmab võrgu hüpet.
Võrguühenduseta töötamine ei ole toetatud. Kui kliendiühendus ebaõnnestub, lakkab rakendus töötamast.
Kui sul on mitu kasutajat, on rakenduse skaleeritavuses väljakutseid. Server peab haldama mitut kliendiühendust ja haldama kliendiolekut.
ASP.NET Rakenduse teenindamiseks on vaja põhiservereid. Serverita juurutusstsenaariumid ei ole teostatavad (nt rakenduste teenindamine CDN-i kaudu).
Õpetus algab:
1. Esiteks loo uus Blazor rakenduse projekt vs2019 abil, nagu allpool näidatud:
2. Loo uus Razori komponent järgmise koodiga:
Meil on vaja SkiaSharp paketti, et genereerida base64 captcha ja paigaldada see nugeti kaudu:
3. Alusta projekti, külasta:Hüperlingi sisselogimine on nähtav.
Genereeritud html-kood näeb välja selline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<baas href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stiilileht" />
</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="ülemine rea PL-4 navriba navbar-dark">
<a klass="navbar-bränd" href>BlazorApp1</a>
<button class="navbar-lüliti">
<span klass="navbar-lüliti-ikoon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li klass="nav-item px-3">
<a href="" klass="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li klass="nav-item px-3">
<a href="loendur" klass="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Loendur
</a>
</li>
<li klass="nav-item px-3">
<a href="fetchdata" klass="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Andmete toomine
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="ülemine rea px-4">
<a href="https://docs.microsoft.com/aspnet/" sihtmärk="_blank">Kohta</a>
</div>
<div class="content px-4">
<h3>Kinnitamine</h3>
<p>
(Blazor) Näidis, kuidas näidata verifitseerimiskoodi ja seda kinnitada.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Uuenda</button>
<hr>
<div>Sisesta number pildile</div>
<form>
<input type="text" style="padding:5px" />
<button>Kontroll</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
On toimunud lahendamata erand. Vaata brauseri arendustööriistu täpsemalt.
<a href="" class="reload">Reload</a>
</div>
<skript src="_framework/blazor.server.js"></script>
</body>
</html>
Proovi nuppu vajutada, nupu sündmuse käivitaja edastatakse SignalR-i kaudu, mis põhineb websocketil, küsitlustel jne, nagu alloleval joonisel näidatud:
Viitelingid:
Hüperlingi sisselogimine on nähtav.
|
Postitatud 07.04.2020 11:15:36
|
|
|
|
Üürileandja|
Postitatud 07.04.2020 11:45:47
|
Postitatud 15.11.2022 10:51:42
|
