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

創建Razor條碼生成器Web應用

Jordi Bardia
Jordi Bardia
更新日期:

Razor Barcode Generator Tutorial

Razor Barcode Generator is a handy tool that simplifies the creation of barcodes for developers and businesses alike. Integrating barcode generation into web applications enhances the functionality and user experience, making it straightforward to produce a variety of barcode types. Whether you're managing inventory, tracking assets, or streamlining checkout processes, utilizing a Razor Barcode Generator can significantly improve efficiency and accuracy. We'll use IronBarcode in this tutorial for creating a barcode generator.

Introduction to IronBarcode

IronBarcode is an essential tool for developers working with .NET Core, offering an easy-to-use library for barcode generation and reading. It stands out because of its simplicity in integrating into your projects, requiring minimal code to produce or decipher barcodes and QR codes. This makes IronBarcode a versatile choice for enhancing applications with both barcode generation and barcode reading functionality, from web applications using Razor pages to desktop and mobile applications. Its broad range of supported barcode formats ensures that it can meet diverse project requirements, including those for .NET MVC, Blazor WebAssembly app, and Blazor App, making it a reliable choice for developers.

Steps to Create a Barcode Generator

Step 1: Create ASP.NET Core Web App (Razor Pages)

Creating an ASP.NET Core Web App with Razor Pages in Visual Studio is straightforward. This guide will help you set up your project from scratch:

  1. Open Visual Studio: Start Visual Studio. On the start window, select "Create a new project" to begin the process of setting up your new web application.
  2. Choose Project Type: In the "Create a new project" window, select "ASP.NET Core Web App" from the list of project templates. Then, click "Next" to proceed.

Creating a new Razor project

  1. Configure Your Project: You'll now be prompted to configure your new project.
    • Enter a "Project Name" for your web application.
    • Choose a suitable "Location" on your computer where the project files will be stored.
    • Optionally, adjust the "Solution name".
    • Click "Next" to continue.

Configuring the project name, solution name, and file path

  1. Set Up Project Details: In the "Additional Information" window, make sure to:
    • Select the appropriate version of .NET.
    • Verify that "Configure for HTTPS" is checked.
    • Click "Create" to initiate the creation of your new Razor Pages web application.

Setting additional information

Step 2: Install the IronBarcode Library

To install IronBarcode using the NuGet Package Manager in Visual Studio:

  1. Access the NuGet Package Manager: Right-click on your project name in the Solution Explorer pane. Select "Manage NuGet Packages…" to open the NuGet Package Manager tab.
  2. Search for IronBarcode: In the "Browse" tab, type "IronBarcode" to find the library.
  3. Install IronBarcode: Select "IronBarCode" and click "Install". Review any dependencies and license agreements, then accept to proceed.

Installing IronBarcode through the NuGet package manager

Step 3: Design the UI

Enhance the Index page by editing the index.cshtml file. Apply custom styling:

<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

Adding a Welcome Message:

<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

Structuring the Main Content:

<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

Design Input Form:

Include the form to collect user input for barcode generation:

<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

Image Column:

For displaying and downloading the generated barcode:

<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

Scripts:

Add functionality to handle input and download actions using 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

Step 4: Writing Functional Code

Define Color:

At the top of your index.cshtml file, add:

using Color = IronSoftware.Drawing.Color;
using Color = IronSoftware.Drawing.Color;
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Barcode Colors Enum:

Define available colors for barcodes:

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

Barcode Types Enum:

Define available types of barcodes:

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

Helper Functions:

Convert enums to color and barcode encoding:

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 Function:

Handle form submission for barcode generation:

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 Editing:

Edit \_Layout.cshtml for a minimalist design:

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

Run Application

Run your application by pressing F5 or Ctrl + F5. Follow the instructions onscreen to input data, choose a barcode type, set dimensions, and generate a barcode.

Outputted web application

結論

The barcode generator web application offers an easy way to create custom barcodes. You can input data, select a barcode type, set dimensions, and choose a color before generating a barcode. IronBarcode powers this application with a free trial, and licenses start at $799.

For generating QR Code images, consider using 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 天試用→完整產品。無限制。無需信用卡。 開始免費試用