ASP.NET MVC - Visual Baisc QRCode擴充方法

以下範例程式修改於阿源哥哥「使用ASP.NET MVC 3產生二維條碼」一文，除將原文之C# Code轉換為Visual Basic Code，還進行

• alt屬性定義為必填
• 更完整的註解說明

以產生更符合 SEO 的 HTML img 標籤。相關說明都寫在程式註解中，就不在多做解釋。

QRCodeExtension.vb - Visual Baisc QRCode擴充方法

Imports System.Runtime.CompilerServices
Imports System.ComponentModel

Public Module QRCodeExtension

    ''' <summary>
    ''' 透過 Google 提供的 chart 服務，產生對應的 img QRCode標籤。
    ''' </summary>
    ''' <param name="helper">擴充方法</param>
    ''' <param name="data">要產生QRCode的字串</param>
    ''' <param name="alt">QRCode說明文字</param>
    ''' <param name="size">大小(px)，預設 80px*80px</param>
    ''' <param name="margin">留白(px)，預設 4px</param>
    ''' <param name="errorCorrectionLevel">回復等級，預設 L</param>
    ''' <param name="htmlAttributes">其他html屬性，預設 Nothing</param>
    ''' <returns>回傳 img 標籤</returns>
    <Extension()>
    Public Function QRCode(helper As HtmlHelper,
                           data As String,
                           alt As String,
                           Optional size As Integer = 80,
                           Optional margin As Integer = 4,
                           Optional errorCorrectionLevel As QRCodeErrorCorrectionLevel = QRCodeErrorCorrectionLevel.Low,
                           Optional htmlAttributes As Object = Nothing) As MvcHtmlString

        ' 錯誤處理
        If String.IsNullOrEmpty(data) Then
            Throw New ArgumentNullException("data", "不得空白.")
        End If

        If size < 1 Then
            Throw New ArgumentOutOfRangeException("size", size, "必須大於零.")
        End If

        If margin < 0 Then
            Throw New ArgumentOutOfRangeException("margin", margin, "必須大於或等於零.")
        End If

        If Not [Enum].IsDefined(GetType(QRCodeErrorCorrectionLevel), errorCorrectionLevel) Then
            ' 需 Imports System.ComponentModel 才會有 InvalidEnumArgumentException
            Throw New InvalidEnumArgumentException("errorCorrectionLevel",
                                                   CType(errorCorrectionLevel, Integer),
                                                   GetType(QRCodeErrorCorrectionLevel)
                                                   )
        End If

        ' 使用 google 的 chart 服務
        ' 參數參考：http://code.google.com/intl/zh-TW/apis/chart/infographics/docs/qr_codes.html
        Dim url As String = String.Format(
                                "http://chart.apis.google.com/chart?cht=qr&chld={2}|{3}&chs={0}x{0}&chl={1}",
                                size,
                                HttpUtility.UrlEncode(data),
                                errorCorrectionLevel.ToString()(0),
                                margin)

        ' 產生img Tag
        Dim tag As New TagBuilder("img")

        tag.MergeAttribute("src", url)
        tag.MergeAttribute("alt", alt)
        tag.MergeAttribute("title", alt)

        ' width, height 兩個屬性，可加可不加，不影響產出 QRCode 結果。
        tag.MergeAttribute("width", size.ToString())
        tag.MergeAttribute("height", size.ToString())

        If htmlAttributes IsNot Nothing Then
            tag.MergeAttributes(New RouteValueDictionary(htmlAttributes))
        End If

        Return New MvcHtmlString(tag.ToString(TagRenderMode.SelfClosing))
    End Function

End Module

''' <summary>
''' 回復等級列舉。
''' 參考：http://code.google.com/intl/zh-TW/apis/chart/infographics/docs/qr_codes.html 說明文件。
''' </summary>
Public Enum QRCodeErrorCorrectionLevel
    ''' <summary>
    ''' 從 7% 的錯誤資料中回復.
    ''' </summary>
    Low
    ''' <summary>
    ''' 從 15% 的錯誤資料中回復.
    ''' </summary>
    Medium
    ''' <summary>
    ''' 從 25% 的錯誤資料中回復.
    ''' </summary>
    QuiteGood
    ''' <summary>
    ''' 從 30% 的錯誤資料中回復.
    ''' </summary>
    High
End Enum

在要使用的 View 之中引用擴充方法 Namespace，即可使用。我們以 Home/Index 為例：

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="Mvc3QRCode.QRCodeExtension" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    首頁
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData("Message") %></h2>
    <p>
    預設 80*80, margin = 4<br />
    <%: Html.QRCode("http://kkbruce.blogspot.com", "KKBruce部落格網址") %>
    </p>
    <p>
    修改為 150*150, margin = 1<br />
    <%: Html.QRCode("http://kkbruce.blogspot.com", "KKBruce部落格網址", size := 150, margin := 1) %>
    </p>
</asp:Content>

建置，Ctrl+F5，執行網頁。

圖一：Visual Basic - QRCode Extension 執行圖

有前人種樹真好。^_^