架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 229|回复: 1

[ASP.NET] 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-server.png

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

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


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

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

教程开始:

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

blazor.png

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>
        <!--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> 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>
    <!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
    </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、轮询等方式进行数据传输的,如下图:
app.png websocket.png

参考链接:

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





上一篇:反编译出来的xaml文件问题
下一篇:Discuz(DZ) 游客积分充值XML乱码解决方案
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2020-4-7 11:45:47 | 显示全部楼层
有点双向绑定的意思

blazor data.png
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2020-5-31 11:49

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表