ASP.NET Core 视图使用 Blazor 之图片验证码

小渣渣 · 发表于 2020-4-7 11:15:36

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
共享使用 .NET 编写的服务器端和客户端应用逻辑。
将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

Blazor 是一种 Web 框架，专用于在基于 WebAssembly 的 .NET 运行时 (Blazor WebAssembly) 上的浏览器中运行客户端，或在 ASP.NET Core（Blazor 服务器）中运行服务器端。对于任意托管模型，应用和组件模型都相同。

Blazor 服务器

使用 Blazor 服务器托管模型可从 ASP.NET Core 应用中在服务器上执行应用。 UI 更新、事件处理和 JavaScript 调用是通过 SignalR 连接进行处理。

Blazor 服务器托管模型具有以下优点：

下载项大小明显小于 Blazor WebAssembly 应用，且应用加载速度快得多。
应用可充分利用服务器功能，包括使用任何与 .NET Core 兼容的 API。
服务器上的 .NET Core 用于运行应用，因此调试等现有 .NET 工具可按预期正常工作。
支持瘦客户端。例如，Blazor 服务器应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。
应用的 .NET/C# 代码库（其中包括应用的组件代码）不适用于客户端。

Blazor 服务器托管具有以下缺点：

通常延迟较高。每次用户交互都涉及到网络跃点。
不支持脱机工作。如果客户端连接失败，应用会停止工作。
如果具有多名用户，则应用扩缩性存在挑战。服务器必须管理多个客户端连接并处理客户端状态。
需要 ASP.NET Core 服务器为应用提供服务。无服务器部署方案不可行（例如通过 CDN 为应用提供服务的方案）。

教程开始：

1.首先，使用vs2019新建一个Blazor App项目，如下图：

2.新建一个Razor组件，代码如下：

我们需要SkiaSharp包，来生成base64验证码，通过nuget安装：

登录可见。

3.启动项目，访问：http://localhost:55411/verification

生成的html代码如下：

<!DOCTYPE html>
<html lang="en">
<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>
      
      <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> Home
         </a>
      </li>
      <li class="nav-item px-3">
         <a href="counter" class="nav-link">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
         </a>
      </li>
      <li class="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="top-row px-4">
      <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>

<div class="content px-4">
      <h3>Verification</h3>

<p>
(Blazor) A sample for how to show verification code and verify it.
</p>

<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Renew</button>
<hr>
<div>Type the number in image</div>
<form>
<input type="text" style="padding:5px" />
<button>Check</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>

</app>

<div id="blazor-error-ui">
         An unhandled exception has occurred. See browser dev tools for details.

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

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

尝试点击按钮，按钮的事件触发是通过SignalR进行通信，SignalR 是基于websocket、轮询等方式进行数据传输的，如下图：

参考链接：

https://docs.microsoft.com/zh-cn/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1

小渣渣 · 发表于 2020-4-7 11:45:47

登录可见。

有点双向绑定的意思

hhb353897079 · 发表于 2022-11-15 10:51:42

，但并不代表本站赞同其观点和对其真实性负责

小渣渣 · 发表于 2023-10-12 20:02:48

js web框架基准测试的官方结果

https://krausest.github.io/js-framework-benchmark/
https://krausest.github.io/js-framework-benchmark/2023/table_chrome_117.0.5938.62.html

GitHub 地址：https://github.com/krausest/js-framework-benchmark

QQ截图20231012200236.jpg

		自动登录	找回密码
密码			注册[Register]

[ASP.NET] ASP.NET Core 视图使用 Blazor 之图片验证码

相关帖子