¿Qué es el Framework Blazor? (Tutorial para desarrolladores)

¿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 de la aplicación que inicia el servidor y donde configuras los servicios y middleware de la aplicación.
• 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 Contador 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++;
    }
}

Una petición a /counter en el navegador, como especifica la directiva @page al inicio, hace que el componente Contador renderice su contenido.

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

• Se ejecuta el evento onclick.
• Se llama al método IncrementCount.
• Se incrementa el currentCount.
• El componente se renderiza para mostrar el conteo actualizado.

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

Abre el archivo Index.razor en Visual Studio. El archivo Index.razor ya existe porque fue creado cuando creaste el proyecto. Se encuentra en la carpeta Pages dentro del directorio BlazorApp que fue creado antes.

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 agrega 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);
    }
}

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

$vbLabelText   $csharpLabel

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.