Création d'une application Web Razor Barcode Generator

Razor Barcode Generator est un outil pratique qui simplifie la création de codes-barres pour les développeurs et les entreprises. L'intégration de la génération de codes-barres dans les applications web améliore la fonctionnalité et l'expérience de l'utilisateur, en facilitant la production d'une variété de types de codes-barres. Qu'il s'agisse de gérer des stocks, de suivre des actifs ou de rationaliser des processus de caisse, l'utilisation d'un générateur de codes-barres Razor peut améliorer de manière significative l'efficacité et la précision. Nous utiliserons IronBarcode dans ce tutoriel pour créer un générateur de code-barres.

Introduction à IronBarcode

IronBarcode est un outil essentiel pour les développeurs qui travaillent avec .NET Core, offrant une bibliothèque facile à utiliser pour génération de codes-barres et la lecture. Il se distingue par sa simplicité d'intégration dans vos projets, nécessitant un minimum de code pour produire ou déchiffrer les codes-barres et les codes QR. IronBarcode est donc un choix polyvalent pour améliorer les applications dotées de fonctionnalités de génération et de lecture de codes-barres, qu'il s'agisse d'applications web utilisant des pages Razor ou d'applications de bureau et mobiles. Son large éventail de formats de codes-barres pris en charge lui permet de répondre aux exigences de divers projets, y compris ceux de .NET MVC, Blazor WebAssembly app et Blazor App, ce qui en fait un choix fiable pour les développeurs.

Etapes pour créer un générateur de code-barres

Étape 1 : Créer une application Web ASP.NET Core (Pages du rasoir)

Nous pouvons choisir l'application Blazor ou l'application serveur Blazor pour ce projet. Mais pour ce tutoriel, j'utiliserai ASP.NET Core Web App (Pages du rasoir). La création d'une application web ASP.NET Core avec Razor Pages dans Visual Studio implique une série d'étapes simples. Ce guide vous aidera à mettre en place votre projet à partir de zéro :

Ouvrez Visual Studio : Démarrer Visual Studio. Dans la fenêtre de démarrage, sélectionnez "Créer un nouveau projet" pour commencer à configurer votre nouvelle application web.

Choisir le type de projet : Dans la fenêtre "Créer un nouveau projet", vous devez sélectionner le type de projet. Tapez "Razor" dans la zone de recherche pour réduire les options, puis sélectionnez "ASP.NET Core Web App" dans la liste des modèles de projet. Après l'avoir sélectionné, cliquez sur le bouton "Suivant" pour continuer.

Configurez votre projet : Vous êtes maintenant invité à configurer votre nouveau projet.

• Saisissez un "nom de projet" pour votre application web.
• Choisissez un "emplacement" approprié sur votre ordinateur où les fichiers du projet seront stockés.
• Vous pouvez également modifier le "Nom de la solution" si vous souhaitez qu'il soit différent du nom du projet.

• Cliquez sur "Suivant" pour continuer.

  

  Définir les détails du projet : Dans la fenêtre "Informations complémentaires", veillez à.. :

• Sélectionnez la version appropriée de .NET dans la liste déroulante. Pour bénéficier des fonctionnalités les plus récentes, sélectionnez la version la plus récente.
• Vérifiez que l'option "Configurer pour HTTPS" est cochée afin d'activer les connexions HTTP sécurisées.

• Cliquez sur "Créer" pour lancer la création de votre nouvelle application web Razor Pages.

  

Étape 2 : Installer la bibliothèque IronBarcode

Pour installer IronBarcode à l'aide du gestionnaire de paquets NuGet dans Visual Studio, suivez les étapes suivantes pour l'intégrer de manière transparente à votre application Web ASP.NET Core ou à tout autre projet .NET :

Accédez au gestionnaire de paquets NuGet : Cliquez avec le bouton droit de la souris sur le nom de votre projet dans le volet de l'explorateur de solutions, qui se trouve généralement à droite de l'interface de Visual Studio. Dans le menu contextuel qui apparaît, sélectionnez "Gérer les paquets NuGet..." L'onglet NuGet Package Manager s'ouvre alors.

Recherchez IronBarcode : Dans l'onglet NuGet Package Manager, cliquez sur l'onglet "Browse" pour rechercher des paquets en ligne. Dans le champ de recherche, tapez "IronBarcode" pour trouver la bibliothèque IronBarcode.

Installez IronBarcode : Dans les résultats de la recherche, localisez le paquet "IronBarcode". Veillez à sélectionner le bon paquet, car il peut y avoir des paquets portant des noms similaires. Cliquez sur le paquet "IronBarcode" pour le sélectionner, puis cliquez sur le bouton "Installer". Visual Studio peut afficher une boîte de dialogue énumérant les changements qui seront effectués, y compris les dépendances supplémentaires qui seront installées en même temps qu'IronBarcode. Examinez les modifications et cliquez sur "OK" ou "Accepter" pour procéder à l'installation. Si un accord de licence apparaît, lisez-le et acceptez-le pour continuer.

Étape 3 : Conception de l'interface utilisateur

Il est temps de se concentrer sur l'aspect visuel de notre application web. Nous commencerons par améliorer la page Index. Pour ce faire, ouvrez le fichier index.cshtml de votre projet. C'est dans ce fichier que se trouve le balisage de la page d'accueil. Pour rendre notre page plus attrayante et plus conviviale, nous allons appliquer un style personnalisé.

CSS pour la conception : Insérez le CSS suivant dans la section <head&gt ; de votre fichier index.cshtml ou dans une balise <style&gt ; si vous l'intégrez directement dans le HTML :

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

Ce code CSS est conçu pour donner à la page d'index un aspect propre et moderne, en utilisant la police "Poppins" pour une apparence élégante et en définissant des styles pour les conteneurs, les boutons, les contrôles de formulaire et autres pour une interface utilisateur cohérente. N'hésitez pas à personnaliser davantage ces styles pour les adapter aux exigences spécifiques de votre application web.

Ajout d'un message de bienvenue : Pour accueillir les utilisateurs et leur présenter l'objectif de notre application, nous placerons un message de bienvenue bien visible sur la page. Nous adapterons également sa couleur pour qu'elle corresponde à notre thème de conception. Nous inclurons une image de logo centrée sur la page, juste en dessous du message de bienvenue. Voici comment procéder :

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

Pour continuer à concevoir l'interface utilisateur de votre générateur de codes-barres, concentrons-nous sur la structuration du contenu principal dans une disposition centrée. L'extrait suivant montre comment utiliser le système de grille de Bootstrap pour centrer le contenu et préparer les autres composants de l'interface utilisateur, tels que les formulaires, les boutons ou les zones de texte informatif.

<div class="container">

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

    </div>
</div>

<div class="container">

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

    </div>
</div>

Formulaire de saisie de la conception

Maintenant, dans la structure ci-dessus, nous allons concevoir notre formulaire pour obtenir les données de l'utilisateur afin de concevoir leur code-barres. Nous prendrons les champs suivants en entrée : Données pour le code-barres, Type de code-barres, Largeur maximale, Hauteur maximale et Couleur du code-barres. Voici le code :

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

        <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">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

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

Voici, en termes plus simples, la fonction de chaque élément :

Le conteneur <div> : C'est comme une boîte sur la page web qui contient tout ce qui est lié à la création d'un code-barres. Sa largeur est égale à la moitié de celle de son conteneur parent en raison de la classe col-md-6.

L'élément <form> : Il s'agit de la partie de la page où les utilisateurs saisissent des données. L'attribut method = "post" signifie que lorsque le formulaire est soumis, les informations sont envoyées au serveur d'une manière invisible. L'attribut enctype = "multipart/form-data" permet au formulaire d'envoyer des fichiers, ce qui peut être utile si vous téléchargez une image ou un fichier pour générer un code-barres.

Données pour le code-barres : Il s'agit d'un champ dans lequel les utilisateurs peuvent saisir les informations qu'ils souhaitent transformer en code-barres, comme une URL ou du texte. Il est marqué comme obligatoire, de sorte que le formulaire ne peut pas être soumis sans qu'il soit rempli.

Type de code-barres : Ici, les utilisateurs peuvent choisir le type de code-barres qu'ils souhaitent créer. Les choix proviennent d'une énumération (une liste spéciale) défini dans un code qui n'est pas présenté ici. Les utilisateurs peuvent taper pour rechercher parmi les options disponibles.

Max Width et Max Height : Ces champs permettent aux utilisateurs de spécifier la taille maximale du code-barres en pixels. Ils évitent que le code-barres ne soit trop grand pour l'utilisation prévue.

Couleur du code-barres : Comme pour le type de code-barres, les utilisateurs peuvent choisir une couleur pour leur code-barres à partir d'une liste définie dans le code. Cela permet de personnaliser l'apparence du code-barres.

Bouton "Générer un code-barres" : Après avoir rempli le formulaire, cliquez sur ce bouton pour envoyer les informations au serveur, où le code-barres est créé sur la base des détails fournis. L'attribut asp-page-handler indique une méthode spécifique dans le code du serveur qui gère cette action.

Conteneur de messages : C'est là que les messages (comme les messages de réussite ou d'erreur) apparaîtra après l'envoi du formulaire. Ces messages sont définis du côté du serveur et affichés à l'intention de l'utilisateur afin de lui fournir un retour d'information sur l'action entreprise.

Colonne d'images

Il est maintenant temps de créer une colonne dans laquelle le code-barres généré sera affiché et le bouton de téléchargement apparaîtra. Le bouton de téléchargement permet de télécharger le bouton généré. Il y aura un champ de saisie où vous pourrez ajouter le nom du code-barres avant le téléchargement. Voici le code qui permet de réaliser cette opération :

<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>

<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>

Colonne d'images (col-md-6 image-padding): Cette div crée une colonne à côté de la colonne du formulaire (s'il s'agit d'une présentation en deux colonnes). La classe image-padding ajoute probablement un peu de remplissage autour de la colonne pour l'espacement.

Conteneur d'images (imageContainer): Cette div est spécifiquement destinée à encapsuler l'image du code-barres et les contrôles associés. Initialement caché, il est généralement rendu visible par JavaScript une fois qu'un code-barres est généré.

Image de code-barres (code-barresImage): Une balise <img&gt ; est utilisée pour afficher le code-barres généré. Initialement, l'attribut src est vide car la source de l'image sera définie dynamiquement après la génération du code-barres. L'attribut alt fournit une description textuelle alternative de l'image.

Saisie du nom du fichier : Sous l'image du code-barres, un champ de saisie permet aux utilisateurs d'entrer le nom du fichier sous lequel ils souhaitent enregistrer l'image du code-barres. Cette fonction est utile pour personnaliser le fichier avant de le télécharger.

Bouton de téléchargement : La saisie du nom du fichier s'accompagne d'un bouton intitulé "Télécharger". Ce bouton est conçu pour déclencher le téléchargement de l'image du code-barres généré, en utilisant le nom de fichier fourni par l'utilisateur s'il est spécifié.

Mise en page réactive (classes de lignes et de colonnes): La mise en page utilise le système de grille de Bootstrap (rangée, col-sm-8, col-sm-4) pour s'assurer que la saisie du nom du fichier et le bouton de téléchargement sont alignés horizontalement et s'adaptent bien aux différentes tailles d'écran. Les classes pr-1 et pl-1 ajoutent un rembourrage à droite et à gauche de ces éléments, respectivement, pour un espacement correct.

Lors de la génération d'un code-barres, la source (src) de la balise barcodeImage <img&gt ; est mise à jour pour afficher l'image. Les utilisateurs peuvent ensuite saisir le nom du fichier de leur choix dans le champ de saisie. Le fait de cliquer sur le bouton "Télécharger" devrait déclencher le téléchargement de l'image, idéalement en utilisant le nom saisi par l'utilisateur. Les spécificités de la fonctionnalité de téléchargement (par exemple, définir le nom du fichier et gérer l'action de téléchargement) serait mis en œuvre à l'aide de JavaScript ou d'une logique côté serveur liée à l'événement de clic du bouton.

Scripts

Il est maintenant temps d'ajouter la fonctionnalité du bouton de téléchargement, la gestion des entrées et la gestion des messages de réussite ou d'erreur. Nous pouvons y parvenir en utilisant jQuery. Voici le script à ajouter au fichier index.cshtml :

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var messageTimeout;

            $("form").submit(function (event) {
                event.preventDefault();
                clearTimeout(messageTimeout);
                var formData = new FormData($(this)[0]);
                $.ajax({
                    url: '@Url.Page("Index", "Upload")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#messageContainer").show();
                        $("#message").html(data.message);

                        if (data.success && data.imagePath) {
                            $("#barcodeImage").attr("src", data.imagePath).show();
                            $("#imageContainer").show();
                        } else {
                            console.error("Barcode generation failed or no image path provided.");
                        }

                        messageTimeout = setTimeout(function () {
                            $("#messageContainer").fadeOut("slow");
                        }, 3000);
                    },

                    error: function (xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
            });

            $("#customDownloadBtn").click(function () {
                var fileName = $("#fileName").val().trim();
                if (fileName === "") {
                    fileName = "Generated Barcode";
                }
                var downloadLink = $("<a>").attr({
                    href: $("#barcodeImage").attr("src"),
                    download: fileName + ".png",
                    style: "display: none;"
                }).appendTo("body");
                downloadLink [0].click();
                downloadLink.remove();
            });
        });
    </script>
}

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var messageTimeout;

            $("form").submit(function (event) {
                event.preventDefault();
                clearTimeout(messageTimeout);
                var formData = new FormData($(this)[0]);
                $.ajax({
                    url: '@Url.Page("Index", "Upload")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#messageContainer").show();
                        $("#message").html(data.message);

                        if (data.success && data.imagePath) {
                            $("#barcodeImage").attr("src", data.imagePath).show();
                            $("#imageContainer").show();
                        } else {
                            console.error("Barcode generation failed or no image path provided.");
                        }

                        messageTimeout = setTimeout(function () {
                            $("#messageContainer").fadeOut("slow");
                        }, 3000);
                    },

                    error: function (xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
            });

            $("#customDownloadBtn").click(function () {
                var fileName = $("#fileName").val().trim();
                if (fileName === "") {
                    fileName = "Generated Barcode";
                }
                var downloadLink = $("<a>").attr({
                    href: $("#barcodeImage").attr("src"),
                    download: fileName + ".png",
                    style: "display: none;"
                }).appendTo("body");
                downloadLink [0].click();
                downloadLink.remove();
            });
        });
    </script>
}

Empêcher la soumission du formulaire par défaut : Lorsque le formulaire est soumis, l'action par défaut (qui rechargerait la page) est évitée. Cela permet d'effectuer une requête asynchrone, ce qui permet à l'utilisateur de rester sur la même page et de bénéficier d'une expérience plus fluide.

Collecte des données du formulaire : Les données du formulaire, y compris les données relatives au code-barres, au type, aux dimensions et à la couleur, sont rassemblées dans un objet FormData. Cette approche est particulièrement utile pour traiter les téléchargements de fichiers ou les données contenant des caractères spéciaux sans avoir à encoder manuellement les données.

Requête AJAX : Une requête asynchrone est adressée au serveur à l'aide de la méthode $.ajax de jQuery. L'URL est générée dynamiquement pour correspondre au gestionnaire de téléchargement de la page Razor ("Index", "Upload")le formulaire est traité par la méthode côté serveur appropriée. Les options processData : false et contentType : false sont nécessaires lors de la soumission d'objets FormData pour empêcher jQuery de transformer les données, ce qui permet au serveur d'interpréter correctement le format multipart/form-data.

Gestion de la réussite : En cas de réponse positive, le script affiche le conteneur de messages et met à jour son contenu en fonction de la réponse du serveur. Si la réponse indique un succès et inclut un chemin d'accès à l'image, le script met à jour l'attribut src de l'image du code-barres et l'affiche. Un délai d'attente est défini pour masquer automatiquement le message au bout de 3 secondes, ce qui permet à l'utilisateur d'obtenir un retour d'information qui s'efface pour nettoyer l'interface utilisateur.

Gestion des erreurs : En cas d'erreur dans la demande, un message d'erreur est enregistré dans la console. Ce traitement de base pourrait être étendu pour fournir un retour d'information à l'utilisateur directement dans l'interface utilisateur.

Clic sur le bouton de téléchargement : Lorsque le bouton de téléchargement est cliqué, le script vérifie si un nom de fichier a été saisi par l'utilisateur. Si ce n'est pas le cas, la valeur par défaut est "Code-barres généré".

Création d'un lien de téléchargement : Un élément temporaire <a&gt ; est créé et configuré avec l'attribut href pointant vers la source de l'image de code-barres et l'attribut download défini sur le nom de fichier désiré (en ajoutant ".png" pour correspondre au format d'image attendu). Le lien est caché car il n'est pas censé être affiché dans la mise en page.

Déclenchement du téléchargement : Le script clique sur le lien de manière programmatique, invitant le navigateur à télécharger le fichier image. Ensuite, le lien temporaire est supprimé du document pour nettoyage.

Ce script interagit directement avec les éléments HTML définis dans les extraits précédents, tels que le formulaire pour la saisie des données du code-barres, le conteneur de message pour le retour d'information et le conteneur d'image pour l'affichage du code-barres généré. Il rend l'application dynamique, permettant la génération et la récupération asynchrones de codes-barres sans rechargement de la page, et fournit un mécanisme intuitif permettant aux utilisateurs de télécharger les images de codes-barres générées.

Étape 4 : Rédaction d'un code fonctionnel

Définir la couleur

En haut de la page, nous ajouterons la ligne suivante :

using Color = IronSoftware.Drawing.Color ;

Cela nous aidera à comprendre le code que nous utilisons, donc à comprendre IronSoftware.Drawing.Color que nous utilisons pour mettre de la couleur dans notre code.

Design Barcode Colors Enum

Dans votre fichier index.cshtml, la définition d'un enum nommé BarcodeColors est un élément essentiel pour spécifier les options de couleur disponibles pour la génération de codes-barres. Cette énumération liste différents noms de couleurs, qui correspondent à des couleurs prédéfinies dans IronDrawing.

public enum BarcodeColors

{

        AliceBlue,

        Blanc antique,

        Aqua,

        Aigue-marine,

        L'azur,

        Beige,

        Bisque,

        // Note : IronDRAWING prend en charge une large sélection de couleurs pour les codes-barres. Pour une liste complète, veuillez vous référer à la documentation officielle.

}

Dans le formulaire HTML de votre page Razor (index.cshtml)vous avez inclus un champ de saisie pour la couleur du code-barres avec une liste de données associée. Cette liste de données est remplie dynamiquement avec des options basées sur l'enum BarcodeColors.

Types de codes-barres Enum

L'enum BarcodeTypes, similaire à l'enum BarcodeColors, joue un rôle essentiel dans la définition des différents types de codes-barres que les utilisateurs peuvent générer dans votre application. Cette énumération répertorie une variété de formats de codes-barres, y compris les formats unidimensionnels (1D) et bidimensionnelle (2D) qui répondent à un large éventail de cas d'utilisation et de normes industrielles.

public enum BarcodeTypes

{

        Aztèque,

        Codabar,

        Code128,

        Code39,

        Code93,

        DataMatrix,

        EAN13,

        EAN8,

        ITF,

        MSI,

        PDF417,

        Plessey,

        QRCode,

        UPCA,

        SEPC

}

Dans la partie frontale, en particulier dans votre page Razor (index.cshtml)cette énumération est utilisée pour remplir un menu déroulant (via une liste de données) qui permet aux utilisateurs de sélectionner le format de code-barres à générer.

Fonction d'aide EnumToColor

Cette fonction d'aide, EnumToColor, est conçue pour convertir les valeurs enum de BarcodeColors en leurs objets IronSoftware.Drawing correspondants. Cette conversion est essentielle pour le traitement en amont dans votre application, où la couleur sélectionnée pour un code-barres doit être traduite de la sélection de l'utilisateur en une couleur qui peut être appliquée au processus de génération de l'image du code-barres.

private Color EnumToColor(BarcodeColors colorEnum)

{

        return colorEnum switch

    {

                BarcodeColors.AliceBlue => Color.AliceBlue,

                BarcodeColors.AntiqueWhite => Color.AntiqueWhite,

                BarcodeColors.Aqua => Color.Aqua,

                BarcodeColors.Aquamarine => Color.Aquamarine,

                BarcodeColors.Azure => Color.Azure,

                BarcodeColors.Beige => Color.Beige,

                BarcodeColors.Bisque => Color.Bisque,

                => Color.Black, // Couleur par défaut ou de repli

        //et ainsi de suite!

    };

}

La fonction prend un paramètre de type BarcodeColors, qui est l'énumération représentant le choix de couleur de l'utilisateur pour le code-barres. Il renvoie un objet IronSoftware.Drawing correspondant à la valeur de l'énumération qui lui a été transmise.

La fonction utilise une expression de commutation, une fonctionnalité introduite dans C# 8.0, pour faire correspondre le paramètre colorEnum à chaque valeur possible de l'énumération BarcodeColors. Pour chaque cas de l'expression du commutateur, il renvoie l'objet System.Drawing.Color qui correspond au nom de la valeur de l'énumération. Par exemple, si BarcodeColors.AliceBlue est passé, et qu'il renvoie Color.AliceBlue.

L'expression du commutateur couvre toutes les couleurs définies dans l'enum BarcodeColors, garantissant que toute couleur sélectionnée peut être traduite avec précision dans un objet IronSoftware.Drawing. Si la valeur de l'énumération ne correspond à aucune case (ce qui ne devrait pas se produire si tous les cas sont couverts), le cas par défaut renvoie Color.Black comme solution de repli.

Fonction d'aide pour le type de code-barres

La fonction GetBarcodeEncoding est un élément essentiel de la logique d'arrière-plan de votre application, conçu pour mapper le type de code-barres sélectionné à partir d'une énumération conviviale, la fonction GetBarcodeEncoding (Types de codes-barres) à l'encodage spécifique requis par la bibliothèque de génération de codes-barres (appelé ici BarcodeWriterEncoding).

private BarcodeWriterEncoding GetBarcodeEncoding(Types de codes-barres barcodeType)

{

        return barcodeType switch

    {

                BarcodeTypes.Aztec => BarcodeWriterEncoding.Aztec,

                BarcodeTypes.Codabar => BarcodeWriterEncoding.Codabar,

                BarcodeTypes.Code128 => BarcodeWriterEncoding.Code128,

                BarcodeTypes.Code39 => BarcodeWriterEncoding.Code39,

                BarcodeTypes.Code93 => BarcodeWriterEncoding.Code93,

                BarcodeTypes.DataMatrix => BarcodeWriterEncoding.DataMatrix,

                BarcodeTypes.EAN13 => BarcodeWriterEncoding.EAN13,

                BarcodeTypes.EAN8 => BarcodeWriterEncoding.EAN8,

                BarcodeTypes.ITF => BarcodeWriterEncoding.ITF,

                BarcodeTypes.MSI => BarcodeWriterEncoding.MSI,

                BarcodeTypes.PDF417 => BarcodeWriterEncoding.PDF417,

                BarcodeTypes.Plessey => BarcodeWriterEncoding.Plessey,

                BarcodeTypes.QRCode => BarcodeWriterEncoding.QRCode,

                BarcodeTypes.UPCA => BarcodeWriterEncoding.UPCA,

                BarcodeTypes.UPCE => BarcodeWriterEncoding.UPCE,

                _ => BarcodeWriterEncoding.QRCode, // Encodage par défaut ou de repli

    };

}

La fonction accepte un paramètre de type BarcodeTypes, qui représente la sélection du format de code-barres par l'utilisateur. Elle renvoie une valeur de BarcodeWriterEncoding, qui correspond directement aux types d'encodage pris en charge par la bibliothèque de génération de codes-barres.

À l'aide d'une expression de commutation, cette fonction compare le paramètre barcodeType à chaque valeur définie dans l'enum BarcodeTypes. Pour chaque cas dans l'expression du commutateur, il renvoie la valeur BarcodeWriterEncoding équivalente. Par exemple, si BarcodeTypes.Code128 est transmis et que la fonction renvoie BarcodeWriterEncoding.Code128.

Cette expression de commutation complète garantit que chaque format de code-barres sélectionnable par l'utilisateur a un type d'encodage correspondant que la bibliothèque de génération de code-barres peut utiliser. Le cas par défaut renvoie BarcodeWriterEncoding.QRCode comme solution de repli. Ce choix par défaut suppose que les codes QR sont un choix commun et largement applicable ; cependant, le comportement par défaut pourrait être adapté pour répondre aux exigences de votre application ou même lancer une exception si un type de code-barres non pris en charge est rencontré.

Ajout des propriétés Message et BarcodeImageUrl

Ces propriétés sont utilisées pour communiquer le résultat des opérations (comme la génération de codes-barres) retour à la page Razor (le fichier .cshtml) et pour contenir l'URL de l'image du code-barres généré, respectivement. Dans votre page Razor, vous pouvez accéder à ces propriétés pour afficher le message et l'image du code-barres à l'utilisateur.

public string Message {  obtenir ; set ; }

public string BarcodeImageUrl {  obtenir ; set ; }

Signature de la fonction OnPostUpload

Il s'agit de la signature d'un gestionnaire HTTP POST dans un fichier ASP.NET Application principale de Razor Pages. Il est conçu pour répondre à la soumission d'un formulaire pour la génération de codes-barres.

public JsonResult OnPostUpload(string barcodeText, string barcodeType, int ? maxWidth, int ? maxHeight, string barcodeColor, string correctionLevel)

{

}

La fonction reçoit plusieurs paramètres du formulaire :

barcodeText : Les données à encoder dans le code-barres.

barcodeType : Le type de code-barres à générer (par exemple, QR Code, Code128).

maxWidth et maxHeight : Paramètres facultatifs permettant de spécifier les dimensions du code-barres généré.

barcodeColor : La couleur du code-barres.

correctionLevel : Non utilisé dans l'extrait fourni, mais concerne généralement le niveau de correction des erreurs pour certains types de codes-barres tels que les codes QR.

Sélection du codage et génération de codes-barres

Il est maintenant temps de commencer à mettre en œuvre la logique. Voici le code du script :

BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode ; // La valeur par défaut est QRCode

// Tentative d'analyse du type de code-barres vers l'enum BarcodeTypes correspondant

si (Enum.TryParse<BarcodeTypes>(barcodeType, true, out var barcodeTypeEnum))

{

        encodage = GetBarcodeEncoding(barcodeTypeEnum);

}

autre

{

        // Gérer le cas où barcodeType ne correspond à aucune valeur de l'enum

        return new JsonResult(nouveau {  success = false, message = "Invalid barcode type selected." });

}

var myBarcode = BarcodeWriter.CreateBarcode(code-barresTexte, encodage);

Au départ, un encodage de code-barres par défaut est défini. La fonction tente d'analyser la chaîne barcodeType en fonction de l'enum BarcodeTypes. En cas de succès, elle appelle GetBarcodeEncoding, une fonction d'aide qui associe les BarcodeTypes à l'encodage spécifique requis par la bibliothèque de l'auteur de codes-barres (BarcodeWriterEncoding). Si le type de code-barres n'est pas valide, une erreur est renvoyée. Il génère ensuite le code-barres avec le texte et l'encodage spécifiés.

Conversion des couleurs et personnalisation des codes-barres

Cette partie gère la personnalisation de la couleur et de la taille du code-barres. Il vérifie d'abord si une couleur a été spécifiée. Si c'est le cas, il essaie d'analyser cette couleur dans l'enum BarcodeColors et de la convertir en un objet System.Drawing.Color à l'aide de la fonction d'aide EnumToColor. Si la couleur n'est pas valide, une erreur est renvoyée. Ensuite, si maxWidth et maxHeight sont fournis, le code-barres est redimensionné en fonction de ces dimensions.

// Convertit la chaîne barcodeColor en un objet Color

si (!string.IsNullOrEmpty(couleur du code-barres))

{

        // Tentative d'analyse de la couleur du code-barres vers l'enum BarcodeColors correspondant

        si (Enum.TryParse<BarcodeColors>(barcodeColor, true, out var barcodeColorEnum))

    {

                // Convertir l'énumération en un objet Couleur

                var color = EnumToColor(barcodeColorEnum);

                myBarcode.ChangeBarCodeColor(couleur, vrai);

    }

        autre

    {

                // Gérer le cas où barcodeType ne correspond à aucune valeur de l'enum

                return new JsonResult(nouveau {  success = false, message = "Invalid Color selected" });

    }

}

si (maxWidth.HasValue && maxHeight.HasValue)

{

        myBarcode.ResizeTo(maxWidth.Value, maxHeight.Value);

}

Sauvegarde et retour de l'image du code-barres

Enfin, l'image du code-barres générée est enregistrée sur le serveur. Un nom de fichier unique est créé en utilisant l'horodatage actuel pour éviter les conflits de noms. Le code-barres est enregistré dans un répertoire spécifique (wwwroot/barcodes)qui est créé s'il n'existe pas déjà. Après avoir enregistré l'image, un message de réussite est préparé et une réponse JSON est renvoyée, comprenant le statut de réussite, le message et le chemin d'accès à l'image du code-barres générée. Cela permet à l'application côté client d'afficher le code-barres généré ou de fournir un lien permettant à l'utilisateur de le télécharger.

// Le reste de votre code pour enregistrer et renvoyer l'image du code-barres...

var barcodesFolderPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "barcodes");

Directory.CreateDirectory(barcodesFolderPath);

var fileName = $"barcode_"{DateTime.Now:yyyyMMddHmmssfff}.png" ;

var filePath = Path.Combine(barcodesFolderPath, fileName);

myBarcode.SaveAsImage(chemindefichier);

this.Message = $"QR Code généré avec succès. Nom du fichier : {nom de fichier}" ;

return new JsonResult(nouveau {  success = true, message = Message, imagePath = $"/barcodes/{nom de fichier}" });

Modifier _Layout.cshtml

Dans le fichier _Layout.cshtml, nous supprimons les balises d'en-tête et de pied de page pour que notre application soit belle et minimaliste. Voici à quoi ressemblera le fichier _Layout.cshtml final :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData ["Title"] - Barcode_Generator_Razor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Barcode_Generator_Razor.styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData ["Title"] - Barcode_Generator_Razor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Barcode_Generator_Razor.styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Exécuter l'application

Vous pouvez exécuter votre application en cliquant sur la flèche verte "Start" ou en appuyant sur F5 pour lancer le débogage. Si vous préférez exécuter sans attacher le débogueur, appuyez sur Ctrl + F5.

Commencez par taper les informations que vous souhaitez encoder dans le code-barres. Il peut s'agir de n'importe quel texte ou URL que vous souhaitez convertir en un format de code-barres. Cliquez sur le menu déroulant intitulé "Type de code-barres". Une liste de différents formats de codes-barres s'affiche. Vous pouvez taper ici pour filtrer la liste et sélectionner le type de code-barres qui correspond à vos besoins. Par exemple, vous pouvez sélectionner "Aztec" ou "QR Code" dans la liste.

Recherchez les champs intitulés "Largeur maximale" (px)"et "Hauteur maximale (px)." Vous y indiquerez les dimensions maximales de votre code-barres afin de vous assurer qu'il est de la bonne taille pour votre application. Essayez de saisir 300 pour les deux afin que le code-barres soit suffisamment grand pour être scanné facilement, mais pas trop grand pour tenir sur le support souhaité.

Cliquez sur la liste déroulante "Color for Barcode". Une liste d'options de couleur s'affiche, comme pour la sélection du type de code-barres. Vous pouvez faire défiler la liste pour voir toutes les couleurs ou commencer à taper pour trouver une couleur particulière comme "AliceBlue".

Après avoir rempli tous les champs, cliquez sur le bouton "Generate Barcode". L'application web utilisera les données que vous avez fournies pour créer une image de code-barres qui apparaîtra à l'écran. Il s'affichera sur le côté du formulaire de saisie. Nous avons appelé cette section la colonne d'images dans notre code frontal.

Vous pouvez à nouveau modifier la couleur du code-barres en sélectionnant une couleur différente et en cliquant sur le bouton Générer le code-barres.

Si vous êtes satisfait du code-barres généré qui s'affiche à l'écran, une option vous permet de saisir un nom de fichier. Après avoir nommé votre fichier, cliquez sur le bouton "Télécharger" pour enregistrer l'image du code-barres sur votre ordinateur. Lorsque vous vérifiez le dossier des codes-barres dans votre projet, vous verrez les codes-barres générés dans ce dossier.

Conclusion

En conclusion, l'application web du générateur de codes-barres offre un moyen simple de créer des codes-barres personnalisés. Les utilisateurs peuvent facilement saisir des données, choisir un type de code-barres, définir la taille et choisir une couleur avant de générer un code-barres qui répond à leurs besoins spécifiques. Cet outil, conçu pour être simple, permet de créer et de personnaliser rapidement des codes-barres. IronBarcode, la bibliothèque qui alimente cette application, offre un service d'information et de conseil en matière de sécurité essai gratuit pour que les utilisateurs puissent tester ses fonctionnalités. Si vous trouvez que l'outil répond à vos besoins, vous pouvez acquérir une licence à partir de 749 $, qui débloque toutes les capacités d'IronBarcode pour vos projets.

Pour générer des images de code QR dans votre application web, je suggère d'utiliser IronQR à cette fin, car il est spécialement conçu pour traiter les codes QR.