"Blazor" yra interaktyvių kliento žiniatinklio vartotojo sąsajų kūrimo sistema naudojant .NET:
- Naudokite C# vietoj JavaScript, kad sukurtumėte turtingą, interaktyvią vartotojo sąsają.
- Bendrinkite serverio ir kliento programų logiką, parašytą .NET.
- Pateikite vartotojo sąsają kaip HTML ir CSS, kad palaikytumėte daugybę naršyklių, įskaitant mobiliąsias naršykles.
"Blazor" yra žiniatinklio sistema, skirta paleisti kliento pusėje naršyklėje "WebAssembly" pagrindu veikiančioje .NET vykdymo programoje ("Blazor WebAssembly") arba serverio pusėje "ASP.NET Core" ("Blazor" serveryje). Bet kurio valdomo modelio programos ir komponentų modeliai yra vienodi.
Blazor serveriai
Naudokite "Blazor" serverio prieglobos modelį, kad vykdytumėte programas serveryje iš "ASP.NET Core" programų.Vartotojo sąsajos atnaujinimai, įvykių tvarkymas ir "JavaScript" skambučiai atliekami naudojantSignalas RRyšiai su procesu。
"Blazor" serverio prieglobos modelis siūlo šiuos privalumus:
- Atsisiuntimo dydis yra žymiai mažesnis nei "Blazor WebAssembly" programos, o programa įkeliama daug greičiau.
- Programos gali išnaudoti visas serverio galimybes, įskaitant bet kokias su ".NET Core" suderinamas API.
- .NET Core serveryje naudojamas programai paleisti, todėl esami .NET įrankiai, pvz., derinimas, veikia taip, kaip tikėtasi.
- Palaikomi ploni klientai. Pavyzdžiui, "Blazor" serverio programa tinka naršyklėms, kurios nepalaiko "WebAssembly", ir įrenginiams, kuriuose yra ribotų išteklių.
- Programos .NET/C# kodų bazė, kurioje yra programos komponento kodas, neveikia kliente.
"Blazor" serverio priegloba turi šiuos trūkumus:
Delsa paprastai yra didesnė. Kiekviena vartotojo sąveika apima tinklo šuolį.
Darbas neprisijungus nepalaikomas. Jei kliento ryšys nepavyksta, programa nustoja veikti.
Jei turite kelis vartotojus, kyla iššūkių, susijusių su programos mastelio keitimu. Serveris turi valdyti kelis kliento ryšius ir tvarkyti kliento būseną.
ASP.NET Core serveriai reikalingi programai aptarnauti. Diegimo be serverio scenarijai neįmanomi (pvz., programų aptarnavimas per CDN).
Pamoka prasideda:
1. Pirmiausia sukurkite naują "Blazor App" projektą naudodami vs2019, kaip parodyta toliau:
2. Sukurkite naują skustuvo komponentą su šiuo kodu:
Mums reikia "SkiaSharp" paketo, kad sugeneruotume base64 captcha ir įdiegtume jį naudodami nuget:
3. Pradėkite projektą, apsilankykite:Hipersaito prisijungimas matomas.
Sugeneruotas html kodas atrodo taip:
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<base 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 class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Pradžia
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> skaitiklis
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Gauti duomenis
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="viršutinė eilutė px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Apie</a>
</div>
<div class="turinys px-4">
<h3>Patikrinimas</h3>
<p>
(Blazor) Pavyzdys, kaip parodyti patvirtinimo kodą ir jį patvirtinti.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Atnaujinti</button>
<hr>
<div>Įveskite skaičių paveikslėlyje</div>
<form>
<input type="text" style="padding:5px" />
<button>Patikrinkite</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Įvyko neapdorota išimtis. Išsamesnės informacijos ieškokite naršyklės kūrėjų įrankiuose.
<a href="" class="reload">Perkrauti</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Pabandykite spustelėti mygtuką, mygtuko įvykio paleidiklis perduodamas per "SignalR", kuris pagrįstas žiniatinklio lizdu, apklausa ir kt., kaip parodyta paveikslėlyje žemiau:
Nuorodos nuorodos:
Hipersaito prisijungimas matomas.
|
Paskelbta 2020-04-07 11:15:36
|
|
|
|
Savininkas|
Paskelbta 2020-04-07 11:45:47
|
Paskelbta 2022-11-15 10:51:42
|
