Pruebas en un entorno real
Pruebe en producción sin marcas de agua.
Funciona donde lo necesites.
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 permite crear interfaces de usuario web interactivas en 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, se puede reutilizar el código y las bibliotecas de las partes del lado del servidor de la 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).
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.
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.
Para crear nuestra primera aplicación Blazor, tenemos que crear un nuevo proyecto de Visual Studio.
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.
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.
Hay tres componentes Blazor creados automáticamente en la plantilla.
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.
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:
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.
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.
En primer lugar, necesitamos instalar una biblioteca de terceros para generar archivos PDF. La biblioteca que utilizaremos esIronPDF - Generación de PDF para .NET. 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 documentoDocumentación de IronPDF Blazor.
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 deProductos Iron Suite de Iron Software. Puede ahorrar dinero y adquirir cinco productos por el coste de comprar dos de ellos siadquirir la Iron Suite completa.
Blazor es un marco de trabajo para crear interfaces de usuario web interactivas del lado del cliente con.NET Framework de Microsoft.
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:
9 productos API .NET para sus documentos de oficina