ASP.NET Core-näkymä käyttää Blazorin kuvaa captcha

Pikku roisto · Julkaistu 7.4.2020 11.15.36

Blazor on kehys interaktiivisten asiakasverkko-UI:iden rakentamiseen .NET:n avulla:

Käytä C#:ää JavaScriptin sijaan luodaksesi rikkaan, interaktiivisen käyttöliittymän.
Jaa palvelin- ja asiakaspuolen sovelluslogiikkaa, joka on kirjoitettu .NET-kielellä.
Renderöi käyttöliittymä HTML:nä ja CSS:nä tukemaan lukuisia selaimia, mukaan lukien mobiiliselaimet.

Blazor on web-kehys, joka on suunniteltu ajamaan asiakaspuolen selaimessa WebAssembly-pohjaisella .NET-ajonaikaisella (Blazor WebAssembly) tai palvelinpuolella ASP.NET Coressa (Blazor-palvelin). Missä tahansa hallitussa mallissa sovellus- ja komponenttimallit ovat samat.

Blazor-palvelimet

Käytä Blazor-palvelimen isännöintimallia suorittaaksesi sovelluksia palvelimella ASP.NET Core-sovelluksista.Käyttöliittymäpäivitykset, tapahtumien käsittely ja JavaScript-kutsut tehdäänSignalRYhteydet prosessiin。

Blazor-palvelinten isännöintimalli tarjoaa seuraavat edut:

Latauskoko on huomattavasti pienempi kuin Blazor WebAssembly -sovelluksessa, ja sovellus latautuu paljon nopeammin.
Sovellukset voivat hyödyntää palvelinominaisuuksia täysimääräisesti, mukaan lukien minkä tahansa .NET Core -yhteensopivan rajapinnan käyttö.
.NET Core palvelimella toimii sovelluksen ajamiseen, joten olemassa olevat .NET-työkalut, kuten debuggaus, toimivat odotetusti.
Ohuet asiakkaat ovat tuettuja. Esimerkiksi Blazor-palvelinsovellus sopii selaimille, jotka eivät tue WebAssemblyä, sekä resurssirajoitetuille laitteille.
Sovelluksen .NET/C#-koodipohja, joka sisältää sovelluksen komponenttikoodin, ei toimi asiakkaalla.

Blazor-palvelimen isännöintiin liittyy seuraavat haitat:

Viive on yleensä korkeampi. Jokainen käyttäjävuorovaikutus sisältää verkkohypyn.
Offline-työskentely ei ole tuettua. Jos asiakasyhteys epäonnistuu, sovellus lakkaa toimimasta.
Jos käyttäjiä on useita, sovellusten skaalautuvuudessa on haasteita. Palvelimen on hallittava useita asiakasyhteyksiä ja käsiteltävä asiakastilaa.
ASP.NET Ydinpalvelimet ovat tarpeen sovelluksen palvelemiseksi. Palvelimettomat käyttöönoton skenaariot eivät ole mahdollisia (esim. sovellusten palveleminen CDN:n kautta).

Opetus alkaa:

1. Luo ensin uusi Blazor-sovellusprojekti käyttäen vs2019, kuten alla on esitetty:

2. Luo uusi Razor-komponentti seuraavalla koodilla:

Tarvitsemme SkiaSharp-paketin luodaksemme base64 captchan ja asentaaksemme sen nugetin kautta:

Kirjautuminen näkyy.

3. Aloita projekti, vieraile:Hyperlinkin kirjautuminen on näkyvissä.

Generoitu html-koodi näyttää tältä:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<kanta href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="tyylilehti" />
</head>
<body>
<app>
      
      <div class="sivupalkki">
<div-luokka="ylärivin PL-4 navigointipalkki-dark">
<a class="navbar-merkki" href>BlazorApp1</a>
<button-class="navbar-toggler">
      <span class="navbar-kytkin-ikoni"></span>
</button>
</div>

<div class="collapse">
<ul class="nav flex-column">
      <li-luokka="navigointikohde px-3">
         <a href="" luokka="nav-link">
            <span class="oi oi-home" aria-hidden="true"></span> Home
         </a>
      </li>
      <li-luokka="navigointikohde px-3">
         <a href="counter" class="nav-link">
            <span class="oi oi-plus" aria-hidden="true"></span> Laskuri
         </a>
      </li>
      <li-luokka="navigointikohde px-3">
         <a href="fetchdata" class="nav-link">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Hae data
         </a>
      </li>
</ul>
</div>
</div>

<div class="main">
<div class="ylärivi px-4">
      <a href="https://docs.microsoft.com/aspnet/" kohde="_blank">Tietoa</a>
</div>

<div class="sisältö px-4">
      <h3>Vahvistus</h3>

<p>
(Blazor) Esimerkki siitä, miten näyttää varmennuskoodi ja varmistaa se.
</p>

<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Uusi</button>
<hr>
<div>Kirjoita luku kuvaan</div>
<form>
<input type="text" style="padding:5px" />
<button>Tarkista</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>

</app>

<div id="blazor-error-ui">
         Käsittelemätön poikkeus on tapahtunut. Katso selaimen kehitystyökalut lisätietoja varten.

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

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

Kokeile klikata painiketta, painikkeen tapahtuman laukaisu välittyy SignalR:n kautta, joka perustuu websocketiin, kyselyihin jne., kuten alla olevassa kuvassa näkyy:

Viitelinkit:

Hyperlinkin kirjautuminen on näkyvissä.

Pikku roisto · Julkaistu 7.4.2020 11.45.47

Kirjautuminen näkyy.

Se tarkoittaa hieman kaksisuuntaista sitomista

hhb353897079 · Julkaistu 15.11.2022 10.51.42

Se ei kuitenkaan tarkoita, että tämä sivusto olisi samaa mieltä sen näkemyksistä ja olisi vastuussa sen aitoudesta

Pikku roisto · Julkaistu 12.10.2023 20.02.48

JS Web Frameworkin viralliset tulokset

Hyperlinkin kirjautuminen on näkyvissä.
Hyperlinkin kirjautuminen on näkyvissä.

GitHub-osoite:Hyperlinkin kirjautuminen on näkyvissä.

[ASP.NET] ASP.NET Core-näkymä käyttää Blazorin kuvaa captcha

Aiheeseen liittyvät julkaisut

Katsotut osuudet