Verbessern Sie die Indexseite, indem Sie die Datei index.cshtml bearbeiten. Wenden Sie benutzerdefiniertes Styling an:

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

Hinzufügen einer Begrüßungsnachricht:

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

Strukturierung des Hauptinhalts:

<div class="container">
    <div class="row justify-content-center">

    </div>
</div>

<div class="container">
    <div class="row justify-content-center">

    </div>
</div>

Entwurf eines Eingabeformulars:

Fügen Sie das Formular ein, um Benutzereingaben für die Barcode-Erstellung zu sammeln:

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">

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

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

Bilder-Spalte:

Zur Anzeige und zum Herunterladen des erstellten Barcodes:

<div class="col-md-6 image-padding">
    <div id="imageContainer">

    </div>
</div>

<div class="col-md-6 image-padding">
    <div id="imageContainer">

    </div>
</div>

Skripte:

Fügen Sie Funktionalität hinzu, um Eingabe- und Downloadaktionen mit jQuery zu bearbeiten:

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

Farbe definieren:

Fügen Sie oben in Ihrer index.cshtml-Datei Folgendes hinzu:

using Color = IronSoftware.Drawing.Color;

using Color = IronSoftware.Drawing.Color;

Imports Color = IronSoftware.Drawing.Color

Barcode-Farben-Enum:

Verfügbare Farben für Barcodes definieren:

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

Barcode-Typen-Enum:

Verfügbare Arten von Barcodes definieren:

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

Hilfsfunktionen:

Enums in Farbe und Barcode-Codierung umwandeln:

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

Formularübermittlung zur Barcode-Erstellung bearbeiten:

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

Bearbeiten Sie \_Layout.cshtml für ein minimalistisches Design:

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

</body>
</html>