信息圖標
跳過到頁腳內容
  1. IronBarcode
  2. IronBarcode博客
  3. 使用IronBarcode
  4. Razor 條碼生成器
使用IRONBARCODE

創建Razor條碼生成器Web應用

Jordi Bardia
Jordi Bardia
更新:

Razor條碼產生器教學

Razor條碼產生器是一款方便的工具，可簡化開發人員和企業建立條碼的流程。將條碼產生功能整合到 Web 應用程式中，可增強應用程式的功能和使用者體驗，並輕鬆產生各種類型的條碼。無論您是管理庫存、追蹤資產還是簡化結帳流程，使用Razor條碼產生器都能顯著提高效率和準確性。 本教學將使用IronBarcode來建立一個條碼產生器。

IronBarcode簡介

IronBarcode是使用.NET Core 的開發人員的必備工具，它提供了一個易於使用的條碼生成和讀取庫。 它之所以脫穎而出，是因為它易於整合到您的專案中，只需極少的程式碼即可產生或解碼條碼和二維碼。 這使得IronBarcode成為一個用途廣泛的選擇，它既能產生條碼，又能讀取條碼，可以增強各種應用程式的功能，從使用Razor頁面的 Web 應用程式到桌面和行動應用程式。 它支援的條碼格式範圍廣泛，確保能夠滿足各種專案需求，包括.NET MVC、 Blazor WebAssembly 應用程式和Blazor應用程序，使其成為開發人員的可靠選擇。

建立條碼產生器的步驟

步驟 1：建立ASP.NET Core Web 應用程式（Razor Pages）

在 Visual Studio 中使用Razor Pages 建立ASP.NET Core Web 應用程式非常簡單。 本指南將協助您從零開始建立專案：

1.開啟 Visual Studio：啟動 Visual Studio。 在開始視窗中，選擇"建立新專案"以開始設定新的 Web 應用程式的過程。 2.選擇項目類型：在"建立新項目"視窗中，從項目範本清單中選擇"ASP.NET Core Web 應用程式"。 然後，點擊"下一步"繼續。

建立新的Razor專案

3.設定您的專案：現在系統會提示您設定您的新專案。

  • 輸入您的 Web 應用程式的"專案名稱"。
  • 選擇電腦上一個適當的"位置"，用於儲存項目檔案。
  • （可選）調整"解決方案名稱"。 點選"下一步"繼續。

設定專案名稱、解決方案名稱和檔案路徑

4.設定項目詳情：在"附加資訊"視窗中，請確保：

  • 選擇合適的.NET版本。
  • 確認已勾選"設定 HTTPS"。
  • 點擊"建立"以開始建立新的Razor Pages Web 應用程式。

設定附加資訊

步驟 2：安裝IronBarcode庫

要在 Visual Studio 中使用NuGet套件管理器安裝IronBarcode ：

1.存取NuGet套件管理器：在解決方案資源管理器窗格中以滑鼠右鍵按一下專案名稱。 選擇"管理NuGet套件…"以開啟NuGet套件管理器標籤。 2.搜尋IronBarcode：在"瀏覽"標籤中，鍵入"IronBarcode"以尋找該庫。 3.安裝IronBarcode：選擇"IronBarcode"，然後點選"安裝"。 請先查看所有依賴項和授權協議，然後再接受繼續操作。

透過NuGet套件管理器安裝IronBarcode

步驟三：設計使用者介面

透過編輯 index.cshtml 檔案來增強首頁。套用自訂樣式：

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
HTML

新增歡迎訊息：

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

建構主要內容：

<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">

        <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">

        <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 image-padding">
    <div id="imageContainer">

    </div>
</div>
<div class="col-md-6 image-padding">
    <div id="imageContainer">

    </div>
</div>
HTML

腳本：

使用 jQuery 新增處理輸入和下載作業的功能：

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
JAVASCRIPT

第四步：編寫功能性程式碼

定義顏色：

在您的 index.cshtml 文件頂部新增：

using Color = IronSoftware.Drawing.Color;
using Color = IronSoftware.Drawing.Color;
$vbLabelText   $csharpLabel

條碼顏色枚舉：

定義條碼的可用顏色：

public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}
public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}
$vbLabelText   $csharpLabel

條碼類型枚舉：

定義可用的條碼類型：

public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
$vbLabelText   $csharpLabel

輔助函數：

將枚舉類型轉換為顏色和條碼編碼：

private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }
private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }
$vbLabelText   $csharpLabel

OnPostUpload 函數：

處理用於產生條碼的表單提交：

public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}
public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}
$vbLabelText   $csharpLabel

版面編輯：

編輯 \_Layout.cshtml 以採用極簡設計：

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

</body>
</html>
HTML

運行應用程式

按 F5 或 Ctrl + F5 運行應用程式。請依照螢幕上的指示輸入資料、選擇條碼類型、設定尺寸並產生條碼。

輸出的 Web 應用程式

結論

條碼產生器網路應用程式提供了一種建立自訂條碼的簡單方法。 在產生條碼之前，您可以輸入資料、選擇條碼類型、設定尺寸和選擇顏色。 IronBarcode為此應用程式提供免費試用，許可證起價為 $799。

產生二維碼影像時，可以考慮使用IronQR 。

常見問題解答

我如何在 ASP.NET Core Web 應用程式中整合條碼生成？

您可以通過在 ASP.NET Core Web 應用程式中使用 IronBarcode 來整合條碼生成。通過 NuGet 套件管理器安裝 IronBarcode 函式庫，然後利用其方法在應用程式內生成和讀取條碼和 QR 碼。

設置一個用于條碼生成的 Razor Pages 專案涉及哪些步驟？

要設置一個用于條碼生成的 Razor Pages 專案，首先在 Visual Studio 中創建一個新的 ASP.NET Core Web 應用程式，通過 NuGet 套件管理器安裝 IronBarcode，自定義使用 HTML、CSS 和 jQuery 的用戶介面，並實現條碼功能所需的 C# 代碼。

如何使用 NuGet 套件管理器安裝 IronBarcode？

要安裝 IronBarcode，右鍵單擊 Visual Studio 的解決方案資源管理器中的專案，選擇“管理 NuGet 套件…”，搜尋“IronBarcode”，然後單擊“安裝”。這將把函式庫添加到您的專案中，讓您可以使用其條碼生成功能。

使用IronBarcode生成條碼有哪些好處？

IronBarcode 提供了一個穩健的解決方案，用於生成和讀取多種條碼格式。它通過提供易於使用的方法簡化了 .NET 開發人員的流程，並支持在多種專案類型中進行整合，如 .NET MVC、Blazor WebAssembly 和 Blazor App 專案。

我如何使用 IronBarcode 自定義條碼外觀？

您可以通過定義條碼顏色和類型的枚舉來使用 IronBarcode 自定義條碼外觀。這允許您選擇不同的顏色和條碼格式，根據特定設計要求進行調整。

在條碼生成過程中，OnPostUpload 函數的目的是什么？

OnPostUpload 函數處理用戶輸入的條碼生成數據。它獲取條碼文本、類型、尺寸和顏色等詳細信息，並使用 IronBarcode 的方法根據這些參數來創建條碼。

我可以在 Blazor 應用程式中使用 IronBarcode 嗎？

是的，IronBarcode 可以在 Blazor 應用程式中使用。它支持與 Blazor WebAssembly 和 Blazor Server 專案整合，為開發現代網路應用程式的開發人員提供靈活性。

Jordi Bardia
Jordi Bardia
  立即與工程團隊聊天
軟體工程師
Jordi 在 Python、C# 和 C++ 上最得心應手，當他不在 Iron Software 展現技術時，便在做遊戲編程。在分担產品测测试，產品開發和研究的责任時，Jordi 為持续的產品改進增值。他说这种多样化的经验使他受到挑战并保持参与, 而这也是他与 Iron Software 中工作一大乐趣。Jordi 在佛罗里达州迈阿密长大，曾在佛罗里达大学学习计算机科学和统计学。

相關文章
30 天試用→完整產品。無限制。無需信用卡。 開始免費試用

鋼鐵支援團隊

我們每週 5 天，每天 24 小時在線上。
聊天
電子郵件
打電話給我