信息圖標
跳過到頁腳內容
  1. IronBarcode
  2. IronBarcode 部落格
  3. 使用 IronBarcode
  4. Razor BarCode 生成器
使用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 App"。 然後，點擊"下一步"繼續。

！建立一個新的 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">
        <!-- Form and Image Column will go here -->
    </div>
</div>
<div class="container">
    <div class="row justify-content-center">
        <!-- Form and Image Column will go here -->
    </div>
</div>
HTML

設計意見輸入表：

新增表單以收集使用者輸入訊息，用於產生條碼：

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <!-- Form elements omitted for brevity -->
        <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">
        <!-- Form elements omitted for brevity -->
        <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">
        <!-- Image and download button elements omitted for brevity -->
    </div>
</div>
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <!-- Image and download button elements omitted for brevity -->
    </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;
IRON VB CONVERTER ERROR developers@ironsoftware.com
$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 contents omitted for brevity -->
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <!-- Scripts inclusion omitted for brevity -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head contents omitted for brevity -->
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <!-- Scripts inclusion omitted for brevity -->
</body>
</html>
HTML

運行應用程式

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

！輸出的 Web 應用程式

結論

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

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

常見問題解答

如何將條碼生成整合到 ASP.NET Core Web App 中？

您可以在 ASP.NET Core Web App 中使用 IronBarcode 來整合條碼產生功能。透過 NuGet 套件管理員安裝 IronBarcode 函式庫，然後在您的應用程式中利用其方法來產生和讀取條碼與 QR 代碼。

設定 Razor Pages 專案以產生 BarCode 需要哪些步驟？

要為條碼生成設定一個 Razor Pages 專案，首先要在 Visual Studio 中建立一個新的 ASP.NET Core Web App，透過 NuGet Package Manager 安裝 IronBarcode，使用 HTML、CSS 和 jQuery 自訂使用者介面，並實作條碼功能所需的 C# 程式碼。

如何使用 NuGet Package Manager 安裝 IronBarcode？

要安裝 IronBarcode，在 Visual Studio 的 Solution Explorer 中右擊您的專案，選擇「管理 NuGet 套件...」，搜尋「IronBarcode」，然後點擊「安裝」。這將會把這個函式庫加入您的專案，讓您可以使用它的 BarCode 生成功能。

使用 IronBarcode 生成条码有哪些好处？

IronBarcode 為生成和讀取各種條碼格式提供了強大的解決方案。它通過提供易於使用的方法來簡化 .NET 開發人員的流程，並支援整合到各種專案類型中，如 .NET MVC、Blazor WebAssembly 和 Blazor App 專案。

如何使用 IronBarcode 自訂條碼外觀？

您可以使用 IronBarcode 定義條碼顏色和類型的枚舉來自訂條碼外觀。這允許您選擇不同的顏色和條碼格式，量身定制生成的條碼，以滿足特定的設計要求。

在條碼產生過程中，OnPostUpload 函式的目的是什麼？

OnPostUpload 函式會處理使用者的輸入，以便產生 BarCode。它捕捉條碼文本、類型、尺寸和顏色等細節，並利用 IronBarcode 的方法根據這些參數創建條碼。

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

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

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

相關文章

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