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

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

Crear una aplicación de servidor Blazor

Para crear la primera app de Blazor, es necesario crear un nuevo proyecto en Visual Studio.

• Abra Visual Studio.
• Haga clic en el botón Crear Nuevo Proyecto.
• Seleccione la plantilla de aplicación servidor Blazor.
• Haga clic en el botón Siguiente.
• Asigne un nombre a la aplicación.
• Haga clic en el botón Siguiente.
• Seleccione un framework de destino.
• Haga 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 se configuran 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

Haga clic en Contador en el menú lateral. Al hacer clic en el botón, el contador se incrementa sin cambiar ni recargar la página. Incrementar dinámicamente el contador en una aplicación web normalmente requiere JavaScript, pero con Blazor es posible lograrlo usando C#. Esta es la razón por la cual los desarrolladores ASP.NET valoran tanto Blazor: ayuda a construir aplicaciones web rápida y fácilmente.

Componente de contador

El código del componente Counter se encuentra en el archivo Counter.razor ubicado dentro de la carpeta Pages de la 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 solicitud de /counter en el navegador, como se especifica en la directiva @page en la parte superior, hace que el componente Counter represente 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 de UI que se puede reutilizar.

Abra el archivo Index.razor en Visual Studio. El archivo Index.razor ya existe porque se creó cuando usted creó el proyecto. Se encuentra en la carpeta Pages dentro del directorio BlazorApp que se creó anteriormente.

Generar PDF a partir de URL

Primero, es necesario instalar una biblioteca de terceros para generar archivos PDF. La biblioteca que se utilizará es IronPDF - PDF Generation para .NET. Es fácil de usar, incluye muchas características y es gratuita para desarrollo. Puede obtener más información sobre el uso de IronPDF en aplicaciones Blazor consultando la Documentación de IronPDF para Blazor.

Instalar el paquete NuGet de IronPDF

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

Abra la Consola de Administración de Paquetes NuGet e ingrese el siguiente comando:

Install-Package IronPdf

La biblioteca será instalada como se muestra abajo.

Elimine todo el código existente del archivo FetchData.razor y agregue el siguiente código de ejemplo:

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

El código anterior corresponde al componente Blazor del lado cliente para generar archivos PDF. Define un botón y un campo de entrada vinculado a la variable URL.

A continuación, se escribe el código del lado servidor para la aplicación.

Abra el archivo WeatherForecastService.cs y reemplace todo el código existente con el siguiente fragmento:

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

Ejecute la aplicación para ver el resultado.

Pegue una URL en el campo de entrada y haga clic en Generar PDF. El archivo PDF será generado y podrá verse en la carpeta de la aplicación.

Abra 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. Es posible ahorrar dinero y adquirir cinco productos por el costo de dos 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 del lado servidor y del cliente escrita en .NET.
• Renderiza la UI como HTML y CSS para un amplio soporte de navegadores, incluyendo navegadores móviles.
• Se integra con plataformas de hospedaje modernas, como Docker.
• Permite construir 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:

• Permite escribir 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.
• Proporciona el rendimiento, fiabilidad y seguridad de .NET.
• Permite mantenerse productivo en Windows, Linux o macOS con un entorno de desarrollo como Visual Studio o Visual Studio Code.
• Permite construir sobre un conjunto común de lenguajes, frameworks y herramientas que son estables, ricos en funciones y fáciles de usar.