1. IronBarcode
  2. IronBarcode 部落格
  3. 使用 IronBarcode
  4. Razor 條碼生成器
使用 IRONBARCODE

創建一個Razor條碼生成器的網頁應用程序

發佈 2024年4月7日
分享:

Razor Barcode Generator 是一個方便的工具，能夠簡化開發者和企業的條碼生成過程。將條碼生成整合到網頁應用中可以增強功能性和用戶體驗，使得生成各種類型的條碼變得更加直觀。無論是管理庫存、資產追蹤，還是簡化結帳過程，使用 Razor Barcode Generator 都能顯著提升效率和準確性。 我們將使用IronBarcode在這個條碼生成器教程中。

IronBarcode 介紹

IronBarcode是開發人員使用 .NET Core 的必備工具，提供了一個易於使用的庫用於條碼生成和閱讀。 它因其在整合到您的專案中具有簡單性而脫穎而出，只需最少的代碼即可生成或解讀條形碼和 QR 碼。 這使得 IronBarcode 成為增強應用程式的多功能選擇，具備條碼生成和條碼讀取功能，從使用 Razor 頁面的 Web 應用程式到桌面和移動應用程式皆適用。 其廣泛支援的條碼格式範圍確保它能滿足各種專案需求，包括對 .NET MVC、Blazor WebAssembly 應用程序和 Blazor 應用的需求，使其成為開發人員值得信賴的選擇。

建立條碼生成器的步驟

步驟 1：建立 ASP.NET Core 網路應用程式 (Razor 頁面)

我們可以選擇 Blazor 應用程式或 Blazor 伺服器應用程式來進行這個專案。 但在本教程中，我將使用 ASP.NET Core Web App(Razor Pages). 在 Visual Studio 中使用 Razor Pages 創建 ASP.NET Core Web 應用程式包含一系列簡單的步驟。 本指南將幫助您從頭開始設置項目：

打開 Visual Studio：啟動 Visual Studio。 在起始視窗中，選擇「建立新專案」以開始設置您的新網頁應用程式。

選擇專案類型：在「建立新專案」視窗中，您需要選擇專案類型。 在搜索框中輸入“Razor”以縮小選項範圍，然後從專案模板列表中選擇“ASP.NET Core Web App”。 選擇後，點擊「下一步」按鈕繼續。

建立一個新的 Razor 專案配置您的項目：現在您將被提示配置新項目。

  • 為您的網路應用程式輸入「專案名稱」。
  • 選擇電腦上適合的「位置」來存放專案檔案。
  • 如果您希望將「方案名稱」與專案名稱不同，您可以選擇性地進行調整。

  • 點擊「下一步」以繼續。

    配置專案名稱、解決方案名稱和檔案路徑

    設定專案詳情：在「附加資訊」視窗中，請確保：

  • 在下拉選單中選擇適合的 .NET 版本。 如需最新功能，請選擇可用的最高版本。
  • 確認已勾選「Configure for HTTPS」以啟用安全的 HTTP 連接。

  • 按「建立」以開始建立您的新 Razor Pages 網頁應用程式。

    設定附加資訊

步驟 2：安裝 IronBarcode 函式庫

要在 Visual Studio 中使用 NuGet 套件管理器安裝 IronBarcode，請按照以下步驟將其無縫整合到您的 ASP.NET Core Web App 或其他 .NET 專案中：

在 NuGet 套件管理器中存取：在 Visual Studio 介面的方案總管窗格中（通常位於右側），右鍵點擊您的專案名稱。 從出現的上下文選單中選擇「管理 NuGet 套件…」，這將開啟 NuGet 套件管理器標籤。

搜尋 IronBarcode：在 NuGet 套件管理器標籤中，點擊「瀏覽」標籤以在線搜索套件。在搜索框中鍵入「IronBarcode」以查找 IronBarcode 函式庫。

安裝 IronBarcode：在搜尋結果中找到「IronBarCode」套件。 請確保您選擇正確的套件，因為可能存在名稱相似的套件。 單擊「IronBarCode」套件以選擇它，然後單擊「安裝」按鈕。 Visual Studio 可能會顯示一個對話框，列出將要做出的更改，包括與 IronBarcode 一起安裝的任何其他依賴項。 檢查變更，然後點擊「確定」或「接受」以繼續進行安裝。 如果出現任何許可協議，請查看並接受以繼續。

透過NuGet套件管理器安裝IronBarcode

步驟 3：設計用戶界面

是時候專注於我們網頁應用程式的視覺方面了。 我們將從增強索引頁面開始。 為此，請在您的專案中開啟 index.cshtml 檔案。 此文件是放置首頁標記的地方。 為了使我們的頁面在視覺上更吸引人且易於使用，我們將應用一些自定義樣式。

設計用的 CSS：將以下 CSS 插入到您的 index.cshtml 文件的 <head> 區域，或者如果您將其直接嵌入 HTML，則可以放在 <style> 標籤內：

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>
HTML

這段 CSS 代碼旨在為索引頁面提供乾淨和現代的外觀，使用「Poppins」字體以獲得時尚的效果，並為容器、按鈕、表單控件等定義樣式，以形成一個統一的用戶界面。 隨意進一步自訂這些樣式，以符合您的網路應用程式的特定設計需求。

添加歡迎訊息：為了歡迎用戶並介紹我們應用程式的目的，我們將在頁面上放置一個顯著的歡迎訊息。 我們也會調整其顏色以符合我們的設計主題。 我們將在歡迎信息下方在頁面上居中放置一個標誌圖像。 以下是您可以這樣做的方法：

<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
HTML

為了繼續設計條碼生成器的用戶界面，我們先把重點放在以集中佈局結構化主要內容上。 以下程式碼片段展示了如何使用 Bootstrap 的網格系統來置中內容，並為進一步的 UI 元件（如表單、按鈕或資訊文本區域）做準備。

<div class="container">

    <div class="row justify-content-center">

    </div>
</div>
<div class="container">

    <div class="row justify-content-center">

    </div>
</div>
HTML

設計輸入表單

現在，在上述結構中，我們將設計表單以獲取用戶輸入來設計他們的條碼。 我們將接受以下欄位的輸入：條碼資料、條碼類型、最大寬度、最大高度和條碼顏色。 以下是程式碼：

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate  Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate  Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
HTML

以下是每個部分作用的簡單說明：

<div> 容器：就像網頁上的一個方框，用來包含與創建條碼相關的所有內容。 由於 class col-md-6，它的寬度是其父容器的一半。

<form> 元素：這是用戶輸入數據的頁面部分。 屬性 method="post" 表示當表單提交時，資訊以其他人無法看到的方式傳送到伺服器。 enctype="multipart/form-data" 屬性允許表單傳送文件，這在您上傳圖片或文件以生成條碼時可能很有用。

條碼數據：這是一個用戶可以輸入他們想要轉換成條碼的信息的字段，例如 URL 或一些文本。 此項為必填，表單必須填寫此欄才能提交。

條碼類型：在這裡，使用者可以選擇他們想要創建的條碼類型。 選擇來自枚舉(特殊列表)在此未顯示的程式碼中定義。 用戶可以輸入以搜尋可用的選項。

最大寬度和最大高度：這些欄位允許用戶指定條碼以像素為單位的最大尺寸。 它們可以防止條碼對預定用途來說太大。

條碼的顏色：與條碼類型類似，用戶可以從代碼中定義的列表中選擇條碼的顏色。 這允許條碼外觀的自訂。

生成條碼按鈕：填寫表格後，點擊此按鈕將信息發送到伺服器，然後根據所提供的細節生成條碼。 asp-page-handler 屬性指示伺服器代碼中負責處理此操作的特定方法。

訊息容器：這是儲存訊息的地方(例如成功或錯誤信息)提交表單後將顯示。 這些訊息是在伺服器端設定的，並顯示給使用者以提供對採取動作的反饋。

影像欄

現在是時候創建一個顯示生成的條碼和出現下載按鈕的列了。 下載按鈕將幫助下載生成的按鈕。 在下載之前，會有一個輸入欄位讓您新增條碼名稱。 以下是實現此功能的代碼：

<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>
<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>
HTML

影像欄位(col-md-6 圖像填充): 此 div 在表單列旁創建一個列(如果遵循兩欄佈局). image-padding 類別可能會在欄位周圍添加一些填充以進行間距調整。

圖像容器(圖像容器)：這個 div 專門用於封裝條碼圖像及相關控制項。 最初隱藏，通常在生成條碼後通過JavaScript顯示。

條碼圖像(條碼圖片)使用 <img> 標籤來顯示生成的條碼。 起初，src屬性是空的，因為圖像來源將在生成條碼後動態設置。 alt 屬性提供對圖像的替代文字描述。

文件名稱輸入：在條碼圖片下方，有一個輸入欄位，使用者可以在其中輸入他們希望保存條碼圖片的文件名稱。 這對於在下載文件之前進行個性化設置很有用。

下載按鈕：在文件名稱輸入附近有一個標示為「下載」的按鈕。 此按鈕旨在觸發生成的條碼圖像的下載，並在用戶指定時使用所提供的檔案名稱。

響應式佈局(列和行類別)佈局使用了Bootstrap的網格系統(行, col-sm-8, col-sm-4)確保檔案名稱輸入框和下載按鈕水平對齊，並能良好適應不同的螢幕大小。 pr-1 和 pl-1 類為這些元素的右側和左側分別添加填充，以確保適當的間距。

生成條碼後，來源(源代碼)條碼圖像 <img> 標籤的內容已更新，以顯示圖像。 然後用戶可以在輸入欄中輸入他們選擇的檔案名稱。 單擊「下載」按鈕應觸發圖像的下載，最好使用用戶輸入的名稱。 下載功能的具體內容(例如，設置檔案名稱和處理下載操作)將使用 JavaScript 或伺服器端邏輯實現，並綁定到按鈕的點擊事件。

腳本

現在是時候添加下載按鈕的功能、輸入處理，以及成功或錯誤消息的處理。 我們可以使用 jQuery 來達成。 以下是要添加到 index.cshtml 文件的腳本：

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var messageTimeout;

            $("form").submit(function (event) {
                event.preventDefault();
                clearTimeout(messageTimeout);
                var formData = new FormData($(this)[0]);
                $.ajax({
                    url: '@Url.Page("Index", "Upload")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#messageContainer").show();
                        $("#message").html(data.message);

                        if (data.success && data.imagePath) {
                            $("#barcodeImage").attr("src", data.imagePath).show();
                            $("#imageContainer").show();
                        } else {
                            console.error("Barcode generation failed or no image path provided.");
                        }

                        messageTimeout = setTimeout(function () {
                            $("#messageContainer").fadeOut("slow");
                        }, 3000);
                    },

                    error: function (xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
            });

            $("#customDownloadBtn").click(function () {
                var fileName = $("#fileName").val().trim();
                if (fileName === "") {
                    fileName = "Generated Barcode";
                }
                var downloadLink = $("<a>").attr({
                    href: $("#barcodeImage").attr("src"),
                    download: fileName + ".png",
                    style: "display: none;"
                }).appendTo("body");
                downloadLink [0].click();
                downloadLink.remove();
            });
        });
    </script>
}
JAVASCRIPT

防止表單默認提交：當表單提交時，默認操作(這會重新載入頁面)被阻止。 這允許發送非同步請求，讓用戶停留在同一頁面上，以獲得更流暢的體驗。

表單資料收集：包括條碼數據、類型、尺寸和顏色的輸入被收集到 FormData 對象中。 此方法特別適用於處理檔案上傳或包含特殊字元的資料，而不需要手動編碼資料。

AJAX 請求：使用 jQuery 的 $.ajax 方法向伺服器發出非同步請求。 URL 是動態生成的，以匹配 Razor 頁面的上傳處理程序。(索引, 上傳)，確保表單資料由正確的伺服器端方法處理。 提交 FormData 物件時，選項 processData: false 和 contentType: false 是必要的，以防止 jQuery 改變資料，從而讓伺服器正確解讀 multipart/form-data 格式。

成功處理：在成功回應時，腳本會顯示消息容器並根據伺服器的回應更新其內容。 如果回應指示成功並包含圖片路徑，腳本將更新條碼圖片的 src 屬性並顯示它。 設置了一個超時，會在3秒後自動隱藏訊息，提供用戶反饋，並淡出以清理UI。

錯誤處理：如果請求發生錯誤，將錯誤訊息記錄到控制台。 此基本處理可擴展以直接在 UI 中提供使用者回饋。

下載按鈕點擊：當點擊下載按鈕時，腳本會檢查用戶是否已經輸入了文件名稱。 如果沒有，默認為「生成的條碼」。

建立下載連結：創建一個臨時的 <a> 元素，並配置 href 屬性指向條碼圖像的來源，同時將 download 屬性設置為所需的文件名稱。(附加 ".png" 以符合預期的圖片格式). 連結被隱藏起來，因為它不適合作為頁面佈局的一部分來顯示。

觸發下載：腳本程式以程式方式點擊鏈接，促使瀏覽器下載影像檔案。之後，將暫時鏈接從文件中移除以進行清理。

此腳本直接與前面代碼片段中定義的 HTML 元素互動，例如用於輸入條碼數據的表單、用於反饋的消息容器以及用於顯示生成的條碼的圖像容器。 這使得應用程式更加動態，允許在不重新載入頁面的情況下非同步生成和檢索條碼，並為使用者提供下載生成的條碼圖像的直觀機制。

步驟4：編寫功能代碼

定義顏色

在頁面的頂部，我們將添加以下行： 請提供內容以進行翻譯。

using Color = IronSoftware.Drawing.Color; 請提供內容以進行翻譯。

這將有助於了解我們正在使用的程式碼，從而理解我們用來在程式碼中設置顏色的IronSoftware.Drawing.Color。

設計條碼顏色枚舉

在 index.cshtml 檔案中，定義一個名為 BarcodeColors 的枚舉作為指定生成條碼可用顏色選項的關鍵組成部分。 此列舉列出了各種顏色名稱，這些名稱對應於 IronDrawing 中的預定義顏色。 請提供內容以進行翻譯。

public enum 條碼顏色

{

AliceBlue

AntiqueWhite

Aqua

海藍寶石

Azure

米色

淺橘黃色，

// 注意：IronDRAWING 支持用於條碼的多種顏色選擇。 完整列表請參閱官方文件。

} 請提供內容以進行翻譯。

在您的 Razor Page 的 HTML 表單中(index.cshtml)，您已包含一個條碼顏色的輸入欄位和一個相關的資料列表。這個資料列表根據BarcodeColors枚舉動態填充選項。

條碼類型枚舉

BarcodeTypes 列舉，與 BarcodeColors 列舉相似，在定義用戶可以在您的應用程式中生成的不同類型條碼方面發揮了關鍵作用。 此枚舉列出各種條碼格式，包括一維條碼(1D)以及二維(2D)條碼，滿足多種使用案例和行業標準。 請提供內容以進行翻譯。

公共列舉 BarcodeTypes

{

阿茲特克

Codabar

Code128,

Code39,

Code93

資料矩陣

EAN13

EAN8

ITF

MSI

PDF417,

普萊西

QR碼,

UPCA

UPCE

} 請提供內容以進行翻譯。

在前端，尤其是在您的 Razor Page 中，(index.cshtml)此枚舉用於填充下拉選單(通過資料清單)允許使用者選擇所需的條碼格式來生成。

EnumToColor 輔助函數

此輔助函式 EnumToColor 用於將 enum 值從 BarcodeColors 轉換為其對應的 IronSoftware.Drawing 對象。 這種轉換對於應用程式的後端處理至關重要，其中條碼的選定顏色需要從用戶的選擇轉換為可以應用於條碼圖像生成過程的顏色。 請提供內容以進行翻譯。

private Color EnumToColor(條碼顏色 enum)

{

return colorEnum switch
{

BarcodeColors.AliceBlue => Color.AliceBlue,

BarcodeColors.AntiqueWhite => Color.AntiqueWhite,

BarcodeColors.Aqua => Color.Aqua,

    BarcodeColors.Aquamarine => Color.Aquamarine,
BarcodeColors.Azure => Color.Azure,

BarcodeColors.Beige => Color.Beige,

BarcodeColors.Bisque => Color.Bisque,

_ => Color.Black, // 預設或回退顏色

//等等!

};

} 請提供內容以進行翻譯。

該函數接受一個參數，其類型為 BarcodeColors，這是表示用戶選擇條碼顏色的枚舉型。 它返回一個對應於傳入枚舉值的 IronSoftware.Drawing 對象。

該函數使用了一個 switch 表達式，這是一個在 C# 8.0 中引入的功能，用於將 colorEnum 參數與每個可能的 BarcodeColors 枚舉值進行匹配。 對於 switch 表達式中的每個情況，它會返回與枚舉值名稱匹配的 System.Drawing.Color 物件。 例如，如果傳入 BarcodeColors.AliceBlue，則會返回 Color.AliceBlue。

switch 表達式涵蓋了 BarcodeColors 列舉中所有定義的顏色，確保任何選擇的顏色都能準確轉換為 IronSoftware.Drawing 物件。 如果枚舉值不符合任何情況(如果所有情況都涵蓋了，這種情況不應該發生)，預設情況會返回 Color.Black 作為後備選項。

條碼類型輔助函數

GetBarcodeEncoding 函數是應用程式中後端邏輯的重要組成部分，旨在將選定的條碼類型從使用者友好的列舉類型映射出來。(條碼類型)到條碼生成庫所需的特定編碼(在此標記為 BarcodeWriterEncoding). 請提供內容以進行翻譯。

private BarcodeWriterEncoding GetBarcodeEncoding(條碼類型 barcodeType)

{

return barcodeType switch
{

BarcodeTypes.Aztec => BarcodeWriterEncoding.Aztec,

BarcodeTypes.Codabar => BarcodeWriterEncoding.Codabar,

BarcodeTypes.Code128 => BarcodeWriterEncoding.Code128,

BarcodeTypes.Code39 => BarcodeWriterEncoding.Code39,

BarcodeTypes.Code93 => BarcodeWriterEncoding.Code93,

BarcodeTypes.DataMatrix => BarcodeWriterEncoding.DataMatrix,

BarcodeTypes.EAN13 => BarcodeWriterEncoding.EAN13,

BarcodeTypes.EAN8 => BarcodeWriterEncoding.EAN8,

BarcodeTypes.ITF => BarcodeWriterEncoding.ITF，

BarcodeTypes.MSI => BarcodeWriterEncoding.MSI

    BarcodeTypes.PDF417 => BarcodeWriterEncoding.PDF417,

BarcodeTypes.Plessey => BarcodeWriterEncoding.Plessey,

    BarcodeTypes.QRCode => BarcodeWriterEncoding.QRCode,

BarcodeTypes.UPCA => BarcodeWriterEncoding.UPCA,

BarcodeTypes.UPCE => BarcodeWriterEncoding.UPCE,

_ => BarcodeWriterEncoding.QRCode, // 預設或回退編碼

};

} 請提供內容以進行翻譯。

該函數接受一個參數，類型為BarcodeTypes，代表用戶選擇的條碼格式。 它返回 BarcodeWriterEncoding 的值，直接对应到條碼生成庫支援的編碼類型。

使用 switch 表達式，該函數將 barcodeType 參數與 BarcodeTypes 列舉中的每個定義值進行匹配。 在 switch 表達式中的每個案例中，返回對應的 BarcodeWriterEncoding 值。 例如，如果傳遞BarcodeTypes.Code128，則函數返回BarcodeWriterEncoding.Code128。

此完整的 switch 表達式確保用戶選擇的每個條碼格式都有相應的編碼類型，條碼生成庫可以利用。預設情況下返回 BarcodeWriterEncoding.QRCode 作為備援。 這個預設選擇假定 QR 碼是一個常見且廣泛適用的選擇；然而，預設行為可以根據您的應用需求進行調整，或者在遇到不支援的條碼類型時拋出異常。

新增 Message 和 BarcodeImageUrl 屬性

這些屬性用於傳達操作的結果(如條碼生成)返回 Razor 頁面(.cshtml 文件)並分別保存生成的條碼圖像的URL。 在您的 Razor Page 頁面中，您可以訪問這些屬性以向用戶顯示消息和條碼圖像。 請提供內容以進行翻譯。

公共字串 訊息{取得; 設置; }

public string BarcodeImageUrl{取得; 設置; } 請提供內容以進行翻譯。

OnPostUpload 函數簽名

這是 HTTP POST 處理器的簽名在一個ASP.NET核心 Razor 頁面應用程式。 它被設計用於回應條碼生成的表單提交。 請提供內容以進行翻譯。

public JsonResult OnPostUpload
```(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor, string correctionLevel)

{

}
請提供內容以進行翻譯。

該函數從表單接收多個參數：

barcodeText：要編碼進入條碼的數據。

barcodeType：要生成的條碼類型(例如，QR Code，Code128).

maxWidth 和 maxHeight：可選參數，用於指定生成的條碼的尺寸。

barcodeColor: 條碼的顏色。

correctionLevel: 在提供的片段中未使用，但通常與某些條碼類型（如 QR 碼）的錯誤更正級別相關。

### 編碼選擇和條碼生成

現在是時候開始實現邏輯了。 以下是程式碼腳本：
請提供內容以進行翻譯。

BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode; // 預設為 QRCode

// 嘗試將 barcodeType 解析為對應的 BarcodeTypes 枚舉

如果(Enum.TryParse<BarcodeTypes>(barcodeType，true，out var barcodeTypeEnum))

{

```plaintext
encoding = GetBarcodeEncoding
```(barcodeTypeEnum);

}

其他

{

// 處理 barcodeType 不符合任何列舉值的情況

```json
return new JsonResult
```(新的{成功 = false, 訊息 = "選擇的條碼類型無效。"});

}

var myBarcode = BarcodeWriter.CreateBarcode(條碼文字, 編碼);
請提供內容以進行翻譯。

最初，會設定一個預設的條碼編碼。 該函數嘗試將 barcodeType 字串解析為 BarcodeTypes 枚舉。 如果成功，則調用 GetBarcodeEncoding，這是一個輔助函數，將 BarcodeTypes 映射到條碼寫入庫所需的特定編碼。(條碼編碼寫入). 如果 barcodeType 無效，則會返回錯誤。 然後，它會生成具有指定文字和編碼的條碼。

### 顏色轉換和條碼自訂

這部分處理條碼的顏色和尺寸自訂。 它首先檢查是否已指定一種顏色。 如果是這樣，則嘗試將此顏色解析為 BarcodeColors 枚舉，然後使用 EnumToColor 輔助函數將其轉換為 System.Drawing.Color 物件。 如果顏色無效，則會返回錯誤。 接下來，如果同時提供了 maxWidth 和 maxHeight，則會將條碼調整為這些尺寸。
請提供內容以進行翻譯。

// 將 barcodeColor 字串轉換為 Color 物件

如果(!string.IsNullOrEmpty(條碼顏色))

{

public JsonResult OnPostUpload
```(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor, string correctionLevel)

{

}
請提供內容以進行翻譯。

該函數從表單接收多個參數：

barcodeText：要編碼進入條碼的數據。

barcodeType：要生成的條碼類型(例如，QR Code，Code128).

maxWidth 和 maxHeight：可選參數，用於指定生成的條碼的尺寸。

barcodeColor: 條碼的顏色。

correctionLevel: 在提供的片段中未使用，但通常與某些條碼類型（如 QR 碼）的錯誤更正級別相關。

### 編碼選擇和條碼生成

現在是時候開始實現邏輯了。 以下是程式碼腳本：
請提供內容以進行翻譯。

BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode; // 預設為 QRCode

// 嘗試將 barcodeType 解析為對應的 BarcodeTypes 枚舉

如果(Enum.TryParse<BarcodeTypes>(barcodeType，true，out var barcodeTypeEnum))

{

```plaintext
encoding = GetBarcodeEncoding
```(barcodeTypeEnum);

}

其他

{

// 處理 barcodeType 不符合任何列舉值的情況

```json
return new JsonResult
```(新的{成功 = false, 訊息 = "選擇的條碼類型無效。"});

}

var myBarcode = BarcodeWriter.CreateBarcode(條碼文字, 編碼);
請提供內容以進行翻譯。

最初，會設定一個預設的條碼編碼。 該函數嘗試將 barcodeType 字串解析為 BarcodeTypes 枚舉。 如果成功，則調用 GetBarcodeEncoding，這是一個輔助函數，將 BarcodeTypes 映射到條碼寫入庫所需的特定編碼。(條碼編碼寫入). 如果 barcodeType 無效，則會返回錯誤。 然後，它會生成具有指定文字和編碼的條碼。

### 顏色轉換和條碼自訂

這部分處理條碼的顏色和尺寸自訂。 它首先檢查是否已指定一種顏色。 如果是這樣，則嘗試將此顏色解析為 BarcodeColors 枚舉，然後使用 EnumToColor 輔助函數將其轉換為 System.Drawing.Color 物件。 如果顏色無效，則會返回錯誤。 接下來，如果同時提供了 maxWidth 和 maxHeight，則會將條碼調整為這些尺寸。
請提供內容以進行翻譯。

// 將 barcodeColor 字串轉換為 Color 物件

如果(!string.IsNullOrEmpty(條碼顏色))

{

Public JsonResult Function ```(ByVal barcodeText As String, ByVal barcodeType As String, ByVal maxWidth? As Integer, ByVal maxHeight? As Integer, ByVal barcodeColor As String, ByVal correctionLevel As String) As OnPostUpload


End Function
### 編碼選擇和條碼生成
請提供內容以進行翻譯。 該函數從表單接收多個參數： barcodeText：要編碼進入條碼的數據。 barcodeType：要生成的條碼類型(例如，QR Code，Code128).maxWidth 和 maxHeight：可選參數，用於指定生成的條碼的尺寸。 barcodeColor: 條碼的顏色。 correctionLevel: 在提供的片段中未使用，但通常與某些條碼類型（如 QR 碼）的錯誤更正級別相關。 現在是時候開始實現邏輯了。 以下是程式碼腳本： 請提供內容以進行翻譯。 BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode ' 預設為 QRCode

' 嘗試將 barcodeType 解析為對應的 BarcodeTypes 枚舉

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'如果(Enum.TryParse(Of BarcodeTypes)(barcodeType，true，out var barcodeTypeEnum))
'
'{
'
'```plaintext encoding = GetBarcodeEncoding ```(barcodeTypeEnum);
'
'}

其他

If True Then

' 處理 barcodeType 不符合任何列舉值的情況

```json Return New JsonResult ```(新的{
	成功 = False,
	訊息 = "選擇的條碼類型無效。"
})

End If

Dim myBarcode = BarcodeWriter.CreateBarcode(條碼文字, 編碼)
### 顏色轉換和條碼自訂
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'請提供內容以進行翻譯。 最初，會設定一個預設的條碼編碼。 該函數嘗試將 barcodeType 字串解析為 BarcodeTypes 枚舉。 如果成功，則調用 GetBarcodeEncoding，這是一個輔助函數，將 BarcodeTypes 映射到條碼寫入庫所需的特定編碼。(條碼編碼寫入).如果 barcodeType 無效，則會返回錯誤。 然後，它會生成具有指定文字和編碼的條碼。 這部分處理條碼的顏色和尺寸自訂。 它首先檢查是否已指定一種顏色。 如果是這樣，則嘗試將此顏色解析為 BarcodeColors 枚舉，然後使用 EnumToColor 輔助函數將其轉換為 System.Drawing.Color 物件。 如果顏色無效，則會返回錯誤。 接下來，如果同時提供了 maxWidth 和 maxHeight，則會將條碼調整為這些尺寸。 請提供內容以進行翻譯。 如果(!string.IsNullOrEmpty(條碼顏色))
'
'{
VB   C#

// 嘗試將 barcodeColor 解析為對應的 BarcodeColors 列舉類型


如果(Enum.TryParse<BarcodeColors>(barcodeColor，true，out var barcodeColorEnum))

    {

// 將列舉型別轉換為 Color 物件

```csharp
var color = EnumToColor
```(barcodeColorEnum);

myBarcode.ChangeBarCodeColor(顏色，true);

    }

否則

    {

// 處理 barcodeType 不符合任何枚舉值的情況

return new JsonResult(新的{success = false, message = "選擇了無效的顏色。"});

    }

}

如果(maxWidth.HasValue && maxHeight.HasValue)

{

myBarcode.ResizeTo(最大寬度.值, 最大高度.值);

}
請提供內容以進行翻譯。

### 儲存並返回條碼圖片

最後，生成的條碼圖像被保存到伺服器上。 使用當前時間戳創建一個唯一的文件名，以避免命名衝突。 條碼已保存在特定目錄中(wwwroot/barcodes)如果尚不存在，將會被創建。儲存圖像後，會準備一條成功訊息，並返回一個 JSON 回應，其中包括成功狀態、訊息以及生成的條碼圖像的路徑。 這允許用戶端應用程式顯示生成的條碼或提供連結讓使用者下載。
請提供內容以進行翻譯。

// 您的代碼其餘部分，用於保存和返回條碼圖像...

var barcodesFolderPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "barcodes");

Directory.CreateDirectory(條碼資料夾路徑);

var fileName = $"barcode_{DateTime.Now:yyyyMMddHHmmssfff}.png";

var filePath = Path.Combine(條碼文件夾路徑, 檔案名稱);

myBarcode.SaveAsImage(文件路徑);

this.Message = $"QR Code 生成成功。 檔案名稱: {文件名稱}";

return new JsonResult(新的{成功 = true，訊息 = 訊息，影像路徑 = $"/barcodes/"{文件名稱}"});
請提供內容以進行翻譯。

### 編輯\_Layout.cshtml

在\_Layout.cshtml檔案中，我們移除了header和footer標籤，使我們的應用程式看起來更好且極簡。這就是最後的\_Layout.cshtml檔案樣子：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData ["Title"] - Barcode_Generator_Razor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Barcode_Generator_Razor.styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

執行應用程式

您可以點擊綠色的「開始」箭頭或按 F5 來執行應用程式並開始偵錯。 如果您希望在不附加偵錯器的情況下運行，請按 Ctrl + F5。

輸出網頁應用程式請先輸入您想要編碼到條碼中的信息。 這可以是您希望轉換為條碼格式的任何文本或網址。 單擊標有「Type of Barcode」的下拉選單。 一個包含各種條碼格式的列表將會出現。 您可以在此輸入內容以篩選列表，並選擇適合您需求的條碼類型。 例如，您可能會從清單中選擇「Aztec」或「QR Code」。

選擇條碼類型查找標記為「最大寬度」的欄位(px)"和" 最大高度(px)在這裡，您將輸入條碼的最大尺寸，以確保其適合您的應用程式。 嘗試將兩者都輸入300，以保持條碼足夠大以便於掃描，但不會過大以至於無法放入您想要的介質上。

已設定條碼的寬度和高度點擊“Color for Barcode”下拉選單。 出現的列表將包含顏色選項，類似於條碼類型選擇。 您可以滾動查看所有顏色，或開始輸入以找到特定顏色，例如「AliceBlue」。

選擇條碼顏色填寫完所有欄位後，點擊「Generate Barcode」按鈕。 網頁應用程式將使用您提供的數據生成顯示在螢幕上的條碼圖像。 它將顯示在輸入表單的側邊。 我們在前端代碼中將此部分稱為圖像列。

圖像列中輸出的條碼您可以再次選擇不同的顏色並點擊生成條碼按鈕來更改條碼的顏色。

將顏色更改為深洋紅色如果您對螢幕上顯示的生成條碼感到滿意，您將看到一個輸入檔案名稱的選項。 在命名文件後，點擊「下載」按鈕將條碼圖片保存到您的電腦。 當您檢查專案中的條碼資料夾時，您將看到在這個資料夾中生成的條碼。

下載的檔案中的條碼圖像

結論

總之，條碼生成器網頁應用程式提供了一種創建自訂條碼的簡單方法。 用戶可以輕鬆輸入數據、選擇條碼類型、設置大小並挑選顏色，然後生成符合其特定需求的條碼。 此工具專為簡便而設計，允許快速創建和自訂條碼。 IronBarcode 庫為此應用程式提供了免費試用讓用戶測試其功能。 如果您發現該工具符合您的需求，您可以購買起價為 $749 的授權，以解鎖 IronBarcode 的全部功能以供您的專案使用。

要在您的網路應用程式中生成 QR Code 圖像，我建議使用IronQR因為它專為處理QR碼而量身定制。

< 上一頁
如何在 .NET MAUI 應用程式中使用文件掃描 SDK
下一個 >
如何在 VB .NET 中生成條碼
從NuGet 免費用於開發

安裝與 NuGet nuget.org/packages/BarCode

PM > Install-Package BarCode

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

免費 NuGet 下載 總下載次數： 1,290,353 查看許可證 >