![Wygeneruj i wyświetl obraz kodu kreskowego w ASP.NET MVC](images/ASP-NET-MVC-Barcode-Generator.jpg#center)
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).
![](images/select_project_template.-1024x668.jpg#center)
- Następnie w oknie dialogowym Tworzenie nowej aplikacji sieci Web ASP.NET wybierz opcję MVC, a następnie wybierz opcję Utwórz.
![Wybierz MVC](images/Select_mvc-1024x672.png#center)
Wybierz MVC
- Następnie otwórz Menedżera pakietów NuGet i zainstaluj pakiet Aspose.BarCode for .NET.
![Zainstaluj Aspose.BarCode dla platformy .NET](images/Install_Aspose_Barcode_Nuget-1024x597.jpg#center)
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.](images/Create-Images-Folder.jpg#center)
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](images/asp-net-mvc-barcode-generator.gif#center)
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.