ASP.NET Core view používa Blazorov image captcha

Malý · Zverejnené 7. 4. 2020 11:15:36

Blazor je framework na tvorbu interaktívnych webových používateľských rozhraní pre klientov pomocou .NET:

Použite C# namiesto JavaScriptu na vytvorenie bohatého, interaktívneho používateľského rozhrania.
Zdieľajte logiku aplikácií na serverovej a klientskej strane napísanú v .NET.
Renderujte používateľské rozhranie ako HTML a CSS na podporu viacerých prehliadačov, vrátane mobilných prehliadačov.

Blazor je webový framework navrhnutý na spúšťanie na strane klienta v prehliadači na webAssembly-založenom .NET runtime (Blazor WebAssembly) alebo na serverovej strane v ASP.NET Core (Blazor server). Pre akýkoľvek spravovaný model sú modely aplikácií a komponentov rovnaké.

Blazor servery

Použite model hostingu Blazor servera na spúšťanie aplikácií na serveri z ASP.NET Core aplikácií.Aktualizácie používateľského rozhrania, spracovanie udalostí a JavaScriptové volania prebiehajú prostredníctvomSignalRSpojenia s procesom。

Model hostingu servera Blazor ponúka nasledujúce výhody:

Veľkosť sťahovania je výrazne menšia ako v aplikácii Blazor WebAssembly a aplikácia sa načítava oveľa rýchlejšie.
Aplikácie môžu plne využiť možnosti servera, vrátane použitia akýchkoľvek API kompatibilných s .NET Core.
Na serveri sa používa .NET Core na spustenie aplikácie, takže existujúce .NET nástroje ako ladenie fungujú podľa očakávaní.
Podporované sú tenké klienty. Napríklad aplikácia Blazor server je vhodná pre prehliadače, ktoré nepodporujú WebAssembly, a pre zariadenia s obmedzenými zdrojmi.
.NET/C# kódová základňa aplikácie, ktorá obsahuje komponentný kód aplikácie, na klientovi nefunguje.

Blazor server hosting má nasledujúce nevýhody:

Latencia je zvyčajne vyššia. Každá interakcia používateľa zahŕňa sieťový skok.
Offline práca nie je podporovaná. Ak klientské pripojenie zlyhá, aplikácia prestane fungovať.
Ak máte viacerých používateľov, existujú výzvy v škálovateľnosti aplikácií. Server musí spravovať viacero klientskych pripojení a spravovať stav klienta.
ASP.NET Core servery sú potrebné na obsluhu aplikácie. Scenáre nasadzovania bez servera nie sú uskutočniteľné (napr. poskytovanie aplikácií cez CDN).

Úvod tutoriálu:

1. Najprv vytvorte nový projekt aplikácie Blazor pomocou vs2019, ako je uvedené nižšie:

2. Vytvoriť novú komponentu Razor s nasledujúcim kódom:

Potrebujeme balík SkiaSharp na vygenerovanie base64 captcha a jeho inštaláciu cez nuget:

Prihlásenie je viditeľné.

3. Začnite projekt, navštívte:Prihlásenie na hypertextový odkaz je viditeľné.

Generovaný html kód vyzerá takto:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta meno="viewport" obsah="šírka=šírka zariadenia, počiatočná mierka=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>
      
      <div class="sidebar">
<div class="horný rad pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<tlačidlová trieda="navbar-toggler">
      <span class="navbar-toggler-icon"></span>
</button>
</div>

<div class="kolaps">
<ul class="nav flex-column">
      <li trieda="nav-položka px-3">
         <a href="" class="nav-link">
            <span class="oi oi-home" aria-hidden="true"></span> Home
         </a>
      </li>
      <li trieda="nav-položka px-3">
         <a href="counter" class="nav-link">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
         </a>
      </li>
      <li trieda="nav-položka 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="hlavná">
<div class="horný riadok px-4">
      <a href="https://docs.microsoft.com/aspnet/" target="_blank">O</a> nás
</div>

<div class="obsah px-4">
      <h3>Overenie</h3>

<p>
(Blazor) Ukážka, ako ukázať overovací kód a overiť ho.
</p>

<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Obnova</button>
<hr>
<div>Zadajte číslo na obrázku</div>
<form>
<input type="text" style="padding:5px" />
<button>Skontrolované</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>

</app>

<div id="blazor-error-ui">
         Došlo k nespracovanej výnimke. Podrobnosti nájdete v prehliadačových vývojárskych nástrojoch.

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

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

Skúste kliknúť na tlačidlo, spúšťač udalostí je komunikovaný cez SignalR, ktorý je založený na websockete, pollingu a podobne, ako je znázornené na obrázku nižšie:

Referenčné odkazy:

Prihlásenie na hypertextový odkaz je viditeľné.

Malý · Zverejnené 7. 4. 2020 11:45:47

Prihlásenie je viditeľné.

Znamená to trochu obojstranného viazania

HHB353897079 · Zverejnené 15. 11. 2022 10:51:42

To však neznamená, že táto stránka súhlasí s jej názormi a je zodpovedná za jej autenticitu

Malý · Zverejnené 12. 10. 2023 20:02:48

Oficiálne výsledky benchmarku JS webového frameworku

Prihlásenie na hypertextový odkaz je viditeľné.
Prihlásenie na hypertextový odkaz je viditeľné.

GitHub adresa:Prihlásenie na hypertextový odkaz je viditeľné.

[ASP.NET] ASP.NET Core view používa Blazorov image captcha

Súvisiace príspevky

Zobrazené sekcie