架構師_程序員

 找回密碼
 注冊[Register]

QQ登錄

只需一步,快速開始

查看: 337|回復: 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 服務器托管模型具有以下優點:

  • 下載項大小明顯小于 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>
        <!--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、輪詢等方式進行數據傳輸的,如下圖:


參考鏈接:

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





上一篇:反編譯出來的xaml文件問題
下一篇:Discuz(DZ) 游客積分充值XML亂碼解決方案
帖子永久地址: 

架構師_程序員 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與本論壇立場無關
2、本站所有主題由該帖子作者發表,該帖子作者與架構師_程序員享有帖子相關版權
3、其他單位或個人使用、轉載或引用本文時必須同時征得該帖子作者和架構師_程序員的同意
4、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
5、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
6、如本帖侵犯到任何版權問題,請立即告知本站,本站將及時予與刪除并致以最深的歉意
7、架構師_程序員管理員和版主有權不事先通知發貼者而刪除本文

碼農網,只發表在實踐過程中,遇到的技術難題,不誤導他人。
沙發
 樓主| 發表于 2020-4-7 11:45:47 | 只看該作者
有點雙向綁定的意思


碼農網,只發表在實踐過程中,遇到的技術難題,不誤導他人。
您需要登錄后才可以回帖 登錄 | 注冊[Register]

本版積分規則

免責聲明:
碼農網所發布的一切軟件、編程資料或者文章僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦中徹底刪除上述內容。如果您喜歡該程序,請支持正版軟件,購買注冊,得到更好的正版服務。如有侵權請郵件與我們聯系處理。

Mail To:help@itsvse.com

QQ|Archiver|手機版|小黑屋|架構師 ( 魯ICP備14021824號-2 )|網站地圖

GMT+8, 2020-7-11 06:44

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回復 返回頂部 返回列表
捕鸟达人老版