Generieren und Anzeigen von Barcode-Bildern in ASP.NET MVC

Ein Barcode stellt Daten in maschinenlesbarer Form visuell dar. In der Regel enthält es Daten oder Informationen über ein Produkt oder ein Unternehmen, kodiert in Form von Zahlen und/oder einem Muster aus parallelen Linien. In ASP.NET MVC können wir verschiedene Arten von Barcodes wie Data Matrix, Aztec, Code 128 usw. generieren. In diesem Artikel erfahren Sie, wie Sie ein Barcode-Bild in der ASP.NET MVC-Anwendung generieren und anzeigen. Nachdem Sie die genannten Schritte ausgeführt haben, haben wir unseren eigenen ASP.NET MVC Barcode Generator. Fangen wir also an.

Der Artikel soll folgende Themen behandeln:

Funktionen des ASP.NET MVC-Barcode-Generators

Unser ASP.NET-Barcode-Generator wird die folgenden Funktionen haben.

  1. Generieren Sie die folgenden Arten von Barcode-Symbologien:
    • Code128
    • Code11
    • Code39
    • QR
    • Datenmatrix
    • EAN13
    • EAN8
    • ITF14
    • PDF417
  2. Speichern Sie das generierte Barcode-Bild in den folgenden Formaten:
    • PNG
    • JPEG
    • BMP
    • EMF
    • SVG
  3. Vorschau des generierten Barcode-Bildes.
  4. Laden Sie das generierte Barcode-Bild auf Ihre lokale Festplatte herunter.

.NET-API zum Generieren und Anzeigen von Barcode-Bildern in ASP.NET MVC

Um Barcode-Bilder zu generieren und sie in der ASP.NET MVC-Anwendung anzuzeigen, verwenden wir die Aspose.BarCode für .NET-API. Es ermöglicht uns, eine breite Palette von 1D- und 2D-Barcodetypen zu generieren und zu erkennen. Bitte downloaden Sie die DLL der API oder installieren Sie sie mit NuGet.

PM> Install-Package Aspose.BarCode

Schritte zum Generieren und Anzeigen von Barcode-Bildern in ASP.NET MVC

Wir können ein Barcode-Bild in der ASP.NET MVC-Anwendung generieren und anzeigen, indem wir die folgenden Schritte ausführen:

  • Erstellen Sie zunächst ein neues Projekt, und wählen Sie die Projektvorlage ASP.NET-Webanwendung (.NET Framework) aus.
  • Wählen Sie als Nächstes im Dialogfeld „Neue ASP.NET-Webanwendung erstellen“ die Option „MVC“ und dann „Erstellen“.
Wählen Sie MVC

Wählen Sie MVC

Installieren Sie Aspose.BarCode für .NET

Installieren Sie Aspose.BarCode für .NET

  • Erstellen Sie als Nächstes einen neuen Ordner „Images“, um die generierten Barcode-Bilder zu speichern.
Ordner Bilder erstellen.

Ordner Bilder erstellen.

  • Erstellen Sie nun im Ordner „Modelle“ ein Modell mit dem Namen „Barcode“, um die Barcode-Informationen zu speichern.
// Grundlegende Informationen zum Barcode
public class Barcode
{
    public string Text { get; set; }

    public BarcodeType BarcodeType { get; set; }

    public BarCodeImageFormat ImageType { get; set; }
}
  • Fügen Sie außerdem eine Aufzählung hinzu, um die unterstützten Barcode-Symbologien aufzulisten. Es kann in einer separaten Klasse im Ordner „Models“ hinzugefügt werden, oder wir können es in der Klassendatei „Barcode.cs“ hinzufügen.
// Barcode-Symboliken
public enum BarcodeType
{
    Code128,
    Code11,
    Code32,
    QR,
    Datamatrix,
    EAN13,
    EAN8,
    ITF14,
    PDF417
}
  • Fügen Sie auf ähnliche Weise eine Aufzählung hinzu, um die unterstützten Bildformate aufzulisten.
// Bildformate
public enum ImageType
{
    Png,
    Jpeg,
    Bmp,
    Emf,
    Svg
}
  • Öffnen Sie als Nächstes Views/Home/index.cshtml und ersetzen Sie den Inhalt durch das folgende Skript.
@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>
  • Öffnen Sie dann die Klasse „HomeController“ und fügen Sie ein neues Aktionsergebnis hinzu, um die Post-Anforderung zu verarbeiten.
[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();
}
  • Fügen Sie danach ein neues Aktionsergebnis hinzu, um die Bild-Download-Anfrage im „HomeController“ zu verarbeiten.
public ActionResult Download(string ImagePath, string ImageName)
{
    string contentType = "application/img";
    return File(ImagePath, contentType, Path.GetFileName(ImageName));
}
  • Führen Sie abschließend die Anwendung aus.

Demo ASP.NET MVC-Barcode-Generator

Das Folgende ist die Demonstration der ASP.NET MVC Barcode Generator-Anwendung, die wir gerade erstellt haben.

Demo ASP.NET MVC-Barcode-Generator

Demo ASP.NET MVC-Barcode-Generator

Quellcode herunterladen

Sie können den vollständigen Quellcode der ASP.NET MVC Barcode Generator-Anwendung von GitHub herunterladen.

Holen Sie sich eine kostenlose Lizenz

Sie können eine kostenlose temporäre Lizenz erhalten, um die Bibliothek ohne Evaluierungseinschränkungen zu testen.

Fazit

In diesem Artikel haben wir gelernt, wie Sie ein Barcode-Bild in einer ASP.NET MVC-Anwendung generieren und anzeigen. Wir haben auch gesehen, wie das generierte Barcode-Bild programmgesteuert heruntergeladen wird. Außerdem können Sie mithilfe der Dokumentation mehr über Aspose.BarCode für die .NET-API erfahren. Bei Unklarheiten können Sie uns gerne im Forum kontaktieren.

Siehe auch