Kod kreskowy wizualnie przedstawia dane w formie do odczytu maszynowego. Zwykle zawiera dane lub informacje o produkcie lub firmie, zakodowane w postaci liczb i/lub wzoru równoległych linii. W ASP.NET MVC możemy generować różnego rodzaju kody kreskowe takie jak Data Matrix, Aztec, Code 128 itp. W tym artykule nauczymy się generować i wyświetlać obraz kodu kreskowego w aplikacji ASP.NET MVC. Po wykonaniu wspomnianych kroków będziemy mieć własny generator kodów kreskowych ASP.NET MVC. Więc zacznijmy.
Artykuł obejmie następujące tematy:
- Funkcje generatora kodów kreskowych ASP.NET MVC
- .NET API do generowania i wyświetlania obrazu kodu kreskowego
- Kroki, aby wygenerować i wyświetlić obraz kodu kreskowego
- Demonstracyjny generator kodów kreskowych ASP.NET MVC
- Pobierz kod źródłowy
Funkcje generatora kodów kreskowych ASP.NET MVC
Nasz generator kodów kreskowych ASP.NET będzie miał następujące funkcje.
- Generuj następujące typy symboli kodów kreskowych:
- Kod128
- Kod11
- Kod39
- QR
- Datamatrix
- EAN13
- EAN8
- ITF14
- PDF417
- Zapisz wygenerowany obraz kodu kreskowego w następujących formatach:
- PNG
- JPG
- BMP
- pole elektromagnetyczne
- SVG
- Wyświetl podgląd wygenerowanego obrazu kodu kreskowego.
- Pobierz wygenerowany obraz kodu kreskowego na dysk lokalny.
.NET API do generowania i wyświetlania obrazu kodu kreskowego w ASP.NET MVC
Do generowania obrazów kodów kreskowych i wyświetlania ich w aplikacji ASP.NET MVC będziemy używać Aspose.BarCode for .NET API. Pozwala nam generować i rozpoznawać szeroką gamę [rodzajów kodów kreskowych] 1D i 2D]1. Pobierz bibliotekę DLL interfejsu API lub zainstaluj ją za pomocą NuGet.
PM> Install-Package Aspose.BarCode
Kroki, aby wygenerować i wyświetlić obraz kodu kreskowego w ASP.NET MVC
Możemy wygenerować i wyświetlić obraz kodu kreskowego w aplikacji ASP.NET MVC, wykonując poniższe czynności:
- Najpierw utwórz nowy projekt i wybierz szablon projektu ASP.NET Web Application (.NET Framework).
- Następnie w oknie dialogowym Tworzenie nowej aplikacji sieci Web ASP.NET wybierz opcję MVC, a następnie wybierz opcję Utwórz.
Wybierz MVC
- Następnie otwórz Menedżera pakietów NuGet i zainstaluj pakiet Aspose.BarCode for .NET.
Zainstaluj Aspose.BarCode dla platformy .NET
- Następnie utwórz nowy folder „Obrazy”, aby zapisać wygenerowane obrazy kodów kreskowych.
Utwórz folder obrazów.
- Teraz utwórz model w folderze „Modele” o nazwie „Kod kreskowy”, aby przechowywać informacje o kodzie kreskowym.
// Podstawowe informacje o kodzie kreskowym
public class Barcode
{
public string Text { get; set; }
public BarcodeType BarcodeType { get; set; }
public BarCodeImageFormat ImageType { get; set; }
}
- Dodaj także wyliczenie, aby wyświetlić listę obsługiwanych symboli kodów kreskowych. Można go dodać w osobnej klasie w folderze „Models” lub możemy dodać go w pliku klasy Barcode.cs.
// Symbolika kodu kreskowego
public enum BarcodeType
{
Code128,
Code11,
Code32,
QR,
Datamatrix,
EAN13,
EAN8,
ITF14,
PDF417
}
- Podobnie dodaj wyliczenie, aby wyświetlić listę obsługiwanych formatów obrazów.
// Formaty obrazu
public enum ImageType
{
Png,
Jpeg,
Bmp,
Emf,
Svg
}
- Następnie otwórz Views/Home/index.cshtml i zastąp jego zawartość następującym skryptem.
@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>
- Następnie otwórz klasę „HomeController” i dodaj nowy wynik akcji, aby obsłużyć żądanie posta.
[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();
}
- Następnie dodaj nowy wynik akcji, aby obsłużyć żądanie pobrania obrazu w „HomeController”.
public ActionResult Download(string ImagePath, string ImageName)
{
string contentType = "application/img";
return File(ImagePath, contentType, Path.GetFileName(ImageName));
}
- Na koniec uruchom aplikację.
Demonstracyjny generator kodów kreskowych ASP.NET MVC
Poniżej znajduje się demonstracja aplikacji ASP.NET MVC Barcode Generator, którą właśnie stworzyliśmy.
Demonstracyjny generator kodów kreskowych ASP.NET MVC
Pobierz kod źródłowy
Możesz pobrać pełny kod źródłowy aplikacji ASP.NET MVC Barcode Generator z GitHub.
Uzyskaj bezpłatną licencję
Możesz uzyskać bezpłatną tymczasową licencję, aby wypróbować bibliotekę bez ograniczeń ewaluacyjnych.
Wniosek
W tym artykule nauczyliśmy się generować i wyświetlać obraz kodu kreskowego w aplikacji ASP.NET MVC. Widzieliśmy również, jak programowo pobrać wygenerowany obraz kodu kreskowego. Poza tym możesz dowiedzieć się więcej o Aspose.BarCode for .NET API korzystając z dokumentacji. W przypadku jakichkolwiek niejasności prosimy o kontakt na forum.