ASP.NET MVCでのバーコード画像の生成と表示

バーコードは、機械可読形式でデータを視覚的に表します。通常、製品または会社に関するデータまたは情報が含まれ、数字および/または平行線のパターンの形式でエンコードされます。 ASP.NET MVCでは、Data Matrix、Aztec、Code 128などのさまざまな種類のバーコードを生成できます。この記事では、ASP.NET MVCアプリケーションでバーコードイメージを生成して表示する方法を学習します。上記の手順を実行すると、独自のASP.NET MVCバーコードジェネレーターが作成されます。それでは始めましょう。

この記事は、次のトピックをカバーするものとします。

ASP.NET MVCバーコードジェネレーターの機能

ASP.NETバーコードジェネレーターには次の機能があります。

  1. 次のタイプのバーコードシンボルを生成します。
    • Code128
    • Code11
    • Code39
    • QR
    • Datamatrix
    • EAN13
    • EAN8
    • ITF14
    • PDF417
  2. 生成されたバーコード画像を次の形式で保存します。
    • PNG
    • JPEG
    • BMP
    • EMF
    • SVG
  3. 生成されたバーコード画像をプレビューします。
  4. 生成されたバーコード画像をローカルディスクにダウンロードします。

ASP.NET MVCでバーコードイメージを生成および表示するための.NET API

バーコード画像を生成してASP.NET MVCアプリケーションに表示するには、Aspose.BarCode for.NET APIを使用します。これにより、さまざまな1Dおよび2Dバーコードタイプを生成および認識できます。 APIのDLLをダウンロードするか、NuGetを使用してインストールしてください。

PM> Install-Package Aspose.BarCode

ASP.NET MVCでバーコードイメージを生成および表示する手順

以下の手順に従って、ASP.NET MVCアプリケーションでバーコード画像を生成して表示できます。

  • まず、新しいプロジェクトを作成し、ASP.NET Webアプリケーション(.NET Framework)プロジェクトテンプレートを選択します。
  • 次に、[新しいASP.NET Webアプリケーションの作成]ダイアログで、[MVC]を選択してから、[作成]を選択します。
MVCを選択

MVCを選択

  • 次に、NuGetパッケージマネージャーを開き、Aspose.BarCode for.NETパッケージをインストールします。
Aspose.BarCodefor.NETをインストールします

Aspose.BarCodefor.NETをインストールします

  • 次に、生成されたバーコード画像を保存するための新しいフォルダ「Images」を作成します。
画像フォルダを作成します。

画像フォルダを作成します。

  • 次に、「Models」フォルダに「Barcode」という名前のモデルを作成して、バーコード情報を保存します。
// バーコードの基本情報
public class Barcode
{
    public string Text { get; set; }

    public BarcodeType BarcodeType { get; set; }

    public BarCodeImageFormat ImageType { get; set; }
}
  • また、列挙型を追加して、サポートされているバーコードシンボルを一覧表示します。 「Models」フォルダの下の別のクラスに追加することも、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バーコードジェネレーターアプリケーションのデモンストレーションです。

デモASP.NET MVCバーコードジェネレーター

デモASP.NET MVCバーコードジェネレーター

ソースコードをダウンロード

ASP.NET MVCバーコードジェネレーターアプリケーションの完全なソースコードはGitHubからダウンロードできます。

無料ライセンスを取得する

無料の一時ライセンスを取得して、評価の制限なしにライブラリを試すことができます。

結論

この記事では、ASP.NET MVCアプリケーションでバーコード画像を生成して表示する方法を学習しました。また、生成されたバーコード画像をプログラムでダウンロードする方法も確認しました。さらに、ドキュメントを使用して、Aspose.BarCode for.NET APIについて詳しく知ることができます。ご不明な点がございましたら、フォーラムまでお気軽にお問い合わせください。

関連項目