Message icon
フッターコンテンツにスキップ
  1. IronBarcode
  2. IronBarcodeブログ
  3. IronBarcodeの使用
  4. Razorバーコードジェネレーター
IRONBARCODEの使用

RazorバーコードジェネレーターWebアプリを作成する

Jordi Bardia
Jordi Bardia
更新日:

Razor バーコードジェネレーターのチュートリアル

Razorバーコードジェネレーターは、開発者や企業がバーコードを簡単に作成できる便利なツールです。Webアプリケーションにバーコード生成を統合することで、機能性とユーザーエクスペリエンスが向上し、さまざまな種類のバーコードを生成することが簡単になります。在庫管理、資産追跡、チェックアウトプロセスの合理化など、Razorバーコードジェネレーターを利用することで、効率と正確性が大幅に向上します。 このチュートリアルではIronBarcodeを使用してバーコードジェネレーターを作成します。

IronBarcodeの紹介

IronBarcodeは、.NET Coreを使用する開発者にとって不可欠なツールであり、バーコード生成および読み取りのための使いやすいライブラリを提供します。 プロジェクトに簡単に統合できることが特長で、バーコードやQRコードを生成または解読するために最小限のコードが必要です。 これにより、Razorページを使用するWebアプリケーションからデスクトップおよびモバイルアプリケーションまで、バーコード生成および読み取り機能を備えたアプリケーションを強化するのに便利な選択肢となります。 幅広いバーコード形式のサポートにより、.NET MVC、Blazor WebAssemblyアプリ、Blazorアプリなどの多様なプロジェクト要件に対応し、開発者にとって信頼性の高い選択肢となります。

バーコードジェネレータを作成する手順

ステップ1: ASP.NET Core Webアプリケーション (Razor Pages) を作成する

Visual StudioでRazor Pagesを使用してASP.NET Core Webアプリケーションを作成するのは簡単です。 このガイドは、プロジェクトをゼロからセットアップするのを手助けします。

  1. Visual Studioを開く: Visual Studioを起動します。 スタートウィンドウで、"新しいプロジェクトを作成"を選択し、新しいWebアプリケーションの設定を始めます。
  2. プロジェクトタイプの選択: "新しいプロジェクトを作成"ウィンドウで、プロジェクトテンプレートの一覧から"ASP.NET Core Webアプリ"を選択します。 次に"次へ"をクリックして進みます。

新しいRazorプロジェクトを作成する

  1. プロジェクトの設定: あなたの新しいプロジェクトを設定するよう求められます。
    • Webアプリケーションの"プロジェクト名"を入力します。
    • プロジェクトファイルが保存されるコンピュータ上の適切な"場所"を選択します。
    • 任意で、"ソリューション名"を調整します。
    • "次へ"をクリックして続行します。

プロジェクト名、ソリューション名、およびファイルパスの設定

  1. プロジェクトの詳細を設定："追加情報"ウィンドウで、次のことを確認してください：
    • 適切な.NETのバージョンを選択します。
    • "HTTPS用に構成"がチェックされていることを確認してください。
    • "作成"をクリックして、新しいRazor Pages Webアプリケーションの作成を開始します。

追加情報の設定

ステップ2：IronBarcodeライブラリをインストール

Visual StudioのNuGetパッケージマネージャーを使用してIronBarcodeをインストールするには：

  1. NuGetパッケージマネージャにアクセス: ソリューションエクスプローラペインでプロジェクト名を右クリックします。 2. IronBarcodeを検索: "参照"タブで"IronBarcode"と入力してライブラリを探します。
  2. IronBarcodeのインストール: "IronBarCode"を選択し、"インストール"をクリックします。
  3. IronBarcodeをインストール: "IronBarcode"を選択し、"インストール"をクリックします。 依存関係とライセンス契約を確認し、進むために同意します。

ステップ3: UIのデザイン

Indexページをindex.cshtmlファイルを編集して、カスタムスタイリングを適用します。

Indexページを拡張するために、index.cshtmlファイルを編集します。カスタムスタイルを適用します:

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
HTML

ウェルカムメッセージの追加:

<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barcode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barcode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
HTML

入力フォームのデザイン:

<div class="container">
    <div class="row justify-content-center">
        <!-- Form and Image Column will go here -->
    </div>
</div>
<div class="container">
    <div class="row justify-content-center">
        <!-- Form and Image Column will go here -->
    </div>
</div>
HTML

ユーザー入力を収集してバーコードを生成するフォームを含めます。

バーコード生成のためのユーザー入力を収集するフォームを含めます:

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <!-- Form elements omitted for brevity -->
        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <!-- Form elements omitted for brevity -->
        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
HTML

画像列:

生成されたバーコードを表示およびダウンロードするために:

<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <!-- Image and download button elements omitted for brevity -->
    </div>
</div>
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <!-- Image and download button elements omitted for brevity -->
    </div>
</div>
HTML

スクリプト:

jQueryを使用して入力およびダウンロードアクションを処理する機能を追加します:

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
JAVASCRIPT

ステップ4: 機能するコードを書く

色を定義する:

あなたのindex.cshtmlファイルの先頭に次の内容を追加します:

using Color = IronSoftware.Drawing.Color;
using Color = IronSoftware.Drawing.Color;
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

バーコード色列挙体:

バーコードの利用可能な色を定義します:

public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}
public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}
Public Enum BarcodeColors
	AliceBlue
	AntiqueWhite
	Aqua
	Aquamarine
	Azure
	Beige
	Bisque
	' And others...
End Enum
$vbLabelText   $csharpLabel

バーコードタイプ列挙体:

バーコードの利用可能なタイプを定義します:

public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
Public Enum BarcodeTypes
	Aztec
	Codabar
	' Other barcode types...
End Enum
$vbLabelText   $csharpLabel

アプリケーションをF5またはCtrl + F5を押して実行します。画面の指示に従いデータを入力し、バーコードタイプを選択し、寸法を設定し、バーコードを生成します。

列挙体を色とバーコードエンコードに変換します:

private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }
private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }
Private Function EnumToColor(ByVal colorEnum As BarcodeColors) As Color
End Function
Private Function GetBarcodeEncoding(ByVal barcodeType As BarcodeTypes) As BarcodeWriterEncoding
End Function
$vbLabelText   $csharpLabel

OnPostUpload関数:

バーコード生成のためのフォーム送信を処理します:

public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}
public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}
Public Function OnPostUpload(ByVal barcodeText As String, ByVal barcodeType As String, ByVal maxWidth? As Integer, ByVal maxHeight? As Integer, ByVal barcodeColor As String) As JsonResult
	' Function logic...
End Function
$vbLabelText   $csharpLabel

レイアウト編集:

\_Layout.cshtmlを編集してミニマリストデザインにします:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head contents omitted for brevity -->
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <!-- Scripts inclusion omitted for brevity -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head contents omitted for brevity -->
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <!-- Scripts inclusion omitted for brevity -->
</body>
</html>
HTML

F5またはCtrl + F5を押してアプリケーションを実行し、画面の指示に従ってデータ入力、バーコードの種類選択、寸法設定を行います。

アプリケーションを実行するには、F5またはCtrl + F5を押します。指示に従ってデータを入力し、バーコードタイプを選択し、寸法を設定し、バーコードを生成します。

出力されたWebアプリケーション

結論

バーコードジェネレーターWebアプリケーションは、カスタムバーコードを作成する簡単な方法を提供します。 IronBarcodeは無料試用が可能で、ライセンスは$799から始まります。 QRコード画像を生成するために、IronQRの使用を検討してください。

QR コード画像を生成するには、 IronQR の使用を検討してください。

よくある質問

ASP.NET Core Web Appにバーコード生成を統合するにはどうすればいいですか？

ASP.NET Core Web AppでIronBarcodeを使用してバーコード生成を統合できます。 NuGetパッケージマネージャーを介してIronBarcodeライブラリをインストールし、そのメソッドを使用してアプリケーション内でバーコードとQRコードを生成および読み取ります。

バーコード生成のためのRazor Pagesプロジェクトを設定する際の手順は何ですか？

Razor Pagesプロジェクトでのバーコード生成のために、Visual Studioで新しいASP.NET Core Web Appを作成し、NuGetパッケージマネージャーを通してIronBarcodeをインストールし、HTML、CSS、jQueryを使用してユーザーインターフェースをカスタマイズし、バーコード機能用の必要なC#コードを実装します。

NuGetパッケージマネージャーを使用してIronBarcodeをインストールする方法

IronBarcodeをインストールするには、Visual Studioのソリューションエクスプローラーでプロジェクトを右クリックし、「NuGetパッケージの管理...」を選択し、「IronBarcode」を検索して「インストール」をクリックします。これにより、プロジェクトにライブラリを追加し、バーコード生成機能を使用できるようになります。

IronBarcodeを使用してバーコードを生成する利点は何ですか？

IronBarcodeは、幅広いバーコード形式の生成と読み取りを可能にする強力なソリューションを提供します。 .NET開発者にとって、使いやすいメソッドを提供し、.NET MVC、Blazor WebAssembly、およびBlazorアプリプロジェクトなど、さまざまなプロジェクトタイプへの統合をサポートします。

IronBarcodeを使ってバーコードの外観をカスタマイズする方法

IronBarcodeを使用して、バーコードの色と種類の列挙型を定義することで、バーコードの外観をカスタマイズできます。異なる色とバーコードフォーマットを選択し、特定のデザイン要件に合わせて生成されたバーコードを調整することができます。

バーコード生成プロセスにおけるOnPostUpload関数の目的は何ですか？

OnPostUpload関数は、バーコード生成のためのユーザー入力を処理します。バーコードのテキスト、タイプ、寸法、色などの詳細をキャプチャし、これらのパラメータに基づいてバーコードを作成するためにIronBarcodeのメソッドを利用します。

BlazorアプリでIronBarcodeを使用できますか？

はい、IronBarcodeはBlazorアプリケーションで使用できます。 Blazor WebAssemblyおよびBlazor Serverプロジェクトへの統合をサポートし、現代のWebアプリケーションを開発している開発者に柔軟性を提供します。

Jordi Bardia
Jordi Bardia
  今すぐエンジニアリングチームとチャット
ソフトウェアエンジニア
Jordiは、最も得意な言語がPython、C#、C++であり、Iron Softwareでそのスキルを発揮していない時は、ゲームプログラミングをしています。製品テスト、製品開発、研究の責任を分担し、Jordiは継続的な製品改善において多大な価値を追加しています。この多様な経験は彼を挑戦させ続け、興味を持たせており、Iron Softwareで働くことの好きな側面の一つだと言います。Jordiはフロリダ州マイアミで育ち、フロリダ大学でコンピュータサイエンスと統計学を学びました。

関連する記事

30日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアル