Creación de una aplicación web generadora de códigos de barras Razor

Razor Barcode Generator es una práctica herramienta que simplifica la creación de códigos de barras tanto para desarrolladores como para empresas. La integración de la generación de códigos de barras en aplicaciones web mejora la funcionalidad y la experiencia del usuario, por lo que es fácil de producir una variedad de tipos de códigos de barras. Si usted está manejando el inventario, el seguimiento de los activos, o la racionalización de los procesos de pago, la utilización de un generador de código de barras Razor puede mejorar significativamente la eficiencia y la precisión. Utilizaremos IronBarcode en este tutorial para crear un generador de códigos de barras.

Introducción a IronBarcode

IronBarcode es una herramienta esencial para los desarrolladores que trabajan con .NET Core, ya que ofrece una biblioteca fácil de usar para generación de códigos de barras y leyendo. Destaca por su sencillez a la hora de integrarlo en sus proyectos, ya que requiere un código mínimo para producir o descifrar códigos de barras y códigos QR. Esto convierte a IronBarcode en una opción versátil para mejorar las aplicaciones con funcionalidad tanto de generación como de lectura de códigos de barras, desde aplicaciones web que utilizan páginas Razor hasta aplicaciones de escritorio y móviles. Su amplia gama de formatos de código de barras compatibles garantiza que pueda satisfacer los requisitos de diversos proyectos, incluidos los de .NET MVC, Blazor WebAssembly app y Blazor App, lo que lo convierte en una opción fiable para los desarrolladores.

Pasos para crear un generador de códigos de barras

Paso 1: Crear aplicación web ASP.NET Core (Páginas Razor)

Podemos elegir la aplicación Blazor o la aplicación de servidor Blazor para este proyecto. Pero para este tutorial, usaré ASP.NET Core Web App (Páginas Razor). La creación de una aplicación web ASP.NET Core con Razor Pages en Visual Studio implica una serie de pasos sencillos. Esta guía le ayudará a configurar su proyecto desde cero:

Abra Visual Studio: Inicie Visual Studio. En la ventana de inicio, seleccione "Crear un nuevo proyecto" para comenzar el proceso de configuración de su nueva aplicación web.

Elija el tipo de proyecto: En la ventana "Crear un nuevo proyecto", tendrás que seleccionar el tipo de proyecto. Escriba "Razor" en el cuadro de búsqueda para reducir las opciones y, a continuación, seleccione "ASP.NET Core Web App" en la lista de plantillas de proyecto. Después de seleccionarla, haga clic en el botón "Siguiente" para continuar.

Configure su proyecto: Ahora se le pedirá que configure su nuevo proyecto.

• Introduzca un "Nombre de proyecto" para su aplicación web.
• Elija una "Ubicación" adecuada en su ordenador donde se almacenarán los archivos del proyecto.
• Opcionalmente, ajuste el "Nombre de la solución" si desea que sea diferente del nombre del proyecto.

• Haga clic en "Siguiente" para continuar.

  

  Configure los detalles del proyecto: En la ventana "Información adicional", asegúrese de:

• Seleccione la versión adecuada de .NET en el menú desplegable. Para disponer de las últimas funciones, seleccione la versión más alta disponible.
• Compruebe que la opción "Configurar para HTTPS" está marcada para activar las conexiones HTTP seguras.

• Haga clic en "Crear" para iniciar la creación de su nueva aplicación web Razor Pages.

  

Paso 2: Instalar la librería IronBarcode

Para instalar IronBarcode utilizando el gestor de paquetes NuGet en Visual Studio, siga estos pasos para integrarlo sin problemas en su ASP.NET Core Web App o cualquier otro proyecto .NET:

Acceda al gestor de paquetes NuGet: Haga clic con el botón derecho del ratón en el nombre de su proyecto en el panel Explorador de soluciones, que normalmente se encuentra en la parte derecha de la interfaz de Visual Studio. En el menú contextual que aparece, selecciona "Gestionar paquetes NuGet...". Esto abrirá la pestaña Administrador de paquetes NuGet.

Busque IronBarcode: En la pestaña NuGet Package Manager, haga clic en la pestaña "Examinar" para buscar paquetes en línea. En el cuadro de búsqueda, escriba "IronBarcode" para encontrar la biblioteca IronBarcode.

Instale IronBarcode: En los resultados de la búsqueda, localice el paquete "IronBarCode". Asegúrese de seleccionar el paquete correcto, ya que puede haber paquetes con nombres similares. Haga clic en el paquete "IronBarCode" para seleccionarlo y, a continuación, pulse el botón "Instalar". Visual Studio puede mostrar un cuadro de diálogo con una lista de los cambios que se realizarán, incluidas las dependencias adicionales que se instalarán junto con IronBarcode. Revise los cambios y haga clic en "Aceptar" para continuar con la instalación. Si aparece algún acuerdo de licencia, revíselo y acéptelo para continuar.

Paso 3: Diseño de la interfaz de usuario

Es hora de centrarnos en el aspecto visual de nuestra aplicación web. Empezaremos por mejorar la página Índice. Para ello, abra el archivo index.cshtml de su proyecto. Este archivo es donde reside el marcado de la página de inicio. Para que nuestra página sea visualmente más atractiva y fácil de usar, aplicaremos algunos estilos personalizados.

CSS para el diseño: Inserta el siguiente CSS en la sección <head> de tu archivo index.cshtml o dentro de una etiqueta <style> si lo estás incrustando directamente dentro del 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>

Este código CSS está diseñado para dar a la página Índice un aspecto limpio y moderno, utilizando la fuente "Poppins" para una apariencia elegante y definiendo estilos para contenedores, botones, controles de formulario y más para una interfaz de usuario cohesiva. No dude en personalizar aún más estos estilos para adaptarlos a los requisitos de diseño específicos de su aplicación web.

Añadir un mensaje de bienvenida: Para saludar a los usuarios e introducir el propósito de nuestra aplicación, colocaremos un mensaje de bienvenida prominente en la página. También ajustaremos su color para que coincida con el tema de nuestro diseño. Incluiremos una imagen del logotipo centrada en la página, justo debajo del mensaje de bienvenida. A continuación te explicamos cómo puedes hacerlo:

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

Para continuar diseñando la interfaz de usuario de su Generador de códigos de barras, centrémonos en estructurar el contenido principal dentro de un diseño centrado. El siguiente fragmento muestra cómo utilizar el sistema de cuadrícula de Bootstrap para centrar el contenido y preparar otros componentes de la interfaz de usuario, como formularios, botones o áreas de texto informativo.

<div class="container">

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

    </div>
</div>

<div class="container">

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

    </div>
</div>

Formulario de entrada de diseño

Ahora, en la estructura anterior, diseñaremos nuestro formulario para obtener la entrada del usuario para diseñar su Código de Barras. Tomaremos la entrada de los siguientes campos: Datos para el código de barras, Tipo de código de barras, Ancho máximo, Alto máximo y color del código de barras. Aquí está el código:

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

A continuación te explicamos de forma sencilla qué hace cada pieza:

El contenedor <div>: Es como una caja en la página web que contiene todo lo relacionado con la creación de un código de barras. Es la mitad de ancho que su contenedor padre debido a la clase col-md-6.

El elemento <formulario<: Es la parte de la página donde los usuarios introducen los datos. El atributo method ="post" significa que cuando se envía el formulario, la información se envía al servidor de una forma que otros no pueden ver. El atributo enctype ="multipart/form-data" permite que el formulario envíe archivos, lo que podría ser útil si está cargando una imagen o un archivo para generar un código de barras.

Datos para el código de barras: Este es un campo donde los usuarios pueden escribir la información que desean convertir en un código de barras, como una URL o algún texto. Está marcada como obligatoria, por lo que el formulario no puede enviarse sin rellenarla.

Tipo de código de barras: Aquí, los usuarios pueden elegir qué tipo de código de barras quieren crear. Las opciones proceden de una enumeración (una lista especial) definido en código que no se muestra aquí. Los usuarios pueden teclear para buscar entre las opciones disponibles.

Anchura máxima y Altura máxima: Estos campos permiten a los usuarios especificar el tamaño máximo del código de barras en píxeles. Evitan que el código de barras sea demasiado grande para el uso previsto.

Color para el código de barras: De forma similar al tipo de código de barras, los usuarios pueden elegir un color para su código de barras de una lista definida en el código. Esto permite personalizar el aspecto del código de barras.

Botón Generar código de barras: Tras rellenar el formulario, al hacer clic en este botón se envía la información al servidor, donde se crea el código de barras a partir de los datos facilitados. El atributo asp-page-handler indica un método específico en el código del servidor que maneja esta acción.

Contenedor de mensajes: Aquí es donde los mensajes (como mensajes de éxito o error) aparecerá después de enviar el formulario. Estos mensajes se establecen en el servidor y se muestran al usuario para informarle de la acción realizada.

Columna de imágenes

Ahora es el momento de crear una columna donde se mostrará el código de barras generado y aparecerá el botón de descarga. El botón de descarga ayudará a descargar el botón generado. Habrá un campo de entrada donde podrá añadir el nombre del código de barras antes de descargarlo. Aquí está el código para implementar esto:

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

Columna de imágenes (col-md-6 image-padding): Este div crea una columna junto a la columna del formulario (si sigue un diseño a dos columnas). La clase image-padding probablemente añade algo de relleno alrededor de la columna para espaciar.

Contenedor de imágenes (imageContainer): Este div es específicamente para encapsular la imagen del código de barras y los controles relacionados. Inicialmente oculto, suele hacerse visible mediante JavaScript una vez generado el código de barras.

Imagen de código de barras (barcodeImage): Se utiliza una etiqueta <img> para mostrar el código de barras generado. Inicialmente, el atributo src está vacío porque la fuente de la imagen se establecerá dinámicamente después de generar el código de barras. El atributo alt proporciona una descripción de texto alternativa de la imagen.

Nombre del archivo: Debajo de la imagen del código de barras, hay un campo de entrada en el que los usuarios pueden introducir un nombre para el archivo en el que desean guardar la imagen del código de barras. Esto es útil para personalizar el archivo antes de descargarlo.

Botón de descarga: Junto a la entrada del nombre del archivo hay un botón llamado "Descargar". Este botón está diseñado para activar la descarga de la imagen del código de barras generado, utilizando el nombre de archivo proporcionado por el usuario si se especifica.

Diseño adaptable (clases de filas y columnas): El diseño utiliza el sistema de cuadrícula de Bootstrap (fila, col-sm-8, col-sm-4) para garantizar que la entrada del nombre del archivo y el botón de descarga estén alineados horizontalmente y respondan bien a los diferentes tamaños de pantalla. Las clases pr-1 y pl-1 añaden relleno a la derecha y a la izquierda de estos elementos, respectivamente, para un espaciado adecuado.

Al generar un código de barras, la fuente (src) de la etiqueta barcodeImage <img> se actualiza para mostrar la imagen. A continuación, los usuarios pueden escribir un nombre de archivo de su elección en el campo de entrada. Al hacer clic en el botón "Descargar" se iniciará la descarga de la imagen, idealmente utilizando el nombre introducido por el usuario. Particularidades de la función de descarga (por ejemplo, establecer el nombre del archivo y gestionar la acción de descarga) se implementaría utilizando JavaScript o lógica del lado del servidor vinculada al evento de clic del botón.

Guiones

Ahora es el momento de añadir la funcionalidad del botón de descarga, el manejo de entradas y el manejo de mensajes de éxito o error. Podemos conseguirlo utilizando jQuery. Aquí está el script para añadir al archivo 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>
}

Evitar el envío del formulario por defecto: Cuando se envía el formulario, la acción por defecto (que recargaría la página) se impide. Esto permite realizar una petición asíncrona en su lugar, manteniendo al usuario en la misma página para una experiencia más fluida.

Recogida de datos del formulario: Los datos del formulario, incluidas las entradas de datos de código de barras, tipo, dimensiones y color, se recopilan en un objeto FormData. Este enfoque es especialmente útil para gestionar cargas de archivos o datos que incluyan caracteres especiales sin necesidad de codificarlos manualmente.

Petición AJAX: Se realiza una petición asíncrona al servidor utilizando el método $.ajax de jQuery. La url se genera dinámicamente para que coincida con el manejador de la página Razor para la carga ("Índice", "Subir")garantizando que los datos del formulario sean procesados por el método correcto del lado del servidor. Las opciones processData: false y contentType: false son necesarias al enviar objetos FormData para evitar que jQuery transforme los datos, permitiendo al servidor interpretar correctamente el formato multipart/form-data.

Gestión del éxito: En respuesta exitosa, el script muestra el contenedor de mensajes y actualiza su contenido basado en la respuesta del servidor. Si la respuesta indica éxito e incluye una ruta de imagen, el script actualiza el atributo src de la imagen del código de barras y la muestra. Se establece un tiempo de espera para ocultar automáticamente el mensaje después de 3 segundos, proporcionando información al usuario que se desvanece para limpiar la interfaz de usuario.

Tratamiento de errores: En caso de error con la solicitud, se registra un mensaje de error en la consola. Este manejo básico podría ampliarse para proporcionar información al usuario directamente en la interfaz de usuario.

Clic en el botón de descarga: Cuando se hace clic en el botón de descarga, el script comprueba si el usuario ha introducido un nombre de archivo. Si no es así, aparece por defecto "Código de barras generado".

Creación de un enlace de descarga: Se crea un elemento <a> temporal y se configura con el atributo href apuntando a la fuente de la imagen del código de barras y el atributo download configurado con el nombre de archivo deseado (añadiendo ".png" para que coincida con el formato de imagen esperado). El enlace está oculto, ya que no está pensado para mostrarse como parte del diseño de la página.

Activación de la descarga: La secuencia de comandos hace clic en el enlace de forma programática, solicitando al navegador que descargue el archivo de imagen. Después, el enlace temporal se elimina del documento para limpiarlo.

Este script interactúa directamente con los elementos HTML definidos en los fragmentos anteriores, como el formulario para introducir los datos del código de barras, el contenedor de mensajes para comentarios y el contenedor de imágenes para mostrar el código de barras generado. Hace que la aplicación sea dinámica, permitiendo la generación y recuperación asíncrona de códigos de barras sin recargar la página, y proporciona un mecanismo intuitivo para que los usuarios descarguen las imágenes de los códigos de barras generados.

Paso 4: Escribir código funcional

Definir el color

En la parte superior de la página, añadiremos la siguiente línea:

using Color = IronSoftware.Drawing.Color;

Ayudará a entender el código que estamos usando, por lo tanto, entender IronSoftware.Drawing.Color que usamos para poner Color en nuestro código.

Design Barcode Colors Enum

En su archivo index.cshtml, definir un enum llamado BarcodeColors sirve como componente crucial para especificar las opciones de color disponibles para generar códigos de barras. Esta enumeración enumera varios nombres de colores, que corresponden a colores predefinidos en IronDrawing.

public enum BarcodeColors

{

        AliceBlue,

        AntiqueWhite,

        Aqua,

        Aguamarina,

        Azure,

        Beige,

        Bizcocho,

        // Nota: IronDRAWING soporta una amplia selección de colores para los códigos de barras. Para obtener una lista completa, consulte la documentación oficial.

}

En el formulario HTML de su página Razor (index.cshtml)ha incluido un campo de entrada para el color del código de barras con una lista de datos asociada. Esta lista de datos se rellena dinámicamente con opciones basadas en el enum BarcodeColors.

Tipos de códigos de barras Enum

El enum BarcodeTypes, similar al enum BarcodeColors, desempeña un papel fundamental en la definición de los diferentes tipos de códigos de barras que los usuarios pueden generar en su aplicación. Este enum enumera una variedad de formatos de códigos de barras, incluidos los unidimensionales (1D) y bidimensional (2D) códigos de barras, que responden a una amplia gama de casos de uso y normas industriales.

public enum BarcodeTypes

{

        Azteca,

        Codabar,

        Código 128,

        Código 39,

        Código 93,

        DataMatrix,

        EAN13,

        EAN8,

        ITF,

        MSI,

        PDF417,

        Plessey,

        QRCode,

        UPCA,

        UPCE

}

En el frontend, en particular en su Razor Page (index.cshtml)este enum se utiliza para rellenar un menú desplegable (a través de una lista de datos) que permite a los usuarios seleccionar el formato de código de barras que desean generar.

Función auxiliar EnumToColor

Esta función de ayuda, EnumToColor, está diseñada para convertir valores enum de BarcodeColors en sus correspondientes objetos IronSoftware.Drawing. Esta conversión es esencial para el procesamiento backend en su aplicación, donde el color seleccionado para un código de barras necesita ser traducido de una selección del usuario a un color que pueda ser aplicado al proceso de generación de la imagen del código de barras.

private Color EnumToColor(BarcodeColors colorEnum)

{

        return interruptor colorEnum

    {

                BarcodeColors.AliceAzul => Color.AliceAzul,

                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.Negro, // Color por defecto o alternativo

        //y así sucesivamente!

    };

}

La función recibe un parámetro de tipo BarcodeColors, que es el enum que representa el color elegido por el usuario para el código de barras. Devuelve un objeto IronSoftware.Drawing correspondiente al valor enum que se le ha pasado.

La función utiliza una expresión de conmutación, una característica introducida en C# 8.0, para comparar el parámetro colorEnum con cada uno de los posibles valores enum de BarcodeColors. Para cada caso en la expresión switch, devuelve el objeto System.Drawing.Color que coincide con el nombre del valor enum. Por ejemplo, si se pasa BarcodeColors.AliceBlue y devuelve Color.AliceBlue.

La expresión switch cubre todos los colores definidos en el enum BarcodeColors, asegurando que cualquier color seleccionado pueda ser traducido con precisión a un objeto IronSoftware.Drawing. Si el valor enum no coincide con ningún caso (lo que no debería ocurrir si se cubren todos los casos)el caso por defecto devuelve Color.Negro como alternativa.

Función auxiliar de tipo de código de barras

La función GetBarcodeEncoding es una parte fundamental de la lógica de backend de su aplicación, diseñada para asignar el tipo de código de barras seleccionado a partir de un enum de fácil uso (Tipos de códigos de barras) a la codificación específica requerida por la biblioteca de generación de códigos de barras (denominado aquí BarcodeWriterEncoding).

private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes 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, // Codificación por defecto o alternativa

    };

}

La función acepta un parámetro de tipo BarcodeTypes, que representa la selección del formato del código de barras por parte del usuario. Devuelve un valor de BarcodeWriterEncoding, que corresponde directamente a los tipos de codificación admitidos por la biblioteca de generación de códigos de barras.

Utilizando una expresión switch, esta función compara el parámetro barcodeType con cada valor definido en el enum BarcodeTypes. Para cada caso de la expresión switch, devuelve el valor BarcodeWriterEncoding equivalente. Por ejemplo, si se pasa BarcodeTypes.Code128 y la función devuelve BarcodeWriterEncoding.Code128.

Esta completa expresión de conmutación garantiza que cada formato de código de barras seleccionable por el usuario tenga un tipo de codificación correspondiente que la biblioteca de generación de códigos de barras pueda utilizar. El caso predeterminado devuelve BarcodeWriterEncoding.QRCode como alternativa. Esta elección por defecto asume que los códigos QR son una opción común y ampliamente aplicable; sin embargo, el comportamiento por defecto podría ser adaptado para ajustarse a los requisitos de su aplicación o incluso lanzar una excepción si se encuentra un tipo de código de barras no soportado.

Añadir propiedades Message y BarcodeImageUrl

Estas propiedades se utilizan para comunicar el resultado de las operaciones (como la generación de códigos de barras) volver a la página de Razor (el archivo .cshtml) y para contener la URL de la imagen del código de barras generado, respectivamente. En su Razor Page, puede acceder a estas propiedades para mostrar el mensaje y la imagen del código de barras al usuario.

public cadena Mensaje {  conseguir; set; }

public string BarcodeImageUrl {  conseguir; set; }

Firma de la función OnPostUpload

Esta es la firma de un manejador HTTP POST en un archivo ASP.NET Núcleo de la aplicación Razor Pages. Está diseñado para responder al envío de un formulario para la generación de códigos de barras.

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

{

}

La función recibe varios parámetros del formulario:

barcodeText: Los datos a codificar en el código de barras.

barcodeType: El tipo de código de barras a generar (por ejemplo, Código QR, Código128).

maxAncho y maxAlto: Parámetros opcionales para especificar las dimensiones del código de barras generado.

barcodeColor: El color para el código de barras.

correctionLevel: No se utiliza en el fragmento proporcionado, pero normalmente se refiere al nivel de corrección de errores para determinados tipos de códigos de barras como los códigos QR.

Selección de codificación y generación de códigos de barras

Ahora es el momento de empezar a aplicar la lógica. Aquí está el código script:

BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode; // Por defecto QRCode

// Intentar parsear el barcodeType al enum BarcodeTypes correspondiente

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

{

        codificación = GetBarcodeEncoding(barcodeTypeEnum);

}

si no

{

        // Manejar el caso en que barcodeType no coincida con ningún valor enum

        devolver nuevo JsonResultado(nuevo {  success = false, message = "Tipo de código de barras no válido seleccionado". });

}

var myBarcode = BarcodeWriter.CreateBarcode(código de barrasTexto, codificación);

Inicialmente, se establece una codificación de código de barras por defecto. La función intenta parsear la cadena barcodeType al enum BarcodeTypes. Si tiene éxito, llama a GetBarcodeEncoding, una función de ayuda que asigna BarcodeTypes a la codificación específica requerida por la biblioteca del escritor de códigos de barras (BarcodeWriterEncoding). Si el barcodeType no es válido, devuelve un error. A continuación, genera el código de barras con el texto y la codificación especificados.

Conversión de colores y personalización de códigos de barras

Esta parte se encarga de la personalización del color y el tamaño del código de barras. Primero comprueba si se ha especificado un color. Si es así, intenta parsear este color al enum BarcodeColors y luego convertirlo en un objeto System.Drawing.Color utilizando la función de ayuda EnumToColor. Si el color no es válido, se devuelve un error. A continuación, si se indican tanto maxWidth como maxHeight, redimensiona el código de barras a estas dimensiones.

// Convertir la cadena barcodeColor en un objeto Color

si (!string.IsNullOrEmpty(barcodeColor))

{

        // Intentar parsear el barcodeColor al enum BarcodeColors correspondiente

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

    {

                // Convertir el enum en un objeto Color

                var color = EnumToColor(barcodeColorEnum);

                myBarcode.ChangeBarCodeColor(color, true);

    }

        si no

    {

                // Manejar el caso en que barcodeType no coincida con ningún valor enum

                devolver nuevo JsonResultado(nuevo {  success = false, message = "Color no válido seleccionado". });

    }

}

si (maxWidth.HasValue && maxHeight.HasValue)

{

        miCodigoDeCarta.CambiarTamaño(maxWidth.Value, maxHeight.Value);

}

Guardar y devolver la imagen del código de barras

Por último, la imagen de código de barras generada se guarda en el servidor. Se crea un nombre de archivo único utilizando la marca de tiempo actual para evitar conflictos de nombres. El código de barras se guarda en un directorio específico (wwwroot/barcodes)que se crea si aún no existe. Tras guardar la imagen, se prepara un mensaje de éxito y se devuelve una respuesta JSON que incluye el estado de éxito, el mensaje y la ruta a la imagen del código de barras generado. Esto permite a la aplicación cliente mostrar el código de barras generado o proporcionar un enlace para que el usuario lo descargue.

// El resto de su código para guardar y devolver la imagen del código de barras...

var barcodesFolderPath = Path.Combine(Directorio.GetCurrentDirectory(), "wwwroot", "códigos de barras");

Directorio.CrearDirectorio(barcodesFolderPath);

var fileName = $"código_barras{DateTime.Now:aaaammddHHmmssfff}.png";

var filePath = Ruta.Combinar(barcodesFolderPath, fileName);

myBarcode.SaveAsImage(filePath);

this.Message = $"Código QR generado correctamente. Nombre del fichero: {fileName}";

devolver nuevo JsonResultado(nuevo {  success = true, message = Mensaje, imagePath = $"/códigos de barras/{fileName}" });

Editar _Layout.cshtml

En el archivo _Layout.cshtml, eliminamos las etiquetas de encabezado y pie de página para que nuestra aplicación tenga un aspecto atractivo y minimalista. Este es el aspecto que tendrá el archivo final _Layout.cshtml:

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

Ejecutar aplicación

Puedes ejecutar tu aplicación haciendo clic en la flecha verde "Inicio" o pulsando F5 para iniciar la depuración. Si prefiere ejecutar sin conectar el depurador, pulse Ctrl + F5.

Comience escribiendo la información que desea codificar en el código de barras. Puede ser cualquier texto o una URL que desee convertir en un formato de código de barras. Haga clic en el menú desplegable "Tipo de código de barras". Aparecerá una lista con diferentes formatos de códigos de barras. Puede escribir aquí para filtrar la lista y seleccionar el tipo de código de barras que se ajuste a sus necesidades. Por ejemplo, puede seleccionar "Azteca" o "Código QR" de la lista.

Busque los campos "Anchura máxima (px)" y "Altura máxima (px)." Aquí introducirá las dimensiones máximas de su código de barras para asegurarse de que tiene el tamaño adecuado para su aplicación. Intente introducir 300 en ambos casos para que el código de barras sea lo suficientemente grande para escanearlo con facilidad, pero no demasiado para que quepa en el soporte deseado.

Haga clic en el desplegable "Color para el código de barras". Aparecerá una lista con opciones de color, similar a la selección del tipo de código de barras. Puedes desplazarte para ver todos los colores o empezar a escribir para encontrar un color concreto como "AliceBlue".

Después de rellenar todos los campos, haga clic en el botón "Generar código de barras". La aplicación web utilizará los datos que le haya proporcionado para crear una imagen de código de barras que aparecerá en la pantalla. Aparecerá en el lateral del formulario de entrada. Llamamos a esta sección la columna de imagen en nuestro código frontend.

Puede volver a cambiar el color del código de barras seleccionando un color diferente y pulsando el botón Generar código de barras.

Si está satisfecho con el código de barras generado que aparece en pantalla, verá una opción para introducir un nombre de archivo. Tras asignar un nombre al archivo, haga clic en el botón "Descargar" para guardar la imagen del código de barras en su ordenador. Cuando compruebe la carpeta de códigos de barras en su proyecto, verá los códigos de barras generados en esta carpeta.

Conclusión

En conclusión, la aplicación web generadora de códigos de barras proporciona una forma sencilla de crear códigos de barras personalizados. Los usuarios pueden introducir datos fácilmente, elegir un tipo de código de barras, establecer el tamaño y elegir un color antes de generar un código de barras que se ajuste a sus necesidades específicas. Esta herramienta está diseñada para la simplicidad, permitiendo la rápida creación y personalización de códigos de barras. IronBarcode, la librería que alimenta esta aplicación, ofrece un prueba gratuita para que los usuarios prueben sus funciones. Si considera que la herramienta se ajusta a sus necesidades, puede adquirir una licencia a partir de 749 $, que desbloquea todas las capacidades de IronBarcode para sus proyectos.

Para generar imágenes de código QR en su aplicación web, le sugiero que utilice IronQR para este fin, ya que está diseñado específicamente para manejar códigos QR.