Qué es Blazor Framework (Tutorial de cómo funciona para desarrolladores)

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

Blazor le permite crear interfaces de usuario web interactivas utilizando C# que se ejecutan en el navegador con WebAssembly. (abreviado como Wasm). Las aplicaciones Blazor se componen de componentes de interfaz de usuario web reutilizables implementados mediante C#, HTML y CSS. Tanto el código del cliente como el del servidor están escritos en C#, lo que permite compartir código y bibliotecas.

Blazor puede ejecutar su código C# del lado del cliente directamente en el navegador utilizando WebAssembly. Al tratarse de .NET ejecutado en WebAssembly, puede reutilizar el código y las bibliotecas de las partes del lado del servidor de su aplicación.

Alternativamente, Blazor puede ejecutar su lógica de cliente en el servidor. Los eventos de la interfaz de usuario del cliente se envían al servidor mediante SignalR, un marco de mensajería en tiempo real. Una vez finalizada la ejecución, los cambios necesarios en la interfaz de usuario se envían al cliente y se integran en el modelo de objetos del documento. (DOM).

¿Qué es WebAssembly?

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

WebAssembly permite ejecutar código .NET en navegadores web. WebAssembly es un formato de código de bytes compacto optimizado para una descarga rápida y una velocidad de ejecución máxima. WebAssembly es un estándar web abierto y es compatible con los navegadores web sin necesidad de plugins.

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

Crear aplicaciones nativas

Podemos crear aplicaciones cliente nativas utilizando componentes de interfaz de usuario web Blazor existentes con Blazor Hybrid. Los componentes de Blazor pueden compartirse a través de móviles, ordenadores de sobremesa y la web, aprovechando al mismo tiempo el acceso completo a las funciones nativas del cliente. Podemos utilizar Blazor Hybrid para crear aplicaciones multiplataforma con .NET Multi-platform App UI (MAUI)o para modernizar Windows Presentation Foundation (WPF) y Windows Forms.

En una aplicación Blazor Hybrid, los componentes Razor se ejecutan de forma nativa en el dispositivo. Los componentes se renderizan en un control Web View 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 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.

Vamos a 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 nuestra primera aplicación Blazor, tenemos que crear un nuevo proyecto de Visual Studio.

• Abre Visual Studio.
• Haga clic en el botón Crear nuevo proyecto.
• Seleccione Blazor Server App Template.
• Pulse el botón Siguiente.
• Ponga un nombre a su solicitud.
• Pulse el botón Siguiente.
• Seleccione un Marco de destino.

• Haga clic en el botón Crear proyecto.

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

  

  Varios archivos fueron creados para darle una simple aplicación Blazor que está listo para funcionar.

• Program.cs es el punto de entrada de 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 Páginas 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. Se asigna automáticamente un número de puerto al crear el proyecto y se guarda en este archivo.

  Ejecute esta aplicación de plantilla.

Ejecutar la aplicación Blazor

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

Componente doméstico

Haga clic en Contador en el menú lateral. Verá que al pulsar el botón se incrementa el contador sin cambiar ni recargar la página. Incrementar el contador dinámicamente en una aplicación web normalmente requiere JavaScript, pero con Blazor, podemos lograrlo usando C#. Esta es la razón por la que a los desarrolladores de ASP.NET les gusta tanto Blazor. Ayuda a los desarrolladores .NET a crear aplicaciones web de forma rápida y sencilla.

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

    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;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Friend page "/counter" (Of h1) Counter</h1> (Of p) Current count
	Inherits currentCount</p> <button class="btn btn-primary" onclick="IncrementCount"> Click [me]</button> code

	Private currentCount As Integer = 0

	Private Sub IncrementCount()
		currentCount += 1
	End Sub
End Class

Una petición de /counter en el navegador, como se especifica en la directiva @page de la parte superior, hace que el componente Counter muestre su contenido.

Cada vez que se selecciona el botón Hazme clic:

• Se ejecuta el evento onclick.
• Se llama al método IncrementarCuenta.
• La cuenta actual se incrementa.

• El componente se renderiza para mostrar el recuento actualizado.

  Cada uno de los archivos .razor define un componente de interfaz de usuario que puede reutilizarse.

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

Componente Fetch

Hay otro componente llamado "Componente Fetch". Este componente también inyecta un servicio utilizado para el desarrollo backend del lado del servidor. Reemplacemos este código para generar un PDF a partir de una URL para comprender mejor la potencia del desarrollo web Blazor.

Generar PDF a partir de URL

En primer lugar, necesitamos instalar una biblioteca de terceros para generar archivos PDF. La biblioteca que utilizaremos es IronPDF. Es fácil de usar, incluye muchas funciones y es gratuito para el desarrollo. Puede obtener más información sobre el uso de IronPDF en su aplicación Blazor leyendo el documento Tutorial de Blazor.

Instalar el paquete NuGet IronPDF

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

Abra NuGet Package Manager Console, y escriba el siguiente comando:

Install-Package IronPdf

La biblioteca se instalará como se muestra a continuación.

Elimine todo el código existente del archivo FetchData.razor y añada 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; }
    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; }
    protected async Task generatePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

'INSTANT VB TODO TASK: The following line could not be converted:
page "/fetchdata" [using] myBlazorAPP.Data inject WeatherForecastService ForecastService (Of h1) Generate PDF FROM URL</h1> (Of 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
If True Then

	private String URL {get;set;}
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	protected async Task generatePDF()
'	{
'		await ForecastService.GeneratePDFfromURL(URL);
'	}
End If

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

Ahora, vamos a escribir el código del lado del servidor para nuestra aplicación.

Abra el archivo WeatherForecastService.cs y sustituya todo el código existente por el siguiente fragmento de código:

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

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDOc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDOc.SaveAs(@"myFile.pdf");
        }
    }
}

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

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDOc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDOc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Linq
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		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

Vamos a ejecutar nuestra aplicación para ver la salida.

Pegue una URL en el cuadro de entrada y haga clic en Generar PDF. Se generará el archivo PDF, que podrá verse en la carpeta de la aplicación.

Abra el archivo PDF como se muestra a continuación.

Hemos generado un PDF a partir de la URL con sólo tres líneas de código. Este es el poder de IronPDF.

IronPDF es proporcionado por Iron Software y forma parte de Iron Suite. Puede ahorrar dinero y adquirir cinco productos por el coste de comprar dos de ellos si compras la Iron Suite completa.

Resumen

Blazor es un framework para crear interfaces de usuario web interactivas del lado del cliente con .NET

• Cree interfaces de usuario interactivas utilizando C# en lugar de JavaScript.
• Comparta la lógica de aplicaciones del lado del servidor y del lado del cliente escritas en .NET.
• Renderiza la interfaz de usuario como HTML y CSS para una amplia compatibilidad con los navegadores, incluidos los móviles.
• Integrarse con plataformas de alojamiento modernas, como Docker.

• Cree aplicaciones híbridas de escritorio y móviles con .NET y Blazor.

  El uso de .NET para el desarrollo web del lado del cliente ofrece las siguientes ventajas:

• Escribir código en C# en lugar de JavaScript.
• Aproveche el ecosistema existente de bibliotecas .NET.
• Comparta la lógica de la aplicación entre el servidor y el cliente.
• Benefíciese del rendimiento, la fiabilidad y la seguridad de .NET.
• Manténgase productivo en Windows, Linux o macOS con un entorno de desarrollo, como Visual Studio o Visual Studio Code.
• Basarse en un conjunto común de lenguajes, marcos de trabajo y herramientas estables, ricas en funciones y fáciles de usar.