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

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

Jordi Bardia
Jordi Bardia
更新日:

Razor Barcode Generator Tutorial

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

IronBarcodeの紹介

IronBarcode is an essential tool for developers working with .NET Core, offering an easy-to-use library for 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ウェブアプリケーションの作成を開始します。 追加情報の設定

ステップ2: IronBarcodeライブラリのインストール

NuGetパッケージマネージャーを使用してIronBarcodeをインストールするには、Visual Studioで次の手順に従います:

  1. NuGetパッケージマネージャーにアクセス: ソリューションエクスプローラーパネルでプロジェクト名を右クリックします。

「NuGetパッケージの管理...」を選択してNuGetパッケージマネージャータブを開きます。 2. IronBarcodeを検索: 「参照」タブで「IronBarcode」と入力してライブラリを探します。

  1. IronBarcodeのインストール: 「IronBarCode」を選択し、「インストール」をクリックします。 依存関係やライセンス契約を確認し、承諾して続行します。 NuGetパッケージマネージャーを介してIronBarcodeをインストールする

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

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を使用して入力およびダウンロードアクションを処理する機能を追加します。

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

@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

色の定義:

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

列挙型を色とバーコードエンコーディングに変換します。

OnPostUpload関数:

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

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

レイアウトの編集:

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キーを押してアプリケーションを実行し、画面の指示に従ってデータを入力し、バーコードの種類を選択し、寸法を設定してバーコードを生成します。

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

バーコードジェネレータWebアプリケーションは、カスタムバーコードを簡単に作成できる方法を提供します。

結論

データを入力し、バーコードの種類を選択し、寸法を設定し、色を選択してバーコードを生成できます。 IronBarcodeは無料試用が可能で、ライセンスは$799から始まります。 QRコード画像を生成するために、IronQRの使用を検討してください。

For generating QR Code images, consider using 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日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアルを開始