Generování a zobrazení obrázku čárového kódu v ASP.NET MVC

Čárový kód vizuálně představuje data ve strojově čitelné podobě. Obvykle obsahuje data nebo informace o produktu nebo společnosti, zakódované ve formě čísel a/nebo vzoru paralelních čar. V ASP.NET MVC můžeme generovat různé typy čárových kódů jako Data Matrix, Aztec, Code 128 atd. V tomto článku se naučíme, jak dynamicky generovat a zobrazovat obrázek čárového kódu v aplikaci ASP .NET MVC. Po provedení uvedených kroků budeme mít vlastní generátor čárových kódů ASP.NET MVC. Takže začneme.

Článek se bude týkat následujících témat:

  1. Funkce generátoru čárových kódů ASP.NET MVC
  2. C# API pro generování čárového kódu v ASP.NET MVC
  3. Kroky ke generování a zobrazení obrázku čárového kódu
  4. Demo ASP.NET MVC Barcode Generator
  5. Stáhnout zdrojový kód generátoru čárových kódů ASP.NET MVC

Funkce ASP.NET MVC Barcode Generator

Náš generátor čárových kódů ASP.NET MVC bude mít následující funkce.

  1. Vygenerujte následující typy symbolik čárových kódů:
    • Kód128
    • Kód11
    • Kód39
    • QR
    • Datamatrix
    • EAN13
    • EAN8
    • ITF14
    • PDF417
  2. Uložte vygenerovaný obrázek čárového kódu v následujících formátech:
    • PNG
    • JPEG
    • BMP
    • EMF
    • SVG
  3. Náhled vygenerovaného obrázku čárového kódu.
  4. Stáhněte si vygenerovaný obrázek čárového kódu na místní disk.

C# API pro generování čárového kódu v ASP.NET MVC

Pro generování obrázků čárových kódů a jejich zobrazování v aplikaci ASP.NET MVC budeme používat Aspose.BarCode for .NET API. Umožňuje nám generovat a rozpoznávat širokou škálu 1D a 2D typů čárových kódů. Prosím buď stáhněte DLL API, nebo ji nainstalujte pomocí NuGet.

PM> Install-Package Aspose.BarCode

Jak dynamicky generovat a zobrazovat obrázek čárového kódu v ASP.NET MVC

Můžeme vygenerovat a zobrazit obrázek čárového kódu v aplikaci ASP.NET MVC podle následujících kroků:

  • Nejprve vytvořte nový projekt a vyberte šablonu projektu webové aplikace ASP.NET (.NET Framework).
  • Dále v dialogovém okně Vytvořit novou webovou aplikaci ASP.NET zvolte MVC a poté zvolte vytvořit.
Vyberte MVC

Vyberte MVC

Nainstalujte Aspose.BarCode pro .NET

Nainstalujte Aspose.BarCode pro .NET

  • Dále vytvořte novou složku „Images“ pro uložení vygenerovaných obrázků čárových kódů.
Vytvořte složku Obrázky.

Vytvořte složku Obrázky.

  • Nyní vytvořte model ve složce „Models“ s názvem „Barcode“ pro uložení informací o čárovém kódu.
// Základní informace o čárovém kódu
public class Barcode
{
    public string Text { get; set; }

    public BarcodeType BarcodeType { get; set; }

    public BarCodeImageFormat ImageType { get; set; }
}
  • Přidejte také výčet pro seznam podporovaných symbolů čárových kódů. Lze jej přidat do samostatné třídy ve složce „Models“ nebo jej můžeme přidat do souboru třídy Barcode.cs.
// Symbolika čárových kódů
public enum BarcodeType
{
    Code128,
    Code11,
    Code32,
    QR,
    Datamatrix,
    EAN13,
    EAN8,
    ITF14,
    PDF417
}
  • Podobně přidejte výčet pro seznam podporovaných formátů obrázků.
// Formáty obrázků
public enum ImageType
{
    Png,
    Jpeg,
    Bmp,
    Emf,
    Svg
}
  • Dále otevřete Views/Home/index.cshtml a nahraďte jeho obsah následujícím skriptem.
@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>
  • Poté otevřete třídu „HomeController“ a přidejte nový výsledek akce pro zpracování požadavku na příspěvek.
[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();
}
  • Poté přidejte nový výsledek akce pro zpracování požadavku na stažení obrázku v „HomeController“.
public ActionResult Download(string ImagePath, string ImageName)
{
    string contentType = "application/img";
    return File(ImagePath, contentType, Path.GetFileName(ImageName));
}
  • Nakonec spusťte aplikaci.

Demo generátor čárových kódů ASP.NET MVC

Následuje ukázka aplikace ASP.NET MVC Barcode Generator, kterou jsme právě vytvořili.

Demo generátor čárových kódů ASP.NET MVC

Demo generátor čárových kódů ASP.NET MVC

Stáhněte si zdrojový kód generátoru čárových kódů ASP.NET MVC

Kompletní zdrojový kód aplikace ASP.NET MVC Barcode Generator si můžete stáhnout z GitHub.

Získejte bezplatnou licenci

Můžete získat bezplatnou dočasnou licenci a vyzkoušet knihovnu bez omezení hodnocení.

Závěr

V tomto článku jsme se naučili, jak vygenerovat a zobrazit obrázek čárového kódu v aplikaci ASP.NET MVC. Také jsme viděli, jak programově stáhnout vygenerovaný obrázek čárového kódu. Kromě toho se můžete dozvědět více o Aspose.BarCode for .NET API pomocí dokumentace. V případě jakýchkoliv nejasností nás neváhejte kontaktovat na fóru.

Viz také