Barcode secara visual merepresentasikan data dalam bentuk yang dapat dibaca mesin. Biasanya berisi data atau informasi tentang suatu produk atau perusahaan, yang dikodekan dalam bentuk angka dan/atau pola garis sejajar. Di ASP.NET MVC, kita dapat membuat berbagai jenis barcode seperti Data Matrix, Aztec, Code 128, dll. Pada artikel ini, kita akan mempelajari cara membuat dan menampilkan gambar barcode di aplikasi ASP.NET MVC. Setelah mengikuti langkah-langkah yang disebutkan, kami akan memiliki Generator Kode Batang ASP.NET MVC kami sendiri. Jadi mari kita mulai.
Artikel tersebut harus mencakup topik-topik berikut:
- Fitur dari ASP.NET MVC Barcode Generator
- .NET API untuk Menghasilkan dan Menampilkan Barcode Image
- Langkah-langkah Membuat dan Menampilkan Gambar Barcode
- Demo Generator Kode Batang MVC ASP.NET
- Unduh Kode Sumber
Fitur dari ASP.NET MVC Barcode Generator
Generator barcode ASP.NET kami akan memiliki fitur berikut.
- Hasilkan jenis simbologi kode batang berikut:
- Kode128
- Kode11
- Kode39
- QR
- Datamatrix
- EAN13
- EAN8
- ITF14
- PDF417
- Simpan gambar barcode yang dihasilkan dalam format berikut:
- PNG
- JPEG
- BMP
- EMF
- SVG
- Pratinjau gambar barcode yang dihasilkan.
- Unduh gambar barcode yang dihasilkan ke disk lokal Anda.
.NET API untuk Menghasilkan dan Menampilkan Barcode Image di ASP.NET MVC
Untuk menghasilkan gambar barcode dan menampilkannya di aplikasi ASP.NET MVC, kami akan menggunakan Aspose.BarCode for .NET API. Hal ini memungkinkan kita untuk menghasilkan dan mengenali berbagai 1D & 2D jenis kode batang. Harap unduh DLL API atau instal menggunakan NuGet.
PM> Install-Package Aspose.BarCode
Langkah-langkah untuk Menghasilkan dan Menampilkan Barcode Image di ASP.NET MVC
Kami dapat membuat dan menampilkan gambar barcode di aplikasi ASP.NET MVC dengan mengikuti langkah-langkah berikut:
- Pertama, buat proyek baru dan pilih template proyek ASP.NET Web Application (.NET Framework).
- Selanjutnya, di Buat dialog Aplikasi Web ASP.NET baru, pilih MVC lalu pilih buat.
Pilih MVC
- Kemudian, buka NuGet Package Manager dan instal paket Aspose.BarCode for .NET.
Instal Aspose.BarCode for .NET
- Selanjutnya, buat folder baru “Images” untuk menyimpan gambar barcode yang dihasilkan.
Buat folder Gambar.
- Sekarang, buat model di folder “Models” dengan nama “Barcode” untuk menyimpan informasi barcode.
// Informasi dasar kode batang
public class Barcode
{
public string Text { get; set; }
public BarcodeType BarcodeType { get; set; }
public BarCodeImageFormat ImageType { get; set; }
}
- Juga, tambahkan pencacahan ke daftar simbol kode batang yang didukung. Itu dapat ditambahkan di kelas terpisah di bawah folder “Model”, atau kita dapat menambahkannya di file kelas Barcode.cs.
// Simbol kode batang
public enum BarcodeType
{
Code128,
Code11,
Code32,
QR,
Datamatrix,
EAN13,
EAN8,
ITF14,
PDF417
}
- Demikian pula, tambahkan pencacahan ke daftar format gambar yang didukung.
// Format gambar
public enum ImageType
{
Png,
Jpeg,
Bmp,
Emf,
Svg
}
- Selanjutnya, buka Views/Home/index.cshtml dan ganti kontennya dengan skrip berikut.
@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>
- Kemudian, buka kelas “HomeController” dan tambahkan hasil tindakan baru untuk menangani permintaan kiriman.
[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();
}
- Setelah itu, tambahkan hasil tindakan baru untuk menangani permintaan pengunduhan gambar di “HomeController”.
public ActionResult Download(string ImagePath, string ImageName)
{
string contentType = "application/img";
return File(ImagePath, contentType, Path.GetFileName(ImageName));
}
- Terakhir, jalankan aplikasi.
Demo Generator Kode Batang MVC ASP.NET
Berikut demonstrasi aplikasi ASP.NET MVC Barcode Generator yang baru saja kita buat.
Demo Generator Kode Batang MVC ASP.NET
Unduh Kode Sumber
Anda dapat mengunduh kode sumber lengkap aplikasi ASP.NET MVC Barcode Generator dari GitHub.
Dapatkan Lisensi Gratis
Anda bisa mendapatkan lisensi sementara gratis untuk mencoba perpustakaan tanpa batasan evaluasi.
Kesimpulan
Pada artikel ini, kami telah mempelajari cara membuat dan menampilkan gambar barcode di aplikasi ASP.NET MVC. Kami juga telah melihat cara mengunduh gambar barcode yang dihasilkan secara terprogram. Selain itu, Anda dapat mempelajari lebih lanjut tentang Aspose.BarCode for .NET API menggunakan dokumentasi. Jika ada ambiguitas, jangan ragu untuk menghubungi kami di forum.