使用IRONBARCODE

创建一个Razor条码生成器Web应用程序

发布 2024年四月7日

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

IronBarcode 简介

IronBarcode是使用 .NET Core 的开发人员的必备工具，它提供了一个易于使用的库，可用于条形码生成和阅读。它之所以脱颖而出，是因为它可以简单地集成到您的项目中，只需最少的代码即可生成或破译条形码和 QR 码。这使得 IronBarcode 成为增强应用程序条码生成和条码读取功能的多功能选择，从使用 Razor 页面的网络应用程序到桌面和移动应用程序。其支持的条形码格式范围广泛，可确保满足各种项目要求，包括 .NET MVC、Blazor WebAssembly 应用程序和 Blazor 应用程序的要求，使其成为开发人员的可靠选择。

创建条码生成器的步骤

第 1 步：创建 ASP.NET Core Web 应用程序（Razor Pages）

我们可以为该项目选择 Blazor 应用程序或 Blazor 服务器应用程序。但在本教程中，我将使用 ASP.NET Core Web App(剃刀页). 在 Visual Studio 中使用 Razor Pages 创建 ASP.NET Core Web 应用程序涉及一系列简单明了的步骤。本指南将帮助您从零开始建立项目：

打开 Visual Studio：启动 Visual Studio。在开始窗口中，选择 "创建新项目"，开始设置新的网络应用程序。

选择项目类型：在 "创建新项目 "窗口中，您需要选择项目类型。在搜索框中键入 "Razor "以缩小选项范围，然后从项目模板列表中选择 "ASP.NET Core Web App"。选择后，单击 "下一步 "按钮继续。

创建新的 Razor 项目配置您的项目：系统将提示您配置新项目。

为您的网络应用程序输入 "项目名称"。
在您的计算机上选择一个合适的 "位置 "来存储项目文件。
如果希望 "解决方案名称 "与项目名称不同，可选择调整 "解决方案名称"。
单击 "下一步 "继续。
设置项目详细信息：在 "附加信息 "窗口中，请确保
在下拉菜单中选择相应的 .NET 版本。如需了解最新功能，请选择可用的最高版本。
确认 "Configure for HTTPS"（为 HTTPS 配置）已选中，以启用安全的 HTTP 连接。
点击 "创建"，开始创建新的 Razor Pages 网络应用程序。

第 2 步：安装 IronBarcode 库

要使用 Visual Studio 中的 NuGet 包管理器安装 IronBarcode，请按照以下步骤将其无缝集成到您的 ASP.NET Core Web App 或任何其他 .NET 项目中：

访问 NuGet 包管理器：右键单击 "解决方案资源管理器 "窗格中的项目名称，该窗格通常位于 Visual Studio 界面的右侧。从出现的上下文菜单中选择 "管理 NuGet 包..."这将打开 NuGet 包管理器选项卡。

搜索 IronBarcode：在 NuGet 软件包管理器选项卡中，点击 "浏览 "选项卡在线搜索软件包。在搜索框中输入 "IronBarcode"，即可找到 IronBarcode 库。

安装 IronBarcode：从搜索结果中找到 "IronBarcode "软件包。请确保您选择了正确的软件包，因为可能存在名称相似的软件包。点击 "IronBarcCode "软件包进行选择，然后点击 "安装 "按钮。 Visual Studio 可能会显示一个对话框，列出将要进行的更改，包括与 IronBarcode 一起安装的任何其他依赖项。查看更改并单击 "确定 "或 "接受 "继续安装。如果出现任何许可协议，请审阅并接受后继续。

通过 NuGet 软件包管理器安装 IronBarcode

步骤 3：设计用户界面

是时候关注我们网络应用程序的视觉效果了。我们将从增强索引页面开始。为此，请打开项目中的 index.cshtml 文件。该文件是主页的标记所在。为了使页面更具视觉吸引力和用户友好性，我们将应用一些自定义样式。

用于设计的 CSS：在 index.cshtml 文件的<head>部分或<style>标记中插入以下 CSS（如果直接在 HTML 中嵌入）：

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

HTML

该 CSS 代码旨在为索引页面打造简洁、现代的外观，使用 "Poppins "字体打造时尚外观，并为容器、按钮、表单控件等定义样式，以打造连贯的用户界面。您可以根据自己网络应用程序的具体设计要求进一步定制这些样式。

添加欢迎词：为了迎接用户并介绍应用程序的目的，我们将在页面上放置一条醒目的欢迎词。我们还将调整其颜色，使其与我们的设计主题相匹配。我们将在页面中央、欢迎词下方放置一个徽标图片。您可以这样做

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

HTML

为了继续设计您的条码生成器的用户界面，让我们集中精力在居中的布局中构建主要内容。下面的代码段演示了如何使用 Bootstrap 的网格系统将内容居中，并为表单、按钮或信息文本区域等其他 UI 组件做好准备。

<div class="container">

    <div class="row justify-content-center">

    </div>
</div>

<div class="container">

    <div class="row justify-content-center">

    </div>
</div>

HTML

设计输入表格

现在，在上述结构中，我们将设计我们的表单，以获取用户的输入来设计他们的 BarCode。我们将输入以下字段：条形码数据、条形码类型、最大宽度、最大高度和条形码颜色。代码如下：

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

        <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">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

        <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 容器：这就像网页上的一个盒子，里面装着与创建 BarCode 相关的所有内容。由于使用了 col-md-6 类，它的宽度是其父容器的一半。

表单元素：这是用户输入数据的页面部分。 method ="post "属性意味着表单提交后，信息会以其他人无法看到的方式发送到服务器。 enctype ="multipart/form-data "属性允许表单发送文件，如果您要上传图片或文件以生成 BarCode，这可能会很有用。

BarCode 数据：这是一个字段，用户可以在其中键入想要转化为 BarCode 的信息，如 URL 或一些文本。已将其标记为必填项，因此不填写此内容将无法提交表格。

BarCode 类型：在这里，用户可以选择要创建的条形码类型。选择来自以下列举(特别名单)此处未显示代码中定义的术语。用户可以键入搜索可用选项。

最大宽度和最大高度：用户可通过这些字段指定条形码的最大尺寸（以像素为单位）。它们可以防止 BarCode 过大，无法满足预期用途。

条形码的颜色：与条形码类型类似，用户可以从代码中定义的列表中挑选条形码的颜色。这样就可以定制 BarCode 的外观。

生成 BarCode 按钮：填写表格后，单击此按钮将信息发送到服务器，服务器会根据所提供的详细信息创建条形码。 asp-page-handler 属性表示服务器代码中处理该操作的特定方法。

消息容器：这是消息(如成功或错误信息)在提交表格后，将显示 "翻译"。这些信息将在服务器端设置并显示给用户，以便对所采取的行动提供反馈。

图片栏

现在要创建一栏，在这一栏中将显示生成的 BarCode 和下载按钮。下载按钮将有助于下载生成的按钮。下载前，您可以在输入框中添加 BarCode 名称。以下是实现该功能的代码：

<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>

<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>

HTML

图片专栏(col-md-6 图片边框):该分隔符在表格列旁创建一列(如果采用双栏布局). image-padding 类可能会在列的周围添加一些填充，以保持间距。

图片容器(图像容器):此 div 专门用于封装 BarCode 图像和相关控件。最初是隐藏的，通常在生成条形码后通过 JavaScript 使其可见。

BarCode 图像(条码图像):使用<img>标签显示生成的条形码。最初，src 属性为空，因为图像源将在生成条形码后动态设置。 alt 属性提供了图片的替代文字描述。

文件名输入：在条形码图像下方有一个输入框，用户可以在此输入他们希望保存条形码图像的文件名。这有助于在下载前对文件进行个性化处理。

下载按钮：在输入文件名的同时，还有一个标有 "下载 "的按钮。该按钮旨在触发生成的 BarCode 图像的下载，如果指定了文件名，则使用用户提供的文件名。

响应式布局(行类和列类):布局使用了 Bootstrap 的网格系统(行，COL-SM-8，COL-SM-4)确保文件名输入和下载按钮水平对齐，并能很好地适应不同的屏幕尺寸。 pr-1和pl-1类分别在这些元素的右侧和左侧添加了衬垫，以保持适当的间距。

生成 BarCode 时，源代码(来源)条形码图像<img>标签的内容更新为显示图像。用户可以在输入框中输入自己选择的文件名。点击 "下载 "按钮应触发图片下载，最好使用用户输入的名称。下载功能的具体细节(例如，设置文件名和处理下载操作)将使用与按钮的点击事件相关联的 JavaScript 或服务器端逻辑来实现。

脚本

现在需要添加下载按钮的功能、输入处理以及成功或错误信息的处理。我们可以使用 jQuery 来实现这一目标。下面是要添加到 index.cshtml 文件中的脚本：

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var messageTimeout;

            $("form").submit(function (event) {
                event.preventDefault();
                clearTimeout(messageTimeout);
                var formData = new FormData($(this)[0]);
                $.ajax({
                    url: '@Url.Page("Index", "Upload")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#messageContainer").show();
                        $("#message").html(data.message);

                        if (data.success && data.imagePath) {
                            $("#barcodeImage").attr("src", data.imagePath).show();
                            $("#imageContainer").show();
                        } else {
                            console.error("Barcode generation failed or no image path provided.");
                        }

                        messageTimeout = setTimeout(function () {
                            $("#messageContainer").fadeOut("slow");
                        }, 3000);
                    },

                    error: function (xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
            });

            $("#customDownloadBtn").click(function () {
                var fileName = $("#fileName").val().trim();
                if (fileName === "") {
                    fileName = "Generated Barcode";
                }
                var downloadLink = $("<a>").attr({
                    href: $("#barcodeImage").attr("src"),
                    download: fileName + ".png",
                    style: "display: none;"
                }).appendTo("body");
                downloadLink [0].click();
                downloadLink.remove();
            });
        });
    </script>
}

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var messageTimeout;

            $("form").submit(function (event) {
                event.preventDefault();
                clearTimeout(messageTimeout);
                var formData = new FormData($(this)[0]);
                $.ajax({
                    url: '@Url.Page("Index", "Upload")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#messageContainer").show();
                        $("#message").html(data.message);

                        if (data.success && data.imagePath) {
                            $("#barcodeImage").attr("src", data.imagePath).show();
                            $("#imageContainer").show();
                        } else {
                            console.error("Barcode generation failed or no image path provided.");
                        }

                        messageTimeout = setTimeout(function () {
                            $("#messageContainer").fadeOut("slow");
                        }, 3000);
                    },

                    error: function (xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
            });

            $("#customDownloadBtn").click(function () {
                var fileName = $("#fileName").val().trim();
                if (fileName === "") {
                    fileName = "Generated Barcode";
                }
                var downloadLink = $("<a>").attr({
                    href: $("#barcodeImage").attr("src"),
                    download: fileName + ".png",
                    style: "display: none;"
                }).appendTo("body");
                downloadLink [0].click();
                downloadLink.remove();
            });
        });
    </script>
}

JAVASCRIPT

防止默认表单提交：提交表单时，默认操作(将重新加载页面)防止出现错误。这样就可以用异步请求来代替，让用户保持在同一页面上，从而获得更流畅的体验。

表单数据收集：表单数据（包括输入的条形码数据、类型、尺寸和颜色）被收集到一个 FormData 对象中。这种方法尤其适用于处理文件上传或包含特殊字符的数据，而无需对数据进行手动编码。

AJAX 请求：使用 jQuery 的 $.ajax 方法向服务器发出异步请求。 url是动态生成的，以匹配Razor页面的上传处理程序("索引"、"上传")此外，还要确保表单数据是通过正确的服务器端方法处理的。在提交 FormData 对象时，必须使用 processData: false 和 contentType: false 选项，以防止 jQuery 转换数据，使服务器能够正确解释 multipart/form-data 格式。

成功处理：响应成功时，脚本会显示消息容器，并根据服务器的响应更新其内容。如果响应显示成功并包含图像路径，脚本将更新条形码图像的 src 属性并显示它。超时设置会在 3 秒后自动隐藏信息，提供淡出的用户反馈，以清理用户界面。

错误处理：如果请求出错，错误信息将记录到控制台。这种基本的处理方式可以扩展到直接在用户界面中提供用户反馈。

点击下载按钮：点击下载按钮时，脚本会检查用户是否输入了文件名。如果没有，则默认为 "生成 BarCode"。

创建下载链接：创建一个临时的 <a>元素，并配置其 href 属性指向条形码图像的源，download 属性设置为所需的文件名。(添加".png"，以符合预期的图像格式). 链接是隐藏的，因为它不是页面布局的一部分。

触发下载：脚本以编程方式点击链接，提示浏览器下载图像文件。之后，从文档中删除临时链接，进行清理。

该脚本直接与前面片段中定义的 HTML 元素交互，如输入条形码数据的表单、用于反馈的消息容器以及用于显示生成的条形码的图像容器。它使应用程序充满活力，允许异步生成和检索条形码而无需重新加载页面，并为用户提供下载生成的条形码图像的直观机制。

步骤 4：编写功能代码

定义颜色

在页面顶部，我们将添加以下一行：


using Color = IronSoftware.Drawing.Color.Drawing.Color.Color.Color.Color.Color.Color.Color.Color.Color.Color.Color.Color.Color

这将有助于理解我们正在使用的代码，从而理解我们用来在代码中添加颜色的 IronSoftware.Drawing.Color。

设计条形码颜色枚举

在您的 index.cshtml 文件中，定义一个名为 BarcodeColors 的枚举是指定用于生成条形码的颜色选项的重要组成部分。该枚举列出了各种颜色名称，它们与 IronDrawing 中的预定义颜色相对应。


公共枚举条码颜色

{

    AliceBlue、

    AntiqueWhite、

    Aqua、

    水叮当

    Azure、

    米色、

    Bisque、

    // 注：IronDrawWING 支持多种颜色的 BarCode。 如需完整清单，请参阅官方文档。

}

在 Razor 页面的 HTML 表格中(index.cshtml)条形码颜色输入字段和相关数据列表。该数据列表根据 BarcodeColors 枚举动态填充选项。

BarCode 类型枚举

BarcodeTypes 枚举与 BarcodeColors 枚举类似，在定义用户可在应用程序中生成的不同类型条形码方面起着至关重要的作用。该枚举列出了各种条形码格式，包括一维条形码和二维条形码(1D)和二维(2D)条形码，可满足各种使用情况和行业标准的要求。


公共枚举条码类型

{

    阿兹台克语、

    Codabar、

    Code128、

    Code39、

    Code93、

    DataMatrix、

    EAN13、

    EAN8、

    ITF、

    MSI、

    PDF417、

    Plessey、

    QRCode、

    UPCA、

    UPCE

}

在前端，特别是在您的 Razor 页面中(index.cshtml)该枚举用于填充下拉菜单(通过数据列表)允许用户选择要生成的条形码格式。

EnumToColor 辅助函数

此辅助函数 EnumToColor 旨在将 BarcodeColors 中的枚举值转换为相应的 IronSoftware.Drawing 对象。这种转换对于应用程序中的后端处理至关重要，在后端处理中，需要将用户选择的条形码颜色翻译成可应用于条形码图像生成过程的颜色。


私有颜色 EnumToColor(条码颜色 colorEnum)

{

    返回 colorEnum 开关

    {

        BarcodeColors.AliceBlue => Color.AliceBlue、

        BarcodeColors.AntiqueWhite => Color.AntiqueWhite、

        BarcodeColors.Aqua => Color.Aqua、

        BarcodeColors.Aquamarine => Color.Aquamarine、

        BarcodeColors.Azure => Color.Azure、

        BarcodeColors.Beige => Color.Beige、

        BarcodeColors.Bisque => Color.Bisque、

        _ => Color.Black, // 默认或备用颜色

    //等等!

    };

}

该函数接受一个 BarcodeColors 类型的参数，即代表用户选择的条形码颜色的枚举。它将返回一个与传递给它的枚举值相对应的 IronSoftware.Drawing 对象。

该函数使用 C# 8.0 中引入的开关表达式，将 colorEnum 参数与每个可能的 BarcodeColors 枚举值进行匹配。对于开关表达式中的每种情况，它都会返回与枚举值名称相匹配的 System.Drawing.Color 对象。例如，如果传入 BarcodeColors.AliceBlue，它将返回 Color.AliceBlue。

切换表达式涵盖了 BarcodeColors 枚举中所有定义的颜色，确保任何选定的颜色都能准确地翻译成 IronSoftware.Drawing 对象。如果枚举值不符合任何情况(如果覆盖所有案件，就不会出现这种情况)，默认情况下返回 Color.Black（黑色）作为备用。

BarCode 类型助手功能

GetBarcodeEncoding 函数是应用程序后台逻辑的关键部分，旨在从用户友好的枚举中映射所选的条形码类型。(条码类型)条码生成库所需的特定编码(在此表示为 BarcodeWriterEncoding).


私有条码写入器编码 GetBarcodeEncoding(条码类型 barcodeType)

{

    返回条形码类型转换

    {

        BarcodeTypes.Aztec => BarcodeWriterEncoding.Aztec、

        BarcodeTypes.Codabar => BarcodeWriterEncoding.Codabar、

        BarcodeTypes.Code128 => BarcodeWriterEncoding.Code128、

        BarcodeTypes.Code93 => BarcodeWriterEncoding.Code93、

        BarcodeTypes.DataMatrix => BarcodeWriterEncoding.DataMatrix、

        BarcodeTypes.EAN13 => BarcodeWriterEncoding.EAN13、

        BarcodeTypes.EAN8 => BarcodeWriterEncoding.EAN8、

        BarcodeTypes.ITF => BarcodeWriterEncoding.ITF、

        BarcodeTypes.MSI => BarcodeWriterEncoding.MSI、

        BarcodeTypes.PDF417 => BarcodeWriterEncoding.PDF417.X => BarcodeWriterEncoding.PDF417.X

        BarcodeTypes.Plessey => BarcodeWriterEncoding.Plessey、

        BarcodeTypes.QRCode => BarcodeWriterEncoding.QRCode、

        BarcodeTypes.UPCA => BarcodeWriterEncoding.UPCA、

        BarcodeTypes.UPCE => BarcodeWriterEncoding.UPCE、

        _ => BarcodeWriterEncoding.QRCode, // 默认或后备编码

    };

}

该函数接受一个 BarcodeTypes 类型的参数，表示用户选择的条形码格式。它返回 BarcodeWriterEncoding 的值，该值与条码生成库支持的编码类型直接对应。

利用切换表达式，该函数将条形码类型参数与 BarcodeTypes 枚举中的每个定义值进行匹配。对于开关表达式中的每种情况，它都会返回等效的 BarcodeWriterEncoding 值。例如，如果传入 BarcodeTypes.Code128，函数返回 BarcodeWriterEncoding.Code128。

该综合开关表达式可确保用户可选择的每种条形码格式都有相应的编码类型，以便条形码生成库加以利用。默认情况下返回 BarcodeWriterEncoding.QRCode 作为备用。这种默认行为的选择假定 QR 代码是一种常见的、广泛适用的选择；但是，可以对默认行为进行定制，以符合您应用程序的要求，甚至在遇到不支持的条形码类型时抛出异常。

添加 Message 和 BarcodeImageUrl 属性

这些属性用于传达操作结果(如生成条形码)返回剃须刀页面(.cshtml文件)并分别保存生成的 BarCode 图像的 URL。在您的 Razor 页面中，您可以访问这些属性，向用户显示信息和条形码图像。


公共字符串 Message{获取； 设置; }

公共字符串 BarcodeImageUrl{获取； 设置; }

OnPostUpload 函数签名

这是 HTTP POST 处理程序的签名。ASP.NET核心 Razor Pages 应用程序。其设计目的是对提交的生成 BarCode 的表单做出响应。


公共 JsonResult OnPostUpload(字符串 barcodeText、字符串 barcodeType、int? maxWidth, int? maxHeight, 字符串 barcodeColor, 字符串 correctionLevel)

{

}

该函数从表单中接收多个参数：

条形码文本：要编码到 BarCode 中的数据。

条形码类型：要生成的条形码类型(例如 QR 码、Code128 码).

maxWidth 和 maxHeight：可选参数，用于指定生成的 BarCode 的尺寸。

barcodeColor：条形码的颜色。

校正级别：未在提供的片段中使用，但通常与某些条形码类型（如 QR 码）的纠错级别有关。

编码选择和条形码生成

现在是开始执行逻辑的时候了。以下是代码脚本：


BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode.NET； // 默认为 QRCode

// 尝试将条形码类型解析为相应的条形码类型枚举

如果(Enum.TryParse<BarcodeTypes>(barcodeType, true, out var barcodeTypeEnum))

{

    encoding = GetBarcodeEncoding(条码类型);

}

其他

{

    // 处理 barcodeType 与任何枚举值不匹配的情况

    返回新的 JsonResult(新{success = false, message = "选择的条形码类型无效"。});

}

var myBarcode = BarcodeWriter.CreateBarcode(条码文本、编码);

最初，会设置默认的 BarCode 编码。该函数尝试将 barcodeType 字符串解析为 BarcodeTypes 枚举。如果成功，它将调用 GetBarcodeEncoding，这是一个辅助函数，可将 BarcodeTypes 映射到条形码写入器库所需的特定编码。(条码写入器编码). 如果条形码类型无效，则返回错误。然后，用指定的文本和编码生成 BarCode。

颜色转换和条形码定制

本部分处理条形码的颜色和尺寸定制。首先检查是否指定了颜色。如果是这样，它会尝试将此颜色解析为 BarcodeColors 枚举，然后使用 EnumToColor 辅助函数将其转换为 System.Drawing.Color 对象。如果颜色无效，将返回错误信息。接下来，如果提供了 maxWidth 和 maxHeight，它就会根据这些尺寸调整条形码的大小。


// 将条码颜色字符串转换为颜色对象

如果(!string.IsNullOrEmpty(条形码颜色))

{

    // 尝试将 barcodeColor 解析为相应的 BarcodeColors 枚举

    如果(Enum.TryParse<BarcodeColors>(barcodeColor, true, out var barcodeColorEnum))

    {

        // 将枚举转换为颜色对象

        var color = EnumToColor(条码颜色枚举);

        myBarcode.ChangeBarCodeColor(color, true);

    }

    其他

    {

        // 处理 barcodeType 与任何枚举值不匹配的情况

        返回新的 JsonResult(新{success = false, message = "选择的颜色无效"。});

    }

}

如果(maxWidth.HasValue && maxHeight.HasValue)

{

    myBarcode.ResizeTo(maxWidth.Value, maxHeight.Value);

}

保存和返回 BarCode 图像

最后，将生成的 BarCode 图像保存到服务器。使用当前时间戳创建唯一的文件名，以避免命名冲突。 BarCode 保存在特定目录中(wwwroot/barcodes)如果图像还不存在，则会创建一个".NET "图像。保存图像后，会准备一条成功消息，并返回一个 JSON 响应，包括成功状态、消息和生成条形码图像的路径。这样，客户端应用程序就可以显示生成的 BarCode 或为用户提供下载链接。


// 保存和返回 BarCode 图像的其余代码...

var barcodesFolderPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "条形码");

Directory.CreateDirectory(条码文件夹路径);

var fileName = $"barcode_{DateTime.Now:yyyyMMddHHmmssfff}.png"；

var filePath = Path.Combine(条码文件夹路径，文件名);

myBarcode.SaveAsImage(文件路径);

this.Message = $"QR 代码生成成功。 文件名：{文件名}";

返回新的 JsonResult(新{success = true, message = Message, imagePath = $"/barcodes/{文件名}"});

编辑 _Layout.cshtml

在 _Layout.cshtml 文件中，我们删除了页眉和页脚标签，以使我们的应用程序看起来更美观、更简约。这就是最终的 _Layout.cshtml 文件的样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData ["Title"] - Barcode_Generator_Razor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Barcode_Generator_Razor.styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData ["Title"] - Barcode_Generator_Razor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Barcode_Generator_Razor.styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

HTML

运行应用程序

您可以单击绿色的 "开始 "箭头或按 F5 键开始调试，运行您的应用程序。如果您希望在不连接调试器的情况下运行，请按 Ctrl + F5。

输出的网络应用程序首先键入您要编码到 BarCode 中的信息。这可以是您希望转换成 BarCode 格式的任何文本或 URL。单击标有 "Barcode 类型 "的下拉菜单。列表中将出现不同的 BarCode 格式。您可以在此处键入以筛选列表，并选择适合您需要的 BarCode 类型。例如，您可以从列表中选择 "Aztec "或 "QR Code"。

选择条形码类型查找标有 "最大宽度(px)"和 "最大高度(px)."在此，您将输入条形码的最大尺寸，以确保条形码的尺寸适合您的应用程序。请尝试将两者都输入 300，以保持条形码足够大，便于扫描，但也不要太大，以适合您所需的介质。

设置好条形码的宽度和高度后单击 "Barcode 颜色 "下拉菜单。将弹出一个包含颜色选项的列表，类似于条形码类型选择。您可以滚动查看所有颜色，也可以开始键入查找特定颜色，如 "AliceBlue"。

选择条形码颜色后填写完所有字段后，点击 "生成 BarCode "按钮。网络应用程序将使用您提供的数据创建显示在屏幕上的 BarCode 图像。它将显示在输入表单的侧面。在前端代码中，我们将这一部分称为图像列。

在图像列中输出条形码您可以再次通过选择不同的颜色并单击生成 BarCode 按钮来更改条形码的颜色。

将颜色改为深洋红色如果您对屏幕上显示的生成的 BarCode 感到满意，您将看到一个输入文件名的选项。命名您的文件后，单击 "下载 "按钮将条形码图像保存到您的计算机上。当您检查项目中的 BarCode 文件夹时，会在此文件夹中看到生成的条形码。

在文件中下载条形码图像

结论

总之，条码生成器网络应用程序提供了一种创建自定义条码的直接方法。用户可以轻松输入数据、选择条形码类型、设置尺寸和挑选颜色，然后生成符合其特定需求的条形码。该工具设计简单，可快速创建和定制 BarCode。 IronBarcode 是支持该应用程序的库，它提供了一个免费试用让用户测试其功能。如果您发现该工具符合您的要求，您可以获得起价为 749 美元的许可证，从而为您的项目释放 IronBarcode 的全部功能。

要在网络应用程序中生成 QR 代码图像，我建议使用IronQR因为它专门用于处理二维码。

< 前一页
如何在 .NET MAUI 应用程序中使用文档扫描仪 SDK

下一步 >
如何在 VB .NET 中生成条形码

准备开始了吗？版本： 2024.11 刚刚发布

查看许可证 >

创建一个Razor条码生成器Web应用程序

IronBarcode 简介

创建条码生成器的步骤

第 1 步：创建 ASP.NET Core Web 应用程序（Razor Pages）

第 2 步：安装 IronBarcode 库

步骤 3：设计用户界面

设计输入表格

下面用更简单的语言介绍每个部分的作用：

图片栏

脚本

步骤 4：编写功能代码

定义颜色

设计条形码颜色枚举

BarCode 类型枚举

EnumToColor 辅助函数

BarCode 类型助手功能

添加 Message 和 BarcodeImageUrl 属性

OnPostUpload 函数签名

编码选择和条形码生成

颜色转换和条形码定制

保存和返回 BarCode 图像

编辑 _Layout.cshtml

运行应用程序

结论

在此页面上

报告问题

准备开始了吗？版本： 2024.11 刚刚发布

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥立即。

试用表格已提交
成功地.

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥立即。

受到全球数百万工程师的信任

IronBarcode
是IRON的一部分套装

创建一个Razor条码生成器Web应用程序

IronBarcode 简介

创建条码生成器的步骤

第 1 步：创建 ASP.NET Core Web 应用程序（Razor Pages）

第 2 步：安装 IronBarcode 库

步骤 3：设计用户界面

设计输入表格

下面用更简单的语言介绍每个部分的作用：

图片栏

脚本

步骤 4：编写功能代码

定义颜色

设计条形码颜色枚举

BarCode 类型枚举

EnumToColor 辅助函数

BarCode 类型助手功能

添加 Message 和 BarcodeImageUrl 属性

OnPostUpload 函数签名

编码选择和条形码生成

颜色转换和条形码定制

保存和返回 BarCode 图像

编辑 _Layout.cshtml

运行应用程序

结论

在此页面上

报告问题

准备开始了吗？ 版本： 2024.11 刚刚发布

试用表格已提交成功地.

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥 立即。

试用表格已提交成功地.

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥 立即。

受到全球数百万工程师的信任

IronBarcode是IRON的一部分套装

准备开始了吗？版本： 2024.11 刚刚发布

试用表格已提交
成功地.

获取您的免费 0天试用密钥立即。

试用表格已提交
成功地.

获取您的免费 0天试用密钥立即。

IronBarcode
是IRON的一部分套装