ASP.NET Osnovni pogled uporablja Blazorjev slikovni captcha

Mala drhal · Objavljeno na 7. 04. 2020 11:15:36

Blazor je ogrodje za izdelavo interaktivnih spletnih uporabniških vmesnikov za odjemalce z uporabo .NET:

Uporabite C# namesto JavaScripta za ustvarjanje bogatega, interaktivnega uporabniškega vmesnika.
Delite logiko aplikacij na strežniški in odjemalski strani, napisano v .NET.
Uporabniški vmesnik upodablja kot HTML in CSS za podporo številnim brskalnikom, vključno z mobilnimi brskalniki.

Blazor je spletno ogrodje, zasnovano za delovanje na strani odjemalca v brskalniku na WebAssembly-osnovanem .NET runtime (Blazor WebAssembly) ali na strežniški strani v ASP.NET Core (Blazor strežnik). Za vsak upravljani model sta aplikacija in komponentni model enaka.

Blazor strežniki

Uporabite model gostovanja strežnika Blazor za izvajanje aplikacij na strežniku iz ASP.NET Core aplikacij.Posodobitve uporabniškega vmesnika, upravljanje dogodkov in JavaScript klici potekajo prekoSignalRpovezave s procesom。

Model gostovanja strežnikov Blazor ponuja naslednje prednosti:

Velikost prenosa je bistveno manjša kot pri aplikaciji Blazor WebAssembly, aplikacija pa se naloži veliko hitreje.
Aplikacije lahko v celoti izkoristijo strežniške zmogljivosti, vključno z uporabo vseh .NET Core združljivih API-jev.
.NET Core na strežniku se uporablja za zagon aplikacije, zato obstoječa .NET orodja, kot je odpravljanje napak, delujejo kot pričakovano.
Podprti so tanki odjemalci. Na primer, strežniška aplikacija Blazor je primerna za brskalnike, ki ne podpirajo WebAssembly, in za naprave z omejenimi viri.
Koda aplikacije .NET/C#, ki vključuje komponentno kodo aplikacije, na odjemalcu ne deluje.

Blazor strežniško gostovanje ima naslednje slabosti:

Zakasnitev je običajno višja. Vsaka uporabniška interakcija vključuje omrežni skok.
Delo brez povezave ni podprto. Če povezava odjemalca odpove, aplikacija preneha delovati.
Če imate več uporabnikov, obstajajo izzivi glede razširljivosti aplikacij. Strežnik mora upravljati več povezav odjemalcev in obvladovati stanje odjemalca.
ASP.NET Core strežniki so potrebni za storitev aplikacije. Scenariji uvajanja brez strežnika niso izvedljivi (npr. strežba aplikacij prek CDN).

Uvodni tečaj se začne:

1. Najprej ustvarite nov projekt aplikacije Blazor z uporabo vs2019, kot je prikazano spodaj:

2. Ustvarite novo komponento Razor z naslednjo kodo:

Potrebujemo paket SkiaSharp, da generira base64 captcha in ga namesti preko nugeta:

Prijava je vidna.

3. Začni projekt, obišči:Prijava do hiperpovezave je vidna.

Generirana html koda izgleda takole:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta ime="viewport" vsebina="width=size-width, initial-=1.0" />
<title>BlazorApp1</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="slog" />
</head>
<body>
<app>
      
      <div class="stranska vrstica">
<div class="zgornja vrsta pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<gumbni razred="navbar-toggler">
      <span class="navbar-toggler-icon"></span>
</button>
</div>

<div class="collapse">
<ul class="nav flex-column">
      <li razred="nav-item px-3">
         <a href="" class="nav-link">
            <span class="oi oi-home" aria-hidden="true"></span> Home
         </a>
      </li>
      <li razred="nav-item px-3">
         <a href="counter" class="nav-link">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
         </a>
      </li>
      <li razred="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="zgornja vrstica px-4">
      <a href="https://docs.microsoft.com/aspnet/" cilj="_blank">O</a> nas
</div>

<div class="vsebina px-4">
      <h3>Preverjanje</h3>

<p>
(Blazor) Vzorec, kako prikazati verifikacijsko kodo in jo preveriti.
</p>

<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Obnova</button>
<hr>
<div>Vnesite številko v sliko</div>
<form>
<vhodni tip="text" stil="padding:5px" />
<button>Preverjeno</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>

</app>

<div id="blazor-error-ui">
         Prišlo je do neobdelane izjeme. Podrobnosti najdete v orodjih za razvoj brskalnika.

      <a href="" class="reload">Reload</a>
</div>

<script src="_framework/blazor.server.js"></script>
</body>
</html>

Poskusite klikniti na gumb, sprožilec dogodka gumba se sporoči prek SignalR, ki temelji na websocketu, anketiranju itd., kot je prikazano na spodnji sliki:

Referenčne povezave:

Prijava do hiperpovezave je vidna.

Mala drhal · Objavljeno na 7. 04. 2020 11:45:47

Prijava je vidna.

Pomeni malo dvosmerne vezave

HHB353897079 · Objavljeno na 15. 11. 2022 10:51:42

Vendar to ne pomeni, da se ta stran strinja z njenimi stališči in da je odgovorna za njeno pristnost

Mala drhal · Objavljeno na 12. 10. 2023 20:02:48

Uradni rezultati testa spletnih ogrodij JS

Prijava do hiperpovezave je vidna.
Prijava do hiperpovezave je vidna.

GitHub naslov:Prijava do hiperpovezave je vidna.

[ASP.NET] ASP.NET Osnovni pogled uporablja Blazorjev slikovni captcha

Sorodne objave

Ogledi odsekov