在实际环境中测试
在生产中测试无水印。
随时随地为您服务。
全面功能产品
获取30天的完全功能产品。
几分钟内即可启动和运行。
24/5 技术支持
在您的产品试用期间，全面访问我们的支持工程团队。
使用IRONBARCODE
创建一个Razor条码生成器Web应用程序
发布 2024年四月7日
Razor Barcode Generator 是一款方便的工具，可简化开发人员和企业创建条形码的工作。将条形码生成集成到网络应用程序中可增强功能和用户体验，直接生成各种类型的条形码。无论您是管理库存、跟踪资产还是简化结账流程，使用 Razor 条码生成器都能显著提高效率和准确性。我们将使用 IronBarcode 在本教程中，您可以创建一个条形码生成器。
IronBarcode 简介
IronBarcode 是使用 .NET Core 的开发人员的必备工具，它提供了一个易于使用的库，可用于 条形码生成 和阅读。IronBarcode的突出之处在于它易于集成到您的项目中，只需最少的代码即可生成或破译条形码和QR码。这使得 IronBarcode 成为增强应用程序条码生成和条码读取功能的多功能选择，从使用 Razor 页面的网络应用程序到桌面和移动应用程序。其支持的条形码格式范围广泛，可确保满足各种项目要求，包括.NET MVC、Blazor WebAssembly应用程序和Blazor应用程序的要求，使其成为开发人员的可靠选择。
创建条码生成器的步骤
第 1 步：创建 ASP.NET Core Web 应用程序 (剃刀页)
我们可以为本项目选择 Blazor 应用程序或 Blazor 服务器应用程序。但在本教程中，我将使用 ASP.NET Core Web 应用程序 (剃刀页).在 Visual Studio 中使用 Razor Pages 创建 ASP.NET Core Web 应用程序涉及一系列简单明了的步骤。本指南将帮助您从头开始创建项目：
打开 Visual Studio：启动 Visual Studio。在开始窗口中，选择 "创建一个新项目"，开始设置新网络应用程序的过程。
选择项目类型：在 "创建新项目 "窗口中，你需要选择项目类型。在搜索框中键入 "Razor "以缩小选项范围，然后从项目模板列表中选择 "ASP.NET Core Web App"。选择后，点击 "Next（下一步）"按钮继续。
配置项目：现在系统会提示你配置新项目。
- 输入网络应用程序的 "项目名称"。
- 在计算机上选择一个合适的 "位置 "来存储项目文件。
- 如果希望 "解决方案名称 "与项目名称不同，也可选择调整 "解决方案名称"。
- 点击 "下一步 "继续。
设置项目详细信息：在 "附加信息 "窗口中，确保
- 在下拉菜单中选择相应的 .NET 版本。要获得最新功能，请选择可用的最高版本。
选中 "Configure for HTTPS "以启用安全 HTTP 连接。
- 点击 "创建"，开始创建新的 Razor Pages Web 应用程序。
第 2 步：安装 IronBarcode 库
要在 Visual Studio 中使用 NuGet 包管理器安装 IronBarcode，请按照以下步骤将其无缝集成到 ASP.NET Core Web App 或任何其他 .NET 项目中：
访问 NuGet 包管理器：右键单击 "解决方案资源管理器 "窗格中的项目名称，该窗格通常位于 Visual Studio 界面的右侧。从出现的上下文菜单中选择 "Manage NuGet Packages...（管理 NuGet 包...）"。这将打开 NuGet 包管理器选项卡。
搜索 IronBarcode：在 NuGet 软件包管理器标签中，点击 "浏览 "标签在线搜索软件包。在搜索框中输入 "IronBarcode"，即可找到 IronBarcode 库。
安装 IronBarcode：从搜索结果中找到 "IronBarCode "软件包。请确保您选择了正确的软件包，因为可能有名称相似的软件包。单击 "IronBarCode "软件包将其选中，然后单击 "安装 "按钮。Visual Studio 可能会显示一个对话框，列出将要进行的更改，包括与 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
设计输入表格
现在，在上述结构中，我们将设计我们的表单，以获取用户的输入，从而设计他们的条形码。我们将输入以下字段：条形码数据、条形码类型、最大宽度、最大高度和条形码颜色。以下是代码
<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
下面用更简单的语言介绍一下每个部件的作用：
容器：它就像网页上的一个盒子，装着与创建条形码相关的所有内容。由于使用了 col-md-6 类，它的宽度是其父容器的一半。
表单元素：这是用户输入数据的页面部分。method ="post "属性表示提交表单时，信息会以其他人看不到的方式发送到服务器。enctype ="multipart/form-data "属性允许表单发送文件，这在上传图片或文件以生成条形码时非常有用。
条形码数据：这是一个字段，用户可以在此输入他们希望转化为条形码的信息，如 URL 或一些文本。该字段被标记为必填字段，因此不填写该字段就无法提交表单。
条形码类型：在此，用户可以选择要创建的条形码类型。选择来自一个枚举 (特别名单) 用代码定义，此处未显示。用户可以键入搜索可用选项。
最大宽度和最大高度：这些字段允许用户以像素为单位指定条形码的最大尺寸。它们可防止条形码过大，无法满足预期用途。
条形码颜色：与条形码类型类似，用户可以从代码中定义的列表中选择条形码的颜色。这样就可以自定义条形码的外观。
生成条形码按钮：填写表格后，单击此按钮可将信息发送到服务器，服务器会根据所提供的详细信息创建条形码。asp-page-handler 属性表示服务器代码中处理此操作的特定方法。
消息容器：消息容器 (如成功或错误信息) 将在表单提交后显示。这些信息在服务器端设置，并显示给用户，以提供对所做操作的反馈。
图像列
现在是创建一列的时候了，在这一列中将显示生成的条形码和下载按钮。下载按钮有助于下载生成的按钮。您可以在下载前在输入框中添加条形码名称。以下是实现此功能的代码：
<!-- 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 专门用于封装条形码图像和相关控件。它最初是隐藏的，通常在生成条形码后通过 JavaScript 使其可见。
条形码图像 (条码图像):<img>标记用于显示生成的条形码。最初，src 属性为空，因为图像源将在生成条形码后动态设置。alt 属性提供了图像的替代文本描述。
文件名输入：在条形码图像下方有一个输入框，用户可在此输入希望保存条形码图像的文件名。这对下载前个性化文件非常有用。
下载按钮：在输入文件名的同时，还有一个标有 "下载 "的按钮。该按钮的目的是使用用户提供的文件名（如有指定），触发下载生成的条形码图像。
响应式布局 (行类和列类):布局使用了 Bootstrap 的网格系统 (行，COL-SM-8，COL-SM-4) 以确保文件名输入和下载按钮水平对齐，并能很好地适应不同的屏幕尺寸。pr-1和pl-1类分别在这些元素的右侧和左侧添加了衬垫，以保持适当的间距。
生成条形码时，源代码 (来源) 的条形码图像 <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>
}JAVASCRIPT
防止默认表单提交：提交表单时，默认操作 (将重新加载页面) 会被阻止。这样就可以用异步请求来代替，让用户在同一页面上获得更流畅的体验。
表单数据收集：表单数据（包括输入的条形码数据、类型、尺寸和颜色）会被收集到一个 FormData 对象中。这种方法特别适用于处理文件上传或包含特殊字符的数据，而无需对数据进行手动编码。
AJAX 请求：使用jQuery的$.ajax方法向服务器发出异步请求。url是动态生成的，以匹配Razor页面的上传处理程序 ("索引"、"上传")以确保表单数据被正确的服务器端方法处理。在提交 FormData 对象时，有必要使用 processData: false 和 contentType: false 选项，以防止 jQuery 转换数据，使服务器能正确解释 multipart/form-data 格式。
成功处理：响应成功时，脚本会显示信息容器，并根据服务器的响应更新其内容。如果响应显示成功并包含图像路径，脚本将更新条形码图像的 src 属性并显示它。超时设置会在 3 秒后自动隐藏信息，提供淡出的用户反馈，以清理用户界面。
错误处理：如果请求出错，错误信息会记录到控制台。这一基本处理方法可以扩展，直接在用户界面中提供用户反馈。
点击下载按钮：点击下载按钮时，脚本会检查用户是否输入了文件名。如果没有，则默认为 "生成的条形码"。
创建下载链接：创建一个临时的<a>元素，并配置 href 属性指向条形码图像源，下载属性设置为所需的文件名 (添加".png"，以符合预期的图像格式).该链接被隐藏起来，因为它不是页面布局的一部分。
触发下载：脚本以编程方式点击链接，提示浏览器下载图像文件。之后，从文档中删除临时链接，以进行清理。
该脚本直接与前面片段中定义的 HTML 元素交互，如输入条形码数据的表单、反馈信息容器和显示生成的条形码的图像容器。它使应用程序动态化，允许异步生成和检索条形码而无需重新加载页面，并为用户下载生成的条形码图像提供了一种直观的机制。
步骤 4：编写功能代码
定义颜色
在页面顶部，我们将添加以下一行：
using Color = IronSoftware.Drawing.Color.Color.Color.Color.Color.Color.Color.Color.Color.Color.Color
这将有助于理解我们正在使用的代码，从而理解我们用来在代码中添加颜色的 IronSoftware.Drawing.Color。
设计条形码颜色枚举
在您的 index.cshtml 文件中，定义一个名为 BarcodeColors 的枚举是指定用于生成条形码的颜色选项的重要组成部分。该枚举列出了各种颜色名称，它们与 IronDrawing 中预定义的颜色相对应。
公共枚举条码颜色
{
爱丽丝蓝
古董白
水蓝色
海蓝宝石
天蓝色
米色
双色
// 注意：IronDRAWING 支持多种颜色的条形码。有关完整列表，请参阅官方文档。
}
在 Razor 页面的 HTML 表格中 (index.cshtml)条形码颜色输入字段和相关数据列表。该数据列表根据 BarcodeColors 枚举动态填充选项。
条码类型枚举
BarcodeTypes 枚举与 BarcodeColors 枚举类似，在定义用户可在应用程序中生成的不同条形码类型方面起着至关重要的作用。该枚举列出了各种条形码格式，包括一维的 (1D) 和二维 (2D) 条形码，可满足各种使用情况和行业标准的要求。
公共枚举条码类型
{
阿兹台克
科达巴尔语
Code128、
Code39、
Code93、
数据矩阵
EAN13、
EAN8、
ITF、
MSI、
PDF417
Plessey、
QRCode
UPCA、
UPCE
}
在前端，特别是在您的 Razor 页面中 (index.cshtml)该枚举用于填充下拉菜单 (通过数据列表) 允许用户选择要生成的条形码格式。
EnumToColor 辅助函数
此辅助函数 EnumToColor 用于将 BarcodeColors 中的枚举值转换为相应的 IronSoftware.Drawing 对象。这种转换对于应用程序的后端处理至关重要，在后端处理中，条形码的选定颜色需要从用户的选择转换为可应用于条形码图像生成过程的颜色。
私有颜色 EnumToColor(条码颜色 colorEnum)
{
return colorEnum switch
{
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 枚举值进行匹配。对于 switch 表达式中的每种情况，它都会返回与枚举值名称相匹配的 System.Drawing.Color 对象。例如，如果传入 BarcodeColors.AliceBlue，则返回 Color.AliceBlue。
开关表达式涵盖了 BarcodeColors 枚举中所有定义的颜色，确保任何选定的颜色都能准确地转换为 IronSoftware.Drawing 对象。如果枚举值与任何情况下的 (如果覆盖所有案件，就不会出现这种情况)，默认情况下返回 Color.Black（黑色）作为备用。
条码类型辅助功能
GetBarcodeEncoding 函数是应用程序后台逻辑的关键部分，旨在从用户友好的枚举中映射所选的条形码类型。 (条码类型) 条码生成库所需的特定编码 (在此表示为 BarcodeWriterEncoding).
私有条码写入器编码 GetBarcodeEncoding(条码类型 barcodeType)
{
return barcodeType switch
{
BarcodeTypes.Aztec => BarcodeWriterEncoding.Aztec.BarcodeTypes.Aztec => BarcodeWriterEncoding.Aztec.BarcodeTypes.Aztec
BarcodeTypes.Codabar => BarcodeWriterEncoding.Codabar、
BarcodeTypes.Code128 => BarcodeWriterEncoding.Code128、
BarcodeTypes.Code39 => BarcodeWriterEncoding.Code39、
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、
BarcodeTypes.Plessey => BarcodeWriterEncoding.Plessey、
BarcodeTypes.QRCode => BarcodeWriterEncoding.QRCode、
BarcodeTypes.UPCA => BarcodeWriterEncoding.UPCA、
BarcodeTypes.UPCE => BarcodeWriterEncoding.UPCE、
_ => BarcodeWriterEncoding.QRCode, // 默认或后备编码
};
}
该函数接受一个 BarcodeTypes 类型的参数，表示用户选择的条形码格式。它返回一个 BarcodeWriterEncoding 值，该值直接对应于条码生成库支持的编码类型。
利用切换表达式，该函数将 barcodeType 参数与 BarcodeTypes 枚举中的每个定义值进行匹配。对于 switch 表达式中的每种情况，它都会返回等效的 BarcodeWriterEncoding 值。例如，如果传入 BarcodeTypes.Code128，函数返回 BarcodeWriterEncoding.Code128。
这种全面的切换表达式可确保用户可选择的每种条形码格式都有相应的编码类型供条形码生成库使用。默认情况下返回 BarcodeWriterEncoding.QRCode 作为备用。这种默认选择假定 QR 代码是一种常见且广泛适用的选择；然而，默认行为可根据应用程序的要求进行定制，甚至在遇到不支持的条形码类型时抛出异常。
添加信息和条形码图像用户名（BarcodeImageUrl）属性
这些属性用于传达操作结果 (如生成条形码) 返回剃须刀页面 (.cshtml文件) 和生成的条形码图像的 URL。在 Razor 页面中，您可以访问这些属性，向用户显示消息和条形码图像。
public string Message { 获取；设置； }
公共字符串 BarcodeImageUrl { 获取；设置； }
OnPostUpload 函数签名
这是 HTTP POST 处理程序在 ASP.NET 核心 Razor Pages 应用程序。它旨在响应表单提交以生成条形码。
public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor, string correctionLevel)
{
}
该函数从表格中接收几个参数：
barcodeText：要编码到条形码中的数据。
条形码类型：要生成的条形码类型 (例如 QR 码、Code128 码).
maxWidth 和 maxHeight：可选参数，用于指定生成条形码的尺寸。
barcodeColor：条形码的颜色。
correctionLevel：在提供的片段中没有使用，但通常与 QR 码等某些条形码类型的纠错级别有关。
编码选择和条形码生成
现在是开始执行逻辑的时候了。下面是代码脚本：
BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode; // 默认为 QRCode
// 尝试将条码类型解析为相应的条码类型枚举
如果 (Enum.TryParse<BarcodeTypes>(barcodeType, true, out var barcodeTypeEnum))
{
编码 = GetBarcodeEncoding(条码类型);
}
不然
{
// 处理条码类型与任何枚举值不匹配的情况
返回新的 JsonResult(新 { success = false, message = "选择的条形码类型无效"。 });
}
var myBarcode = BarcodeWriter.CreateBarcode(条码文本、编码);
初始设置为默认条形码编码。该函数尝试将 barcodeType 字符串解析为 BarcodeTypes 枚举。如果成功，它将调用 GetBarcodeEncoding，这是一个辅助函数，可将 BarcodeTypes 映射到条形码写入器库所需的特定编码。 (条码写入器编码).如果条形码类型无效，则返回错误信息。然后，使用指定的文本和编码生成条形码。
颜色转换和条形码定制
此部分处理条形码的颜色和尺寸定制。它首先检查是否指定了颜色。如果有，则尝试将该颜色解析为 BarcodeColors 枚举，然后使用 EnumToColor 辅助函数将其转换为 System.Drawing.Color 对象。如果颜色无效，则返回错误信息。接下来，如果提供了 maxWidth 和 maxHeight，则会将条形码的大小调整为这些尺寸。
// 将条码颜色字符串转换为颜色对象
如果 (!string.IsNullOrEmpty(条形码颜色))
{
// 尝试将条码颜色解析为相应的条码颜色枚举
如果 (Enum.TryParse<BarcodeColors>(barcodeColor, true, out var barcodeColorEnum))
{
// 将枚举转换为颜色对象
var color = EnumToColor(条码颜色枚举);
myBarcode.ChangeBarCodeColor(color, true);
}
不然
{
// 处理条码类型与任何枚举值不匹配的情况
返回新的 JsonResult(新 { success = false, message = "选择的颜色无效"。 });
}
}
如果 (maxWidth.HasValue && maxHeight.HasValue)
{
myBarcode.ResizeTo(maxWidth.Value, maxHeight.Value);
}
保存和返回条形码图像
最后，将生成的条形码图像保存到服务器。为避免命名冲突，会使用当前时间戳创建一个唯一的文件名。条形码保存在特定目录中 (wwwroot/barcodes)如果不存在，则会创建。保存图像后，会准备一条成功消息，并返回一个 JSON 响应，其中包括成功状态、消息和生成条形码图像的路径。这样，客户端应用程序就可以显示生成的条形码，或为用户提供下载链接。
// 保存和返回条形码图像的其余代码...
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/{文件名}" });
Edit _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
运行应用程序
点击绿色的 "Start（开始）"箭头或按 F5 键开始调试，即可运行应用程序。如果您希望在不连接调试器的情况下运行，请按 Ctrl + F5。
首先键入您要编码到条形码中的信息。这可以是您希望转换成条形码格式的任何文本或 URL。点击标有 "条形码类型 "的下拉菜单。一个包含不同条形码格式的列表就会出现。您可以键入此处来筛选列表，选择适合您需要的条形码类型。例如，您可以从列表中选择 "Aztec "或 "QR Code"。
查找标有 "最大宽度 (px)"和 "最大高度 (px)."在此，您将输入条形码的最大尺寸，以确保条形码大小适合您的应用。请尝试输入 300，以保持条形码足够大，便于扫描，但又不会太大，无法适合您所需的介质。
点击 "条形码颜色 "下拉菜单。与条形码类型选择类似，会弹出一个包含颜色选项的列表。您可以滚动查看所有颜色，或开始键入查找特定颜色，如 "AliceBlue"。
填写完所有字段后，点击 "生成条形码 "按钮。网络应用程序将使用您提供的数据创建显示在屏幕上的条形码图像。它将显示在输入表单的侧面。我们在前端代码中将这部分称为图像列。
选择不同的颜色并单击 "生成条形码 "按钮，即可再次更改条形码的颜色。
如果您对屏幕上显示的生成条形码满意，您将看到一个输入文件名的选项。命名文件后，单击 "下载 "按钮将条形码图像保存到您的计算机上。当您检查项目中的条形码文件夹时，就会在该文件夹中看到生成的条形码。
结论
总之，条码生成器网络应用程序提供了一种创建自定义条码的简单方法。用户可轻松输入数据、选择条形码类型、设置尺寸和颜色，然后生成符合其特定需求的条形码。该工具设计简单，可快速创建和定制条形码。IronBarcode 是为该应用程序提供支持的库，它提供以下功能 免费试用 供用户测试其功能。如果您发现该工具符合您的要求，您可以购买起价为 749 美元的许可证，从而为您的项目释放 IronBarcode 的全部功能。
要在网络应用程序中生成 QR 码图像，我建议使用 IronQR 因为它专门用于处理二维码。
