在實際環境中測試
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
Razor Barcode Generator 是一种方便的工具,简化了开发人员和企业生成条码的过程。将条码生成集成到Web應用程式中,可以增强功能和用户体验,使生成各种类型的条码变得简单明了。无论您是在管理库存、追踪资产,还是简化结账流程,使用Razor Barcode Generator 都可以显著提高效率和准确性。我们將使用 IronBarcode 在這個條碼生成器教程中。
IronBarcode 是開發人員使用 .NET Core 的必備工具,提供了一個易於使用的庫用於 條碼生成 和閱讀。它以其簡單易用的整合方式脫穎而出,在您的專案中僅需極少的程式碼即可生成或解碼條碼和QR碼。這使得IronBarcode成為增強應用程式的多功能選擇,無論是從使用Razor頁面的Web應用程式還是桌面和行動應用程式。其廣泛支援的條碼格式範圍確保其能夠滿足各種專案需求,包括.NET MVC、Blazor WebAssembly應用程式和Blazor應用程式,這使得它成為開發人員可靠的選擇。
我們可以選擇 Blazor 應用程式或 Blazor 伺服器應用程式來進行此項目。但在本教程中,我將使用 ASP.NET Core Web App。 (Razor Pages)
. 在 Visual Studio 中使用 Razor Pages 創建 ASP.NET Core Web App 涉及一系列簡單的步驟。此指南將幫助您從頭開始設置項目:
打開 Visual Studio:啟動 Visual Studio。在啟動窗口中,選擇 “Create a new project” 以開始設置您的新 Web 應用程序。
選擇項目類型:在 “Create a new project” 窗口中,您需要選擇項目類型。在搜索框中輸入 “Razor” 以縮小選項範圍,然後從項目模板列表中選擇 “ASP.NET Core Web App”。選擇後,點擊 “Next” 按鈕繼續。
配置您的專案:您現在將被提示配置您的新專案。
設置專案詳細資訊:在「附加資訊」窗口中,請確保:
要在 Visual Studio 中使用 NuGet 套件管理器安裝 IronBarcode,請按照以下步驟將其無縫整合到您的 ASP.NET Core Web App 或任何其他 .NET 專案中:
訪問 NuGet 套件管理器:在 Visual Studio 界面右側的解決方案總管窗格中右鍵單擊您的專案名稱。從出現的上下文選單中選擇「管理 NuGet 套件…」,這將打開 NuGet 套件管理器標籤。
搜索 IronBarcode:在 NuGet 套件管理器標籤中,點擊「瀏覽」標籤以在線搜索套件。在搜索框中輸入「IronBarcode」以查找 IronBarcode 函式庫。
安裝 IronBarcode:從搜索結果中找到「IronBarcode」套件。確保選擇正確的套件,因為可能有名稱相似的套件。點擊「IronBarcode」套件以選擇它,然後點擊「安裝」按鈕。Visual Studio 可能會顯示一個對話框,列出將要進行的更改,包括與 IronBarcode 一起安裝的任何附加依賴項。查看更改並點擊「確定」或「接受」以繼續安裝。如果出現任何許可協議,請查看並接受它們以繼續。
現在是時候專注於我們 Web 應用程式的視覺方面。我們將從增強 Index 頁面開始。為此,請打開專案中的 index.cshtml 文件。這個文件是首頁的標記所在位置。為了使我們的頁面更具視覺吸引力且易於使用,我們會應用一些自定義樣式。
設計用的 CSS:將以下 CSS 插入到 index.cshtml 文件的 <head> 部分,或者如果你直接將其嵌入到 HTML 中,則插入到 <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>
<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>
這段 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>
為了繼續設計你的條碼生成器的使用者介面,現在讓我們專注於在置中的佈局中組織主要內容。以下片段展示了如何使用 Bootstrap 的網格系統來置中內容並為後續的 UI 元件(如表單、按鈕或資訊文本區域)做準備。
<div class="container">
<div class="row justify-content-center">
</div>
</div>
<div class="container">
<div class="row justify-content-center">
</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>
<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>