Componentes Razor : Cómo funciona para los desarrolladores

El desarrollo web ha avanzado mucho a lo largo de los años y, con la llegada de los modernos marcos de trabajo y bibliotecas, los desarrolladores tienen acceso a potentes herramientas para crear páginas web dinámicas e interactivas. Una de estas tecnologías que ha ganado gran popularidad en los últimos años es Razor Components, que forma parte del marco Blazor en ASP.NET Core. Razor Components permite a los desarrolladores crear aplicaciones web enriquecidas del lado del cliente utilizando C# y HTML, sin tener que escribir JavaScript. En este artículo, veremos Razor Components y cómo se pueden utilizar para crear páginas web modulares, reutilizables y dinámicas.

Qué son los componentes de la maquinilla de afeitar

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

Los componentes Razor utilizan un lenguaje de marcado denominado 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. Razor Components es similar a otros frameworks de interfaz de usuario 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, en función del modelo de alojamiento(WebAssembly o SignalR).

Ventajas de los componentes Razor

Razor Components ofrece varias ventajas a los desarrolladores web, entre ellas:

Reutilización

Los Razor Components son componentes autónomos que pueden reutilizarse fácilmente en múltiples lugares dentro de una aplicación web o en diferentes proyectos. Esto favorece la reutilización del código y reduce su duplicación, lo que se traduce en aplicaciones web más fáciles de mantener y escalables.

Modularidad

Razor Components sigue una arquitectura basada en componentes, en la que la interfaz de usuario se divide en componentes más pequeños que pueden componerse para crear páginas web complejas. Esto fomenta la modularidad y permite a los desarrolladores encapsular la interfaz de usuario y la lógica en componentes individuales, lo que facilita la gestión y el mantenimiento del código base.

Integración perfecta con C#

Dado que los componentes Razor están escritos en C#, los desarrolladores pueden aprovechar sus conocimientos de C# para crear aplicaciones web. Esto elimina la necesidad de aprender y escribir JavaScript, lo que puede ser una ventaja significativa para los desarrolladores que ya están familiarizados con C#.

Ejecución en el servidor y en el cliente

Los Razor Components pueden ejecutarse en el servidor o en el cliente, dependiendo del modelo de alojamiento. Esto ofrece a los desarrolladores flexibilidad a la hora de elegir el modelo de ejecución más adecuado para su aplicación, en función de factores como el rendimiento, la seguridad y la experiencia del usuario.

Comunicación en tiempo real

Razor Components puede utilizar SignalR, una librería de comunicación en tiempo real, para establecer una comunicación bidireccional entre el cliente y el servidor. Esto permite actualizaciones y notificaciones en tiempo real en aplicaciones web, proporcionando una experiencia de usuario receptiva e interactiva.

Extensibilidad

Razor Components es altamente extensible, lo que permite a los desarrolladores crear sus propios componentes, bibliotecas y plantillas personalizados. Esto permite a los desarrolladores crear soluciones a medida que satisfagan los requisitos específicos de sus aplicaciones web.

Introducción al componente Razor

Para empezar a utilizar Razor Components, necesitará tener instalado .NET Core 3.0 o posterior en su sistema. Cree un nuevo proyecto ASP.NET Core utilizando la plantilla Blazor en Visual Studio o la CLI de .NET Core.

    dotnet new razorcomponent

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

page "/counter" Counter Counter < role="status"> Current count: currentCount Click ReadOnly Property code() As [me]
		private Integer currentCount = 0
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'		private void IncrementCount()
'		{
'		currentCount++;
'	}
End Property

En este ejemplo, tenemos un componente Razor llamado "Contador" con un botón que incrementa la variable currentCount al ser pulsado. El bloque @code se utiliza para definir el código C# del componente.

Crear un componente Razor personalizado

En el proyecto, cree una nueva carpeta llamada "Componentes" para almacenar sus Componentes Razor.

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

Abra el archivo Razor Component y defina su componente utilizando la sintaxis Razor. La sintaxis Razor permite combinar código C# y HTML en un único archivo, lo que facilita la creación de páginas web dinámicas. Por ejemplo, puede definir un Componente Razor simple como este:

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

Hello, World(Not This is a) ReadOnly Property Component_code() As Razor Implements Component.code
	' C# code for the component
End Property

Ahora puede utilizar su Componente Razor en otras partes de su aplicación web incluyéndolo en su marcado HTML utilizando el nombre de etiqueta del componente. Por ejemplo, puede utilizar la etiqueta en su página principal de Razor de la siguiente manera:

También puede pasar datos a su Componente Razor utilizando parámetros de componente. Los parámetros de los componentes permiten pasar datos de un componente padre a un componente hijo, permitiendo la comunicación entre componentes. Por ejemplo, puede definir un parámetro en su Componente Razor de la siguiente manera:

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

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

<Parameter>
Public Property Message() As String

Y a continuación, utilice el parámetro de componente en su clase Razor Component de la siguiente manera:

    @Message

    @Message

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@Message

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

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

Creación de componentes Razor reutilizables

Una de las ventajas de Razor Components es la posibilidad de crear componentes de interfaz de usuario reutilizables en varias páginas o aplicaciones. Para crear un componente reutilizable, puede crear un nuevo archivo ".razor" en la carpeta "Shared" de su proyecto.

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

Podemos definir el componente maquinilla de afeitar así:

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

typeparam Function foreach(var book ByVal Books As in) As Book
			book.Title by book.Author
End Function

	code
	If True Then
		<Parameter>
		public List Books {get;set;}
	End If

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

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

Uso de IronPDF con componentes Razor

IronPDF es una biblioteca de C# que permite a los desarrolladores crear archivos PDF a partir de HTML, CSS y JavaScript. Está basado en Chromium, el navegador de código abierto de Google Chrome. Con IronPDF, los desarrolladores pueden convertir fácilmente los componentes Razor a HTML y crear archivos PDF a partir de ellos.

IronPDF destaca en la conversión.HTML a PDF, asegurando que el diseño y estilo se mantengan intactos. Esto es particularmente útil para generar PDFs a partir de contenido basado en la web, como informes, facturas y documentación. Los archivos HTML, las URLs y las cadenas 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");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

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

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

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

Instalación de IronPDF

Para utilizar IronPDF con Razor Components, primero necesitamos instalar el paquete IronPDF NuGet. Para ello, sigue estos pasos:

1. Abra su proyecto en Visual Studio.

2. Haga clic con el botón derecho en el proyecto y seleccione "Gestionar paquetes NuGet".

3. Busque "IronPDF" y seleccione la opción "Paquete IronPDF".

4. Haga clic en "Instalar" para instalar el paquete.

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

   

   Una vez instalado el paquete, puede crear un nuevo archivo PDF a partir de un archivo Razor Component utilizando la clase IronPdf.ChromePDFRenderer:

   Para crear un archivo PDF en ASP.NET Core Razor Components, puede pasar la cadena de sintaxis HTML, el archivo HTML o la URL al método IronPdf.ChromePdfRenderer. Por ejemplo, supongamos que queremos crear un archivo PDF con el incremento de un contador. Considere el siguiente código:

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

Dim Renderer = New IronPdf.ChromePdfRenderer()
			 Dim pdf As PdfDocument = Renderer.RenderHtmlAsPdf("MY PDF # " & currentCount)
			 pdf.SaveAs("myPdf" & currentCount & ".pdf")

En este ejemplo, creamos una nueva instancia del "ChromPDFRenderer". A continuación creamos una nueva instancia de la clase PDFDocument y pasamos una cadena al método RenderHtmlAsPdf. Por último, guardamos el archivo PDF resultante en el disco utilizando el método PdfDocument.SaveAs.

En este ejemplo, hemos modificado nuestro componente contador. Hemos modificado la función onClick de un botón contador que, al ser pulsado, creará un PDF que contendrá el recuento del Contador.

Conclusión

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

Razor Components y IronPDF son potentes herramientas que pueden utilizarse para crear aplicaciones web robustas y con multitud de funciones. Combinando estas tecnologías, los desarrolladores pueden crear aplicaciones web muy funcionales y visualmente atractivas.

IronPDF también puede utilizarse para convertir páginas de afeitar y URL a PDF, así como para leer, crear y manipular documentos PDF. IronPDF permite incluso un control más granular del PDF, como añadir encabezados, pies de página, números de página, firmas digitales, contraseñas yfunciones avanzadas de manipulación de PDF a documentos PDF existentes o recién generados. Su desarrollo es gratuito, pero requiereuna licencia de prueba gratuita olicencia comercial para la producción.