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>

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

<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>

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

<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>

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

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

<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>

画像列:

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

<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>

スクリプト:

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>
}

色を定義する:

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

using Color = IronSoftware.Drawing.Color;

using Color = IronSoftware.Drawing.Color;

IRON VB CONVERTER ERROR developers@ironsoftware.com

バーコード色列挙体:

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

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

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

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

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

アプリケーションを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

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

レイアウト編集:

\_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>

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

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