ASP .NET Core 3.1 - Gerar Código Barras (TagHelper)

  Neste artigo vamos recordar como usar TagHelpers. Veremos como gerar o código de barras usando uma tag Helper customizada e os recursos da biblioteca ZXing.net.

Eu publiquei vários artigos sobre como gerar Código de barras e hoje vamos fazer isso usando a biblioteca ZXing.net criando uma TagHelper customizada na versão 3.1 da ASP .NET Core.

Vamos criar um projeto ASP .NET Core MVC na versão 3.1 e a seguir criar uma TagHelper customizada que vai gerar o o código de barras em nossa aplicação.

As TagHelpers são uma sintaxe alternativa aos Html Helpers, mas eles fornecem algumas funcionalidades que era difícil ou impossível de se obter com métodos auxiliares. Cada TagHelper tem um comportamento diferente e diferentes opções.

Quando você criar um novo projeto ASP .NET Core usando o Visual Studio, o recurso embutido TagHelpers será habilitado automaticamente, mas você também pode adicionar as tags helpers de qualquer outro assembly/namespace adicionando a diretiva @addTagHelper ao arquivo _ViewImports.cshtml.

Ex: @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

A tag TagHelper customizada deverá ser usada com a seguinte sintaxe:

<barcode content="@ViewBag.Valor" width="200" height="200"></barcode>

Isso posto vamos ao trabalho...

Recursos :

Criando o projeto no VS 2019 Community

Abra o VS 2019 Community e crie uma solução em branco via menu File-> New Project;

Selecione o template ASP .NET Core Web Application, e, Informe o nome AspMvc_CodBar1;

A seguir selecione .NET Core e ASP .NET Core 3.1 e marque o template Web Application e as configurações conforme figura abaixo:

Podemos executar a aplicação pressionando F5 e veremos a página padrão do template exibida no navegador.

Vamos precisar instalar o pacote ZXing.Net e a biblioteca System.Drawing.Common para poder gerar o código de barras.

Podemos usar a janela do Package Manager e digitar os comandos:

Ou usar a opção Manage Nuget Packages for Solution do menu Tools e na guia Browse selecionar os pacotes acima.

Com esses pacotes instalados podemos prosseguir.

Criando o controlador BarCodeController

Vamos criar o controlador para gerar o Código de barras usando o Scaffold.

Clique com o botão direito sobre a pasta Controllers e a seguir em Add-> Controller;

Selecione o template : MVC 5 Controller empty , e clique em Add;

Informe o nome BarCodeController e clique em Add;

A seguir inclua o código abaixo no arquivo :

 public class BarCodeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public IActionResult GerarBarCode(string valor)
        {
            ViewBag.valor = valor;
            return View("Index");
        }
    }

Assim temos o controlador completo com os métodos Action que vão permitir gerar o Código de barras.

Agora para podermos acessar esses dados a partir da nossa aplicação abra o arquivo _Layout.cshtml na pasta /Views/Shared e altere o código dos links conforme abaixo:

 ...

 <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
  <ul class="navbar-nav flex-grow-1">
   <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
  </li>
  <li class="nav-item">
   <a class="nav-link text-dark" asp-area="" asp-controller="BarCode" asp-action="Index">Gerar Cód.Barras </a>
  </li>
 </ul>
</div>
...

Aproveite e ajuste o código da view Index.cshtml da pasta /Views/Home para exibir o texto : Gerando Código de Barras, conforme mostrado abaixo:

@{
    ViewData["Title"] = "Home Page";
}
<div class="text-center">
  <h3>Gerando Código de barras</h3>
</div>

Criando a TagHelper

Agora vamos criar uma pasta Tags no projeto e nesta pasta vamos criar a classe BarCodeTagHelper que herda da classe TagHelper e definir o código abaixo nesta classe:

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Runtime.InteropServices;
using System.IO;
using ZXing.QrCode;

namespace AspMvc_CodBar1.Tags
{
    [HtmlTargetElement("barcode")]
    public class BarCodeTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            var content = context.AllAttributes["content"].Value.ToString();
            var width = int.Parse(context.AllAttributes["width"].Value.ToString());
            var height = int.Parse(context.AllAttributes["height"].Value.ToString());
            var barcodeWriterPixelData = new ZXing.BarcodeWriterPixelData
            {
                Format = ZXing.BarcodeFormat.CODE_128,
                Options = new QrCodeEncodingOptions
                {
                    Height = height,
                    Width = width,
                    Margin = 0
                }
            };
            var pixelData = barcodeWriterPixelData.Write(content);
            using (var bitmap = new Bitmap(pixelData.Width, pixelData.Height, System.Drawing.Imaging.PixelFormat.Format32bppRgb))
            {
                using (var memoryStream = new MemoryStream())
                {
                    var bitmapData = bitmap.LockBits(new Rectangle(0, 0, pixelData.Width, pixelData.Height), ImageLockMode.WriteOnly, PixelFormat.Format32bppRgb);
                    try
                    {
                        Marshal.Copy(pixelData.Pixels, 0, bitmapData.Scan0, pixelData.Pixels.Length);
                    }
                    finally
                    {
                        bitmap.UnlockBits(bitmapData);
                    }
                    bitmap.Save(memoryStream, ImageFormat.Png);
                    output.TagName = "img";
                    output.Attributes.Clear();
                    output.Attributes.Add("width", width);
                    output.Attributes.Add("height", height);
                    output.Attributes.Add("src", String.Format("data:image/png;base64,{0}", Convert.ToBase64String(memoryStream.ToArray())));
                }
            }
        }
    }
}

Vamos entender o código acima:

- Por convenção uma TagHelper customizada deve ser uma classe com o sufixo TagHelper no nome. No nosso exemplo BarCode será o nome raiz da nossa TagHelper.
- A classe BarCodeTagHelper deriva da classe TagHelper do namespace Microsoft.AspNetCore.Razor.TagHelpers.
- Sobrescrevemos o método Process, esse método controla o que o tag helper faz quando executada. A classe TagHelper também fornece uma versão assíncrona (ProcessAsync) com os mesmos parâmetros.
- O parâmetro de contexto(context) lhe dará toda a informação que você fornecer para Tag Helper.
- O parâmetro de saída é do tipo TagHelperOutput, que é usado para gerar o HTML de saída desejado.

A utilização do atributo [HtmlTargetElement("barcode")] define a tag que vai renderizar a tagHelper.

Agora para tornar a classe BarCodeTagHelper disponível para todas as nossas Views Razor, adicione a diretiva addTagHelper ao arquivo Views/_ViewImports.cshtml:

@using AspMvc_CodBar1
@using AspMvc_CodBar1.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AspMvc_Codbar1

Para concluir vamos agora definir a view Index.cshtml do método Action Index do controlador BarCodeController.

Clique com o botão direito do mouse sobre o método Action Index do controlador BarCodeController e selecione a opção Add View, e,  a seguir aceite os valores conforme mostra a figura abaixo:

Agora inclua o código abaixo no arquivo Index.cshtml gerado na pasta /Views/BarCode :

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Gerando Código de Barras - ASP.NET Core MVC</title>
</head>
<body>
    <h3>Gerando Código de Barras</h3>
    <hr />
    <form method="post" asp-controller="BarCode" asp-action="GerarBarCode">
        <input type="text" placeholder="Valor" name="valor" value="@ViewBag.valor" />
        <input type="submit" value="Gerar Código de Barras" />
    </form>
    <br />
    @if (@ViewBag.valor != null)
    {
        <barcode content="@ViewBag.valor" width="200" height="100" />
    }
</body>
</html>

Observe o uso da tag <barcode> que vai renderizar o código de barras.

Agora é só alegria...

Executando o projeto teremos o seguinte resultado:

Pegue o projeto aqui:  AspMvc_CodBar1.zip

"Mas Deus escolheu as coisas loucas deste mundo para confundir as sábias; e Deus escolheu as coisas fracas deste mundo para confundir as fortes;
E Deus escolheu as coisas vis deste mundo, e as desprezíveis, e as que não são, para aniquilar as que são;
Para que nenhuma carne se glorie perante ele."
1 Coríntios 1:27-29

Referências:

José Carlos Macoratti