Mã vạch đại diện trực quan cho dữ liệu ở dạng máy có thể đọc được. Thông thường, nó chứa dữ liệu hoặc thông tin về sản phẩm hoặc công ty, được mã hóa dưới dạng số và / hoặc dạng các đường thẳng song song. Trong ASP.NET MVC, chúng ta có thể tạo nhiều loại mã vạch khác nhau như Ma trận dữ liệu, Aztec, Mã 128, … Trong bài viết này, chúng ta sẽ học cách tạo và hiển thị hình ảnh mã vạch trong ứng dụng ASP.NET MVC. Sau khi làm theo các bước đã đề cập, chúng ta sẽ có Trình tạo mã vạch ASP.NET MVC của riêng mình. Vì vậy, chúng ta hãy bắt đầu.
Bài báo sẽ bao gồm các chủ đề sau:
- Các tính năng của ASP.NET MVC Barcode Generator
- .NET API để tạo và hiển thị hình ảnh mã vạch
- Các bước tạo và hiển thị hình ảnh mã vạch
- Demo ASP.NET MVC Barcode Generator
- Tải xuống mã nguồn
Các tính năng của ASP.NET MVC Barcode Generator
Trình tạo mã vạch ASP.NET của chúng tôi sẽ có các tính năng sau.
- Tạo các loại ký hiệu mã vạch sau:
- Mã128
- Mã11
- Mã39
- QR
- Ma trận dữ liệu
- EAN13
- EAN8
- ITF14
- PDF417
- Lưu hình ảnh mã vạch đã tạo ở các định dạng sau:
- PNG
- JPEG
- BMP
- EMF
- SVG
- Xem trước hình ảnh mã vạch đã tạo.
- Tải xuống hình ảnh mã vạch đã tạo vào đĩa cục bộ của bạn.
.NET API để tạo và hiển thị hình ảnh mã vạch trong ASP.NET MVC
Để tạo hình ảnh mã vạch và hiển thị chúng trong ứng dụng ASP.NET MVC, chúng tôi sẽ sử dụng Aspose.BarCode cho API .NET. Nó cho phép chúng tôi tạo và nhận dạng nhiều loại [loại mã vạch] 1D & 2D 1. Vui lòng tải xuống DLL của API hoặc cài đặt nó bằng NuGet.
PM> Install-Package Aspose.BarCode
Các bước tạo và hiển thị hình ảnh mã vạch trong ASP.NET MVC
Chúng tôi có thể tạo và hiển thị hình ảnh mã vạch trong ứng dụng ASP.NET MVC bằng cách làm theo các bước dưới đây:
- Đầu tiên, tạo một dự án mới và chọn mẫu dự án ASP.NET Web Application (.NET Framework).
- Tiếp theo, trong hộp thoại Tạo ứng dụng web ASP.NET mới, chọn MVC và sau đó chọn tạo.
Chọn MVC
- Sau đó, mở NuGet Package Manager và cài đặt gói Aspose.BarCode for .NET.
Cài đặt Aspose.BarCode cho .NET
- Tiếp theo, tạo một thư mục mới “Hình ảnh” để lưu các hình ảnh mã vạch đã tạo.
Tạo thư mục Hình ảnh.
- Bây giờ, hãy tạo một mô hình trong thư mục “Mô hình” với tên “Mã vạch” để lưu trữ thông tin mã vạch.
// Thông tin cơ bản về mã vạch
public class Barcode
{
public string Text { get; set; }
public BarcodeType BarcodeType { get; set; }
public BarCodeImageFormat ImageType { get; set; }
}
- Ngoài ra, hãy thêm bảng liệt kê để liệt kê các ký hiệu mã vạch được hỗ trợ. Nó có thể được thêm vào một lớp riêng biệt trong thư mục “Mô hình” hoặc chúng ta có thể thêm nó trong tệp lớp Barcode.cs.
// Biểu tượng mã vạch
public enum BarcodeType
{
Code128,
Code11,
Code32,
QR,
Datamatrix,
EAN13,
EAN8,
ITF14,
PDF417
}
- Tương tự, thêm kiểu liệt kê để liệt kê các định dạng hình ảnh được hỗ trợ.
// Định dạng hình ảnh
public enum ImageType
{
Png,
Jpeg,
Bmp,
Emf,
Svg
}
- Tiếp theo, mở Views / Home / index.cshtml và thay thế nội dung của nó bằng script sau.
@using BarcodeGeneratorMVC.Models
@model Barcode
@{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-lg-6">
<h2>Generate Barcode</h2>
@using (Html.BeginForm())
{
<div class="form-group">
@Html.Label("Select Barcode Type:", new { @class = "col-md-12 control-label" })
<div class="col-md-12">
@Html.DropDownListFor(model => model.BarcodeType,
new SelectList(Enum.GetValues(typeof(BarcodeType))),
"Select Barcode", new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.Label("Enter Your Text:", new { @class = "col-md-12 control-label" })
<div class="col-md-12">
@Html.EditorFor(m => m.Text, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.Label("Select Image Format:", new { @class = "col-md-12 control-label" })
<div class="col-md-12">
@Html.RadioButtonFor(model => model.ImageType, ImageType.Png) @Html.Label("PNG")
@Html.RadioButtonFor(model => model.ImageType, ImageType.Jpeg) @Html.Label("JPG")
@Html.RadioButtonFor(model => model.ImageType, ImageType.Bmp) @Html.Label("BMP")
@Html.RadioButtonFor(model => model.ImageType, ImageType.Emf) @Html.Label("EMF")
@Html.RadioButtonFor(model => model.ImageType, ImageType.Svg) @Html.Label("SVG")
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="submit" class="btn btn-default" value="Generate Barcode" />
</div>
</div>
}
</div>
<div class="col-lg-6">
<h2>View Barcode Image</h2>
@{
if (!string.IsNullOrEmpty(@ViewBag.ImagePath))
{
<div class="form-group">
<div class="col-md-12">
<img src=@Url.Content(@ViewBag.ImagePath) alt="Barcode Image" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.ActionLink("Download Image", "Download", "Home", new
{ // routeValues
ImagePath = @ViewBag.ImagePath,
ImageName = @ViewBag.ImageName
},
null)
</div>
</div>
}
}
</div>
<hr />
</div>
- Sau đó, mở lớp “HomeController” và thêm một kết quả hành động mới để xử lý yêu cầu đăng.
[HttpPost]
public ActionResult Index(Barcode barcode)
{
string codeText = barcode.Text;
string imageName = barcode.Text + "." + barcode.ImageType;
string imagePath = "/Images/" + imageName;
string imageServerPath = Server.MapPath("~" + imagePath);
var encodeType = EncodeTypes.Code128;
switch (barcode.BarcodeType)
{
case BarcodeType.Code128:
encodeType = EncodeTypes.Code128;
break;
case BarcodeType.ITF14:
encodeType = EncodeTypes.ITF14;
break;
case BarcodeType.EAN13:
encodeType = EncodeTypes.EAN13;
break;
case BarcodeType.Datamatrix:
encodeType = EncodeTypes.DataMatrix;
break;
case BarcodeType.Code32:
encodeType = EncodeTypes.Code32;
break;
case BarcodeType.Code11:
encodeType = EncodeTypes.Code11;
break;
case BarcodeType.PDF417:
encodeType = EncodeTypes.Pdf417;
break;
case BarcodeType.EAN8:
encodeType = EncodeTypes.EAN8;
break;
case BarcodeType.QR:
encodeType = EncodeTypes.QR;
break;
}
using (Stream str = new FileStream(imageServerPath, FileMode.Create, FileAccess.Write))
{
BarcodeGenerator gen = new BarcodeGenerator(encodeType, codeText);
gen.Save(str, barcode.ImageType);
}
ViewBag.ImagePath = imagePath;
ViewBag.ImageName = imageName;
return View();
}
- Sau đó, thêm một kết quả hành động mới để xử lý yêu cầu tải xuống hình ảnh trong “HomeController”.
public ActionResult Download(string ImagePath, string ImageName)
{
string contentType = "application/img";
return File(ImagePath, contentType, Path.GetFileName(ImageName));
}
- Cuối cùng, chạy ứng dụng.
Demo ASP.NET MVC Barcode Generator
Sau đây là phần trình diễn ứng dụng ASP.NET MVC Barcode Generator mà chúng tôi vừa tạo.
Demo ASP.NET MVC Barcode Generator
Tải xuống mã nguồn
Bạn có thể tải xuống mã nguồn hoàn chỉnh của ứng dụng ASP.NET MVC Barcode Generator từ GitHub.
Nhận giấy phép miễn phí
Bạn có thể nhận giấy phép tạm thời miễn phí để dùng thử thư viện mà không có giới hạn đánh giá.
Sự kết luận
Trong bài viết này, chúng ta đã học cách tạo và hiển thị hình ảnh mã vạch trong ứng dụng ASP.NET MVC. Chúng tôi cũng đã biết cách tải xuống hình ảnh mã vạch được tạo theo chương trình. Bên cạnh đó, bạn có thể tìm hiểu thêm về Aspose.BarCode cho .NET API bằng cách sử dụng tài liệu. Trong trường hợp có bất kỳ sự mơ hồ nào, vui lòng liên hệ với chúng tôi trên diễn đàn.