Blazor es un Framework ASP.NET lanzado por Microsoft en 2018. El lanzamiento del framework Blazor fue ventajoso ya que permitió a los desarrolladores crear aplicaciones web de una sola página usando C# en lugar de JavaScript.

Blazor te permite construir interfaces web interactivas usando C# que se ejecutan en el navegador con WebAssembly (abreviado como Wasm). Las aplicaciones de Blazor están compuestas de componentes UI web reusables implementados usando C#, HTML y CSS. Tanto el código del cliente como del servidor está escrito en C#, permitiendo compartir código y bibliotecas.

Blazor puede ejecutar tu código C# del lado del cliente directamente en el navegador usando WebAssembly. Como es .NET ejecutándose en WebAssembly, puedes reutilizar el código y las bibliotecas de las partes del servidor de tu aplicación.

Alternativamente, Blazor puede ejecutar tu lógica del cliente en el servidor. Los eventos de UI del cliente se envían al servidor con SignalR, un framework de mensajería en tiempo real. Una vez que la ejecución se completa, los cambios necesarios en la interfaz de usuario se envían al cliente y se integran en el Modelo de Objeto del Documento (DOM).

¿Qué es WebAssembly?

Blazor WebAssembly es un framework para aplicaciones de una sola página (SPA) destinado a construir aplicaciones web interactivas del lado del cliente con .NET. Blazor WebAssembly utiliza estándares web abiertos que permiten el desarrollo sin complementos o recompilación del código en otros lenguajes. Blazor WebAssembly funciona en todos los navegadores web modernos.

Ejecutar código .NET dentro de los navegadores web es posible gracias a WebAssembly. WebAssembly es un formato de bytecode compacto optimizado para descargas rápidas y máxima velocidad de ejecución. WebAssembly es un estándar web abierto y es compatible con los navegadores web sin complementos.

El código de WebAssembly puede acceder a toda la funcionalidad del navegador a través de JavaScript. Conocido como Interoperabilidad de JavaScript, a menudo se abrevia como interop de JavaScript o JS interop. El código .NET ejecutado a través de WebAssembly se ejecuta en la sandbox de JavaScript del navegador con las protecciones que la sandbox proporciona contra acciones maliciosas en la máquina del cliente.

Construir aplicaciones nativas

Podemos construir aplicaciones cliente nativas usando los componentes de interfaz de usuario web de Blazor existentes con Blazor Hybrid. Los componentes de Blazor pueden compartirse entre dispositivos móviles, de escritorio y web mientras se aprovecha el acceso total a las capacidades nativas del cliente. Podemos usar Blazor Hybrid para construir aplicaciones multiplataforma con .NET Multi-platform App UI (MAUI), o para modernizar aplicaciones existentes de Windows Presentation Foundation (WPF) y Windows Forms.

En una aplicación Blazor Hybrid, los componentes de Razor se ejecutan de forma nativa en el dispositivo. Los componentes se renderizan en un control de Vista Web incrustado a través de un canal de interoperabilidad local. Los componentes no se ejecutan en el navegador, y WebAssembly no está involucrado. Los componentes de Razor cargan y ejecutan código rápidamente, y los componentes tienen acceso completo a las capacidades nativas del dispositivo a través de la plataforma .NET.

Creemos una aplicación de demostración para entender mejor cómo funcionan las aplicaciones Blazor.

Crear una aplicación de servidor Blazor

Para crear nuestra primera app de Blazor, necesitamos crear un nuevo proyecto en Visual Studio.

• Abre Visual Studio.
• Haz clic en el botón Crear Nuevo Proyecto.
• Selecciona plantilla de aplicación servidor Blazor.
• Haz clic en el botón Siguiente.
• Nombra tu aplicación.
• Haz clic en el botón Siguiente.
• Selecciona un framework de destino.
• Haz clic en el botón Crear Proyecto.

Se creará un Nuevo Proyecto como se muestra a continuación.

Se crearon varios archivos para darte una sencilla aplicación Blazor lista para ejecutarse.

• Program.cs es el punto de entrada para la aplicación que inicia el servidor y donde configuras los servicios de la aplicación y el middleware.
• App.razor es el componente raíz de la aplicación.
• El directorio Pages contiene algunas páginas web de ejemplo para la aplicación.
• El archivo launchSettings.json dentro del directorio Properties define diferentes configuraciones de perfil para el entorno de desarrollo local. Un número de puerto se asigna automáticamente al crear el proyecto y se guarda en este archivo.

Ejecuta esta aplicación de plantilla.

Ejecución de la aplicación Blazor

Hay tres componentes de Blazor creados automáticamente en la plantilla.

Componente principal

Haz clic en Contador en el menú lateral. Verás que al hacer clic en el botón el contador se incrementa sin cambiar o recargar la página. Incrementar dinámicamente el contador en una aplicación web normalmente requiere JavaScript, pero con Blazor, podemos lograrlo usando C#. Esta es la razón por la cual a los desarrolladores ASP.NET les gusta tanto Blazor. Ayuda a los desarrolladores .NET a construir aplicaciones web rápida y fácilmente.

Componente de contador

Podemos ver el código del componente Counter en el archivo Counter.razor ubicado dentro de la carpeta Pages de nuestra solución.

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

Una solicitud para /counter en el navegador, según lo especificado por la directiva @page en la parte superior, hace que el componente Counter renderice su contenido.

Cada vez que se selecciona el botón Click me:

• El evento onclick es ejecutado.
• El método IncrementCount es llamado.
• El currentCount es incrementado.
• El componente se renderiza para mostrar el conteo actualizado.

Cada uno de los archivos .razor define un componente de UI que puede ser reutilizado.

Abre el archivo Index.razor en Visual Studio. El archivo Index.razor ya existe porque se creó cuando creaste el proyecto. Está ubicado en la carpeta Pages dentro del directorio BlazorApp que fue creado anteriormente.

Componente Fetch

Hay otro componente llamado "Componente Fetch". Este componente también inyecta un servicio usado para el desarrollo del lado servidor. Sustituyamos este código para generar un PDF desde una URL para entender mejor el poder del desarrollo web con Blazor.

Generar PDF a partir de URL

Primero que todo, necesitamos instalar una biblioteca de terceros para generar archivos PDF. La biblioteca que usaremos es IronPDF - PDF Generation for .NET. Es fácil de usar, incluye muchas características, y es gratuito para desarrollo. Puedes aprender más sobre el uso de IronPDF en tu aplicación Blazor leyendo la Documentación de IronPDF para Blazor.

Instalar el paquete NuGet de IronPDF

También podemos instalar el paquete NuGet de IronPDF en la aplicación Blazor WebAssembly de forma similar a una aplicación ASP.NET Core normal.

Abre la Consola de Administración de Paquetes NuGet y escribe el siguiente comando:

Install-Package IronPdf

La biblioteca será instalada como se muestra abajo.

Elimina todo el código existente del archivo FetchData.razor y añade el siguiente ejemplo de código:

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="GeneratePDF">Generate PDF</button>

@code {
    private string URL { get; set; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="GeneratePDF">Generate PDF</button>

@code {
    private string URL { get; set; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

Arriba está el código Blazor lado cliente para generar archivos PDF. Define un botón y una caja de entrada. El campo de entrada está vinculado a la variable URL.

Ahora, escribamos el código lado servidor para nuestra aplicación.

Abre el archivo WeatherForecastService.cs y reemplaza todo el código existente con el siguiente fragmento de código:

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

Ejecutemos nuestra aplicación para ver el resultado.

Pega una URL en la caja de entrada y haz clic en Generar PDF. El archivo PDF será generado y el archivo puede verse en la carpeta de la aplicación.

Abre el archivo PDF como se indica a continuación.

Hemos generado un PDF desde la URL con solo tres líneas de código. Este es el poder de IronPDF.

IronPDF es proporcionado por Iron Software y es parte de los Productos Iron Suite de Iron Software. Puedes ahorrar dinero y adquirir cinco productos por el costo de comprar dos de ellos adquiriendo la suite completa Iron Suite.

Resumen

Blazor es un framework para construir interfaces de usuario web interactivas del lado del cliente con el Framework .NET de Microsoft.

• Crea interfaces interactivas ricas usando C# en lugar de JavaScript.
• Comparte la lógica de la aplicación lado servidor y cliente escrita en .NET.
• Renderiza la UI como HTML y CSS para un amplio soporte de navegadores, incluyendo navegadores móviles.
• Integra con plataformas de hospedaje modernas, como Docker.
• Construye aplicaciones de escritorio y móviles híbridas con .NET y Blazor.

Usar .NET para el desarrollo web del lado del cliente ofrece las siguientes ventajas:

• Escribe código en C# en lugar de JavaScript.
• Aprovecha el ecosistema existente de bibliotecas .NET.
• Comparte la lógica de la app entre servidor y cliente.
• Benefíciate del rendimiento, fiabilidad y seguridad de .NET.
• Mantente productivo en Windows, Linux o macOS con un entorno de desarrollo, como Visual Studio o Visual Studio Code.
• Construye sobre un conjunto común de lenguajes, frameworks y herramientas que son estables, ricos en funciones y fáciles de usar.