Создание и отображение изображения штрих-кода в ASP.NET MVC

Штрих-код визуально представляет данные в машиночитаемой форме. Обычно он содержит данные или информацию о продукте или компании, закодированные в виде чисел и/или узора из параллельных линий. В ASP.NET MVC мы можем генерировать различные типы штрих-кодов, такие как Data Matrix, Aztec, Code 128 и т. д. В этой статье мы узнаем, как создавать и отображать изображение штрих-кода в приложении ASP.NET MVC. После выполнения указанных шагов у нас будет собственный генератор штрих-кода ASP.NET MVC. Итак, начнем.

Статья должна охватывать следующие темы:

Особенности генератора штрих-кода ASP.NET MVC

Наш генератор штрих-кода ASP.NET будет иметь следующие функции.

  1. Создайте следующие типы символик штрих-кода:
    • Код128
    • Код11
    • Код39
    • QR-код
    • Матрица данных
    • EAN13
    • EAN8
    • ITF14
    • PDF417
  2. Сохраните сгенерированное изображение штрих-кода в следующих форматах:
    • PNG
    • JPEG
    • БМП
    • ЭДС
    • SVG
  3. Предварительный просмотр сгенерированного изображения штрих-кода.
  4. Загрузите сгенерированное изображение штрих-кода на локальный диск.

.NET API для создания и отображения изображения штрих-кода в ASP.NET MVC

Для создания изображений штрих-кода и их отображения в приложении ASP.NET MVC мы будем использовать API Aspose.BarCode для .NET. Это позволяет нам генерировать и распознавать широкий спектр одномерных и двухмерных типов штрих-кодов. Пожалуйста, загрузите DLL API или установите его с помощью NuGet.

PM> Install-Package Aspose.BarCode

Действия по созданию и отображению изображения штрих-кода в ASP.NET MVC

Мы можем сгенерировать и отобразить изображение штрих-кода в приложении ASP.NET MVC, выполнив следующие шаги:

  • Сначала создайте новый проект и выберите шаблон проекта веб-приложения ASP.NET (.NET Framework).
Select the project template.

Select the project template.

  • Затем в диалоговом окне «Создание нового веб-приложения ASP.NET» выберите MVC, а затем выберите «Создать».
Выберите МВК

Выберите МВК

  • Затем откройте диспетчер пакетов NuGet и установите пакет Aspose.BarCode для .NET.
Установите Aspose.BarCode для .NET

Установите Aspose.BarCode для .NET

  • Затем создайте новую папку «Изображения» для сохранения сгенерированных изображений штрих-кода.
Создайте папку «Изображения».

Создайте папку «Изображения».

  • Теперь создайте модель в папке «Модели» с именем «Штрих-код» для хранения информации о штрих-коде.
// Основная информация о штрих-коде
public class Barcode
{
    public string Text { get; set; }

    public BarcodeType BarcodeType { get; set; }

    public BarCodeImageFormat ImageType { get; set; }
}
  • Кроме того, добавьте перечисление, чтобы перечислить поддерживаемые символы штрих-кода. Его можно добавить в отдельный класс в папке «Модели» или мы можем добавить его в файл класса Barcode.cs.
// Символика штрих-кода
public enum BarcodeType
{
    Code128,
    Code11,
    Code32,
    QR,
    Datamatrix,
    EAN13,
    EAN8,
    ITF14,
    PDF417
}
  • Точно так же добавьте перечисление, чтобы перечислить поддерживаемые форматы изображений.
// Форматы изображений
public enum ImageType
{
    Png,
    Jpeg,
    Bmp,
    Emf,
    Svg
}
  • Затем откройте Views/Home/index.cshtml и замените его содержимое следующим скриптом.
@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>
  • Затем откройте класс «HomeController» и добавьте новый результат действия для обработки почтового запроса.
[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();
}
  • После этого добавьте новый результат действия для обработки запроса на загрузку изображения в «HomeController».
public ActionResult Download(string ImagePath, string ImageName)
{
    string contentType = "application/img";
    return File(ImagePath, contentType, Path.GetFileName(ImageName));
}
  • Наконец, запустите приложение.

Демонстрационный генератор штрих-кода ASP.NET MVC

Ниже приведена демонстрация только что созданного нами приложения ASP.NET MVC Barcode Generator.

Демонстрационный генератор штрих-кода ASP.NET MVC

Демонстрационный генератор штрих-кода ASP.NET MVC

Скачать исходный код

Полный исходный код приложения ASP.NET MVC Barcode Generator можно загрузить с GitHub.

Получить бесплатную лицензию

Вы можете получить бесплатную временную лицензию, чтобы опробовать библиотеку без ограничений пробной версии.

Вывод

В этой статье мы узнали, как создавать и отображать изображение штрих-кода в приложении ASP.NET MVC. Мы также видели, как программно загрузить сгенерированное изображение штрих-кода. Кроме того, вы можете узнать больше об Aspose.BarCode for .NET API, используя документацию. В случае возникновения каких-либо неясностей, пожалуйста, свяжитесь с нами на форуме.

Смотрите также