[ASP.NET MVC] QR Code 製作與 Base32 編碼應用

[ASP.NET MVC] QR Code 製作與 Base32 編碼應用

今天跟大家展示一個 QR Code 轉換的範例,在畫面上輸入一個值,將值透過 Base 32 編碼,轉成要輸出的網址,然後將此網址轉成 QR Code,顯示在畫面上。

此範例是在 ASP.NET MVC 上面做開發,使用 C# 語法編寫程式碼,在文末有提供範例下載喔,有需要可以自行下載。

QR Code 介紹

QR Code (Quick Response Code),全稱為快速回應碼,是二維條碼的一種。
在過去我們最常用的是一維條碼,我們在賣場買的商品上面,印有直條狀的商品條碼是一維條碼,儲存的資訊量較少,而 QR Code 儲存的資料量就比一維條碼多很多。
QR Code 呈現正方形,常見是黑白兩色,目前最大可儲存的資料量,以字母來儲存最多可存 4,296 個字母。

QR Code 的樣式如下:

QR Code

因為可儲存資料量大,所以已經有不少的行業,都改以 QR Code 做為標準的資料編碼格式。

建立 MVC 範例專案

接下來我會新建一個專案,用程式製作出一個 QR Code。

開啟 Visual Studio 2022 選擇「建立新專案」,專案類型為「ASP.NET Web 應用程式(.NET Framework)」。

建立 MVC 範例專案

輸入專案名稱及儲存位置。

建立 MVC 範例專案

選擇「MVC」類型。

選擇「MVC」類型

完成後即會開啟 MVC 的範本專案,執行「F5」,可以瀏覽 MVC 預設初始畫面。


調整 MVC 範本 – 佈局頁

打開 \Views\Shared\_Layout.cshtml 頁面。

打開 \Views\Shared\_Layout.cshtml 頁面

引用 Vue.js 底層

Vue.js 官方教學找到 CDN 網址。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

@Scripts.Render("~/bundles/bootstrap") 語法下面,加入 Vue.js 底層元件。

引用 Vue.js 底層

修改首頁

我們直接在 MVC 範本的首頁,修改成我們需要的介面。

開啟 \Views\Home\Index.cshtml 程式碼。

開啟 \Views\Home\Index.cshtml 程式碼

打開之後,直接清空原本的程式碼。

Bootstrap 設計介面

接下來放上 Bootstrap 的網頁語法,來展示接下來的操作畫面。

Vue 設定兩個方法 DoUrlEncode()DoEnQRCode() 當執行按鈕時被呼叫。
呼叫的時候,再使用 Ajax 向 Controller 執行動作回應方法。


修改 Controller

修改的檔案為 \Controllers\HomeController.cs,這是 MVC 範本就存在的,我們在此 Controller 內增加新的回應方法。

編寫「產生編碼網址」方法

此段範例主要教學明文轉 Base32 的方法,而 Base32 所產生的編碼結果,可以直接當成網址參數使用,沒有大小寫問題,也沒有符號衝突的問題。

輸出的結果為自身的網域加上 /Home/GetData/?param1=參數,
例如: https://localhost:44301/Home/GetData/?param1=ifbeg
我是導向一個新頁面要讀取 Base32 參數,可以自行修改要導向的網址。

編寫「轉成 QR Code」方法

此方法是將網址轉換成 QR Code 圖檔,可是會用到第三方的類別庫,需要先引用套件。
輸出的結果為圖檔的 URL ,再傳送到 View 顯示圖檔路徑即可。

引用 Zxing.Net 套件

BarcodeWriter 是第三方套件,貼上程式碼時會錯誤發生,VS 有建議可安裝套件解決,在建議選項內有「安裝套件 ‘ZXing.Net’ -> 使用套件管理員安裝」,點擊後會開啟「NuGet 套件管理員」。

安裝套件 ‘ZXing.Net’ -> 使用套件管理員安裝

在頁籤選擇「瀏覽」,可查詢套件,選擇「ZXing.Net」套件後,在右邊有「安裝」功能。

在頁籤選擇「瀏覽」,可查詢套件,選擇「ZXing.Net」套件後,在右邊有「安裝」功能

安裝後,在下方有安裝進度。

在頁籤選擇「瀏覽」,可查詢套件,選擇「ZXing.Net」套件後,在右邊有「安裝」功能

安裝後在錯誤的物件上面停放後,就會有建議動作為「using ZXing;」可引用套件。

建議動作為「using ZXing;」可引用套件

引用後,類別的錯誤即會消失。

其他相關類別也用同樣方法引用套件即可。

引用套件

建立 Model

剛剛在 HomeController 建立的方法,有定義新的參數及回傳類別,這些類別要放在 Model 裡面,
在 Models 目錄按右鍵選「加入」->「類別」。

在 Models 目錄按右鍵選「加入」->「類別」

輸入名稱為「HomeModel」,按「新增」。

輸入名稱為「HomeModel」,按「新增」

然後在「HomeModel」的類別裡面,再加入新的類別。

這新的類別是定義 Controller 與 View 之間傳遞物件。


測試功能

按「F5」執行專案,在「原始明文」輸入資料後,按「產生編碼網址」,就會產生網址。
再按「轉成 QR Code」就會產生此網址的 QR Code。

QR Code 製作與 Base 32 編碼應用

當產生 QR Code 時,會在原始碼的主目錄出現一個圖檔 “qrcode.png”。

原始碼的主目錄出現一個圖檔 “qrcode.png”

此部份是 DoGenQRCode() 方法內決定放在主目錄的,也可以修改想存放的位置。

重點整理

  1. QR Code 將會大量應用在商業行為內
  2. 調整 MVC 佈局頁
  3. 使用 Vue.js 可快速控制頁面
  4. 使用 Base32 將內容轉碼為參數
  5. 使用 Zxing.Net 套件製作 QR Code

範例下載

連結 GitHub 下載範例

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG