USING IRONBARCODE

Creating a Razor Barcode Generator Web App

已更新:七月 28, 2025

Razor Barcode Generator Tutorial

Razor 条形码生成器是一款实用工具，为开发人员和企业简化了条形码的创建。在 Web 应用程序中集成条形码生成可以增强功能和用户体验，使得生成各种类型的条形码变得简单直观。无论您是在管理库存、跟踪资产，还是简化结账流程，利用 Razor 条形码生成器都可以显著提高效率和准确性。我们将在本教程中使用 IronBarcode 来创建一个条形码生成器。

IronBarcode 简介

IronBarcode is an essential tool for developers working with .NET Core, offering an easy-to-use library for 条形码生成和读取。它的突出特点在于其简单易用，可轻松集成到您的项目中，仅需极少的代码即可生成或辨别条形码和二维码。这使得 IronBarcode 成为增强应用程序条形码生成和读取功能的多用途选择，从使用 Razor 页面到桌面和移动应用程序的 Web 应用程序均可使用。其广泛支持的条形码格式确保其可以满足各种项目需求，包括 .NET MVC、Blazor WebAssembly 应用程序和 Blazor 应用程序的需求，使其成为开发人员的可靠选择。

创建条形码生成器的步骤

步骤 1：创建 ASP.NET Core Web 应用程序（Razor 页面）

在 Visual Studio 中创建带有 Razor 页面的 ASP.NET Core Web 应用程序非常简单。本指南将帮助您从头开始设置项目：

打开 Visual Studio：启动 Visual Studio。在启动窗口上，选择“创建新项目”以开始设置新 Web 应用程序的过程。
选择项目类型：在“创建新项目”窗口中，从项目模板列表中选择“ASP.NET Core Web 应用程序”。然后，点击“下一步”以继续。

创建新的 Razor 项目

配置您的项目：现在您需要配置新项目。
- 输入您的 Web 应用程序的“项目名称”。
- 选择项目文件将存储在计算机上的合适“位置”。
- 可选地，调整“解决方案名称”。
- 点击“下一步”继续。

配置项目名称、解决方案名称和文件路径

设置项目详细信息：在“附加信息”窗口中，请确保：
- 选择适当版本的 .NET。
- 确保选中了“配置 HTTPS”。
- 点击“创建”以开始创建新的 Razor 页面 Web 应用程序。

设置附加信息

步骤 2：安装 IronBarcode 库

要在 Visual Studio 中使用 NuGet 包管理器安装 IronBarcode：

访问 NuGet 包管理器：在“解决方案资源管理器”窗格中右键单击您的项目名称。选择“管理 NuGet 包…”以打开 NuGet 包管理器选项卡。
搜索 IronBarcode：在“浏览”选项卡中，输入“IronBarcode”以找到库。
安装 IronBarcode：选择“IronBarcode”并点击“安装”。查看任何依赖项和许可协议，然后接受继续。

通过 NuGet 包管理器安装 IronBarcode

步骤 3：设计界面

通过编辑 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

步骤 4：编写功能代码

定义颜色：

在 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 应用程序

结论

此条形码生成器 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 项目集成，为开发者处理现代 web 应用提供了灵活性。

Jordi Bardia

立即与工程团队聊天

软件工程师

Jordi 最擅长 Python、C# 和 C++，当他不在 Iron Software 利用这些技能时，他就在游戏编程。分享产品测试、产品开发和研究的责任，Jordi 在持续的产品改进中增加了巨大的价值。多样的经验使他面临挑战并保持投入，他表示这是在 Iron Software 工作的最喜欢的方面之一。Jordi 在佛罗里达州迈阿密长大，并在佛罗里达大学学习计算机科学和统计学。

How to Use a Document Scanner SDK in a .NET MAUI Application

How to Generate Barcodes in VB .NET

客户亮点：

开发者焦点：

网络研讨会：

Creating a Razor Barcode Generator Web App

Razor Barcode Generator Tutorial

IronBarcode 简介

创建条形码生成器的步骤

步骤 1：创建 ASP.NET Core Web 应用程序（Razor 页面）

步骤 2：安装 IronBarcode 库

步骤 3：设计界面

添加欢迎消息：

结构化主要内容：

设计输入表单：

图像列：

脚本：

步骤 4：编写功能代码

定义颜色：

条形码颜色枚举：

条形码类型枚举：

助手函数：

OnPostUpload 函数：

布局编辑：

运行应用程序

结论

常见问题解答

如何将条码生成集成到 ASP.NET Core Web 应用中？

设置 Razor Pages 项目用于条码生成的步骤有哪些？

如何通过 NuGet 包管理器安装 IronBarcode？

使用 IronBarcode 进行条形码生成的好处是什么？

如何使用 IronBarcode 自定义条码外观？

OnPostUpload 函数在条码生成过程中有什么作用？

我可以在 Blazor 应用中使用 IronBarcode 吗？

Creating a Razor Barcode Generator Web App

Razor Barcode Generator Tutorial

IronBarcode 简介

创建条形码生成器的步骤

步骤 1：创建 ASP.NET Core Web 应用程序（Razor 页面）

步骤 2：安装 IronBarcode 库

步骤 3：设计界面

添加欢迎消息：

结构化主要内容：

设计输入表单：

图像列：

脚本：

步骤 4：编写功能代码

定义颜色：

条形码颜色枚举：

条形码类型枚举：

助手函数：

OnPostUpload 函数：

布局编辑：

运行应用程序

结论

常见问题解答

如何将条码生成集成到 ASP.NET Core Web 应用中？

设置 Razor Pages 项目用于条码生成的步骤有哪些？

如何通过 NuGet 包管理器安装 IronBarcode？

使用 IronBarcode 进行条形码生成的好处是什么？

如何使用 IronBarcode 自定义条码外观？

OnPostUpload 函数在条码生成过程中有什么作用？

我可以在 Blazor 应用中使用 IronBarcode 吗？

相关文章

How to Print Barcodes in Crystal Reports with VB.NET

IronBarcode vs. Open-Source Barcode Readers in .NET

How to Scan Barcodes in an ASP.NET Application

下一步：开始免费 30 天试用

下一步：开始免费 30 天试用

深受全球 200 多万工程师信赖