Componentes Razor : Cómo funciona para desarrolladores)

Qué son los componentes Razor

Razor Components son un marco de UI en ASP.NET Core que permite a los desarrolladores construir páginas web usando una combinación de C# y HTML, con la capacidad de escribir lógica del lado del servidor que puede ser ejecutada en el lado del cliente. Los Razor Components son parte del marco Blazor, que es un marco de UI web del lado del cliente que ejecuta código C# en el navegador usando WebAssembly (Wasm) o SignalR. Los Razor Components proporcionan una arquitectura basada en componentes para construir aplicaciones web modernas, donde la interfaz de usuario se descompone en componentes más pequeños y autónomos que pueden componerse juntos para crear una página web completa.

Los Razor Components usan un lenguaje de marcado llamado sintaxis Razor, que es una combinación de C# y HTML que permite una integración perfecta del código del lado del servidor y del lado del cliente. Los Razor Components son similares a otros marcos de UI basados en componentes, como React, Angular y Vue, pero con la diferencia clave de que están escritos en C# y se ejecutan en el lado del servidor o del cliente, dependiendo del modelo de hospedaje (WebAssembly o SignalR).

Beneficios de Razor Components

Los Razor Components ofrecen varios beneficios para los desarrolladores web, incluyendo:

Cómo empezar con Razor Component

Para empezar con Razor Components, necesitarás tener .NET Core 3.0 o posterior instalado en tu sistema. Crea un nuevo proyecto ASP.NET Core usando la plantilla Blazor en Visual Studio o el CLI de .NET Core.

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

En este ejemplo, tenemos un componente Razor llamado "Counter" con un botón que incrementa la variable currentCount cuando se hace clic. El bloque @code se usa para definir el código C# para el componente.

Crear un componente Razor personalizado

En el proyecto, crea una nueva carpeta llamada "Components" para almacenar tus Razor Components.

Dentro de la carpeta "Components", añade un nuevo archivo de Razor Component con la extensión ".razor". Este archivo contendrá el código C# y HTML para tu componente.

Abre el archivo de Razor Component y define tu componente usando la sintaxis Razor. La sintaxis Razor te permite combinar código C# y HTML en un solo archivo, facilitando la creación de páginas web dinámicas. Por ejemplo, puedes definir un componente Razor simple así:

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

Ahora puedes usar tu Razor Component en otras partes de tu aplicación web incluyéndolo en tu marcado HTML utilizando el nombre del tag del componente. Por ejemplo, puedes usar el componente en tu página principal Razor así:

<MyComponent />

También puedes pasar datos a tu Razor Component utilizando parámetros de componente. Los parámetros de componente te permiten pasar datos de un componente padre a un componente hijo, habilitando la comunicación entre componentes. Por ejemplo, puedes definir un parámetro en tu Razor Component así:

@code {
    [Parameter]
    public string Message { get; set; }
}

Y luego usar el parámetro de componente en tu clase Razor Component así:

<p>@Message</p>

Y pasar datos al componente desde un componente padre así:

<MyComponent Message="Hello from parent component!" />

Los Razor Components también pueden contener lógica del lado del servidor que puede ser ejecutada en el lado del cliente. Por ejemplo, puedes escribir lógica de procesamiento, hacer solicitudes HTTP, manejar eventos de usuario y realizar otras operaciones del lado del servidor directamente desde tus Razor Components usando código C#. Esto te permite crear páginas web dinámicas e interactivas sin escribir ningún código JavaScript.

Creación de componentes Razor reutilizables

Uno de los beneficios de los Razor Components es la capacidad de crear componentes de UI reutilizables que pueden usarse en varias páginas o aplicaciones. Para crear un componente reutilizable, puedes crear un nuevo archivo ".razor" en la carpeta "Shared" de tu proyecto.

Por ejemplo, digamos que queremos crear un componente que muestre una lista de libros. Podemos crear un nuevo archivo BookList.razor en la carpeta "Shared" tal como:

Podemos definir el componente razor así:

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

En este ejemplo, tenemos un componente llamado BookList que toma una lista de objetos "Book" como un parámetro razor. El bucle @foreach se usa para iterar a través de la lista y mostrar cada título y autor de libro.

En la siguiente sección, exploraremos cómo usar IronPDF con Razor Components para crear archivos PDF desde aplicaciones web.

Uso de IronPDF con Razor Components

IronPDF es una biblioteca de C# que permite a los desarrolladores crear archivos PDF desde HTML, CSS y JavaScript. Está construida sobre Chromium, el navegador de código abierto que da potencia a Google Chrome. Con IronPDF, los desarrolladores pueden fácilmente convertir Razor Components a HTML y crear archivos PDF de ellos.

IronPDF destaca en la conversión de HTML a PDF, garantizando que el diseño y el estilo permanezcan intactos. Esto es particularmente útil para generar PDFs desde contenido basado en la web, como informes, facturas y documentación. Los archivos HTML, las URL y las cadenas de HTML se pueden convertir fácilmente en archivos PDF.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Instalación de IronPDF

Para usar IronPDF con Razor Components, primero necesitamos instalar el paquete NuGet de IronPDF. Para hacer esto, sigue estos pasos:

1. Abra su proyecto en Visual Studio.
2. Haz clic derecho en el proyecto y selecciona "Gestionar paquetes NuGet".
3. Busca "IronPDF" y selecciona el "paquete IronPDF".
4. Haz clic en "Instalar" para instalar el paquete.

Después de instalar el paquete NuGet de IronPDF, podemos usarlo en nuestra aplicación de Razor Components.

Una vez que el paquete esté instalado, puedes crear un nuevo archivo PDF desde un Razor Component usando la clase IronPdf.ChromePdfRenderer.

Para crear un archivo PDF en ASP.NET Core Razor Components, puedes pasar la cadena de sintaxis HTML, archivo HTML o URL al método IronPdf.ChromePdfRenderer. Por ejemplo, digamos que queremos crear un archivo PDF con el incremento de un contador.

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

En este ejemplo, creamos una nueva instancia del ChromePdfRenderer. Luego creamos una nueva instancia de la clase PdfDocument y pasamos una cadena al método RenderHtmlAsPdf. Finalmente, guardamos el archivo PDF resultante en el disco usando el método PdfDocument.SaveAs.

En este ejemplo, hemos modificado nuestro componente de contador. Hemos modificado la función onClick de un botón de contador que, al hacer clic, creará un PDF que contiene el conteo del Counter.

Conclusión

En este artículo, hemos explorado cómo usar Razor Components con IronPDF para crear archivos PDF desde aplicaciones web. Hemos cubierto los conceptos básicos de los Razor Components, cómo instalar y usar IronPDF, y proporcionado ejemplos de código para ayudarte a comenzar.

Los Razor Components y IronPDF son herramientas poderosas que pueden usarse para crear aplicaciones web robustas y ricas en funciones. Al combinar estas tecnologías, los desarrolladores pueden crear aplicaciones web que son altamente funcionales y visualmente atractivas.

IronPDF también puede usarse para convertir páginas razor y URLs a PDFs, así como para leer, crear y manipular documentos PDF. IronPDF incluso permite un control más granular del PDF, como agregar encabezados, pies de página, números de página, firmas digitales, contraseñas y características avanzadas de manipulación de PDF a documentos PDF existentes o recién generados. Es gratuito para el desarrollo, pero requiere una licencia de prueba gratuita o licencia comercial para producción.