Razor Barkod Üretici Web Uygulaması Oluşturma

Index sayfasını index.cshtml dosyasını düzenleyerek geliştirin. Özelleştirilmiş stil uygulayın:

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

Hoş Geldiniz Mesajı Ekleme:

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

Ana İçeriği Yapılandırma:

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

    </div>
</div>

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

    </div>
</div>

Giriş Formu Tasarımı:

Barkod oluşturmak için kullanıcı girişini toplamak için formu dahil edin.

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

Görsel Sütun:

Üretilen barkodu görüntülemek ve indirmek için:

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

    </div>
</div>

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

    </div>
</div>

Betikler:

JQuery kullanarak giriş ve indirme işlemlerini yönetmek için işlevsellik ekleyin:

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

Renk Tanımlama:

index.cshtml dosyanızın en üstüne ekleyin:

using Color = IronSoftware.Drawing.Color;

using Color = IronSoftware.Drawing.Color;

Imports Color = IronSoftware.Drawing.Color

Barkod Renkleri Enum:

Barkodlar için mevcut renkleri tanımlayın:

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

Barkod Türleri Enum:

Mevcut barkod türlerini tanımlayın:

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

Yardımcı Fonksiyonlar:

Reng ve barkod kodlamaya enumları dönüştürün:

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

Barkod oluşturma için form gönderimini yönetin:

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

Düzen Düzenleme:

Minimalist bir tasarım için \_Layout.cshtml düzenleyin:

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