消息圖標
跳至頁尾內容
  1. IronBarcode
  2. IronBarcode 部落格
  3. 使用IronBarcode
  4. Razor條碼產生器
使用IRONBARCODE

建立Razor條碼生成器Web應用

Curtis Chau
Curtis Chau
已更新:

Razor Barcode Generator是一個方便的工具，可以簡化開發人員和企業生成條碼的過程。在網頁應用程式中整合條碼生成功能，提升了功能和使用者體驗，使得生成多種條碼型別變得簡單。不論您是在管理庫存、追蹤資產，還是簡化結帳流程，使用Razor Barcode Generator都能顯著提高效率和準確性。 我們將在本教程中使用IronBarcode來建立條碼生成器。

IronBarcode介紹

IronBarcode是開發人員在.NET Core中工作的必備工具，提供一個易於使用的條碼生成和讀取的程式庫。 它之所以突出是因為簡單地整合到您的項目中，僅需少量程式碼即可生成或解碼條碼和QR碼。 這使得IronBarcode成為增強應用程式功能的多用途選擇，從使用Razor頁面的網頁應用程式到桌面和移動應用程式。 其廣泛支援的條碼格式範圍確保它能滿足各種專案需求，包括.NET MVC、Blazor WebAssembly應用程式和Blazor應用程式，使其成為開發人員可靠的選擇。

建立條碼生成器的步驟

步驟1：建立ASP.NET Core Web App (Razor Pages)

使用Visual Studio建立帶有Razor Pages的ASP.NET Core Web App是很簡單的。 本指南將幫助您從頭開始設置專案：

  1. 打開Visual Studio：啟動Visual Studio。 在啟動窗口中，選擇"建立新項目"來開始設置新的網頁應用程式。
  2. 選擇專案型別：在"建立新項目"窗口中，從項目模板列表中選擇"ASP.NET Core Web App"。 然後，點擊"下一步"繼續。

現在配置新的項目Razor Barcode Generator 1 related to 步驟1：建立ASP.NET Core Web App (Razor Pages)

  1. 配置您的專案：現在，您需要配置您的新專案。
    • 鍵入您的網頁應用程式的"專案名稱"。
    • 選擇您電腦上的適合位置來儲存專案文件。
    • 可選地，調整"解決方案名稱"。
    • 點擊"下一步"繼續。

項目名稱、解決方案名稱和文件路徑的配置Razor Barcode Generator 2 related to 步驟1：建立ASP.NET Core Web App (Razor Pages)

  1. 設置專案詳情：在"附加資訊"窗口中，確認：
    • 選擇適當的.NET版本。
    • 確認"配置HTTPS"已選中。
    • 點擊"建立"來啟動新的Razor Pages網頁應用程式的建立。

設置附加資訊Razor Barcode Generator 3 related to 步驟1：建立ASP.NET Core Web App (Razor Pages)

步驟2：安裝IronBarcode程式庫

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

  1. 存取NuGet套件管理器：在解決方案導覽解析欄中右鍵點擊您的專案名稱。 選擇"管理NuGet套件…"打開NuGet套件管理器標籤。
  2. 搜索IronBarcode：在"瀏覽"標籤中，鍵入"IronBarcode"以找到程式庫。
  3. 安裝IronBarcode：選擇"IronBarcode"並點擊"安裝"。 檢查所有依賴項和授權協議，然後接受以繼續。

通過NuGet套件管理器安裝IronBarcodeRazor Barcode Generator 4 related to 步驟2：安裝IronBarcode程式庫

步驟3：設計UI

通過編輯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

步驟4：編寫功能程式碼

定義顏色：

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

using Color = IronSoftware.Drawing.Color;
using Color = IronSoftware.Drawing.Color;
Imports 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...
}
Public Enum BarcodeColors
	AliceBlue
	AntiqueWhite
	Aqua
	Aquamarine
	Azure
	Beige
	Bisque
	' And others...
End Enum
$vbLabelText   $csharpLabel

條碼型別枚舉：

定義可用的條碼型別：

public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
Public Enum BarcodeTypes
	Aztec
	Codabar
	' Other barcode types...
End Enum
$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 */ }
Private Function EnumToColor(ByVal colorEnum As BarcodeColors) As Color
End Function
Private Function GetBarcodeEncoding(ByVal barcodeType As BarcodeTypes) As BarcodeWriterEncoding
End Function
$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...
}
Public Function OnPostUpload(ByVal barcodeText As String, ByVal barcodeType As String, ByVal maxWidth? As Integer, ByVal maxHeight? As Integer, ByVal barcodeColor As String) As JsonResult
	' Function logic...
End Function
$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運行應用程式。按螢幕上的說明進行資料輸入，選擇條碼型別，設置尺寸並生成條碼。

輸出網頁應用程式Razor Barcode Generator 5 related to 運行應用程式

結論

條碼生成器網頁應用程式提供了一個建立自定義條碼的簡單方法。 您可以輸入資料，選擇條碼型別，設置尺寸並選擇顏色後生成條碼。 IronBarcode為此應用程式提供免費試用，授權費從$999開始。

要生成QR Code圖像，請考慮使用IronQR。

常見問題

如何將條碼生成整合到ASP.NET Core網頁應用程式中？

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

設置Razor頁面專案以進行條碼生成涉及哪些步驟？

要設置Razor頁面專案以進行條碼生成，首先在Visual Studio中建立一個新的ASP.NET Core網頁應用程式，通過NuGet套件管理器安裝IronBarcode，使用HTML、CSS和jQuery自定義您的使用者介面，並實施條碼功能所需的C#程式碼。

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

要安裝IronBarcode，在Visual Studio的解決方案資源管理器中右鍵點擊您的專案，選擇“管理NuGet套件...”，搜尋‘IronBarcode’，然後點擊“安裝”。這將新增程式庫到您的專案，使您能夠使用其條碼生成功能。

使用IronBarcode進行條碼生成有哪些優勢？

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

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

您可以通過定義條碼顏色和型別的枚舉來使用IronBarcode自定義條碼外觀。這允許您選擇不同的顏色和條碼格式，從而根據特定設計需求定制生成的條碼。

在條碼生成過程中，OnPostUpload函式的目的何在？

OnPostUpload函式處理使用者輸入的條碼生成。它捕獲條碼文字、型別、尺寸、顏色等細節，並使用IronBarcode的方法根據這些參數建立條碼。

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

是的，IronBarcode可以在Blazor應用程式中使用。它支持與Blazor WebAssembly和Blazor伺服器專案的整合，為開發現代網頁應用的開發者提供了靈活性。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發，Curtis對物聯網（IoT）有濃厚的興趣，探索創新的方法來整合硬體和軟體。在空閒時間，他喜歡玩遊戲和建立Discord機器人，結合他對技術的熱愛與創造力。

相關文章

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

Iron 支援團隊

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