Razor C# (Cómo funciona para desarrolladores)

Razor es un lenguaje de marcado del lado del servidor utilizado para crear páginas web dinámicas con .NET Core y .NET Framework. Se utiliza principalmente junto con ASP.NET Core. Razor Pages es un nuevo aspecto de ASP.NET Core que proporciona una forma limpia y directa de organizar el código dentro de las aplicaciones, reduciendo el problema de la duplicación de código. Razor combina el lado del servidor mediante C# o VB (Visual Basic) con HTML para crear contenidos web.

Este tutorial le guiará en la creación de una aplicación básica utilizando Razor con C# en Visual Studio. Comencemos!

Requisitos previos

Antes de sumergirnos en el mundo de Razor, asegúrate de tener instalado lo siguiente:

1. SDK de .NET Core

2. Visual Studio

   Estos son necesarios ya que proporcionan el Razor View Engine y las plantillas de proyecto que utilizaremos para este tutorial. Además, pueden funcionar en múltiples sistemas operativos, lo que significa que puedes seguirlos sin importar si estás en Windows, Linux o macOS.

Paso 1 Crear un nuevo proyecto Razor Pages

Abra Microsoft Visual Studio y siga estos pasos:

1. Haga clic en "Archivo" > "Nuevo" > "Proyecto".

2. En la pantalla de selección de plantilla de proyecto, elija "Blazor Server App".

   

3. Nombre su proyecto "IronPDFExample" y haga clic en "Crear".

   

4. Seleccione ".NET 7.0" o posterior en los desplegables.

   

   Ahora tiene un nuevo proyecto Razor Pages.

Sintaxis y archivos Razor

Los archivos Razor utilizan la extensión de archivo .cshtml, que combina C# (de ahí el "cs) con HTML. Si estuviéramos utilizando Visual Basic, la extensión del archivo cambiaría a .vbhtml.

En el Explorador de soluciones, busque y abra el archivo de extensión .cshtml llamado "Index.cshtml". Es aquí donde verás una combinación de código HTML y código C#. Esta mezcla es posible gracias al Razor Parser.

Sintaxis de la maquinilla de afeitar

Sintaxis de la Razor es una combinación de HTML y servidor. El código del servidor es C# o VB. El código Razor se indica con el símbolo @ y se ejecuta en el servidor antes de enviar el HTML al cliente. Por lo tanto, no C#

Un ejemplo de sintaxis simple de Razor:

<p>The current time is @DateTime.Now</p>

<p>The current time is @DateTime.Now</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> The current time is @DateTime.Now</p>

En este ejemplo de código, @DateTime.Now es un código Razor. Se ejecuta en el servidor y se sustituye por la fecha y hora actuales antes de enviarse al cliente.

Razor View

El término "vista" en Razor corresponde a cualquier página web destinada a presentar información al usuario. El Razor View Engine es responsable de renderizar la página HTML para el usuario.

@page
@model IndexModel
@{
    ViewData ["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@page
@model IndexModel
@{
    ViewData ["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

page model ReadOnly Property () As IndexModel
	ViewData ("Title") = "Home page"
End Property

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div class="text-center"> <h1 class="display-4"> Welcome</h1> <p> Learn about <a href="https://docs.microsoft.com/aspnet/core"> building Web apps @with ASP.NET Core</a>.</p> </div>

Uso de Razor Markup para contenidos dinámicos

Razor Markup nos permite insertar código del lado del servidor dentro de nuestro marcado HTML. Podemos utilizar varias construcciones de código, como bloques de código, expresiones en línea y expresiones codificadas en HTML.

Expresión en línea

Una expresión en línea envía el resultado directamente al HTML utilizando el siguiente código:

<p>Hello, my name is @Model.Name</p>

<p>Hello, my name is @Model.Name</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @Model.Name</p>

Aquí, @Model.Name es una expresión en línea que devuelve el valor de la propiedad Name del modelo pasado a la vista Razor.

Bloque de códigos

Los bloques de código son segmentos de código que se ejecutan en el servidor:

@{
    var name = "IronPDF";
}
<p>Hello, my name is @name</p>

@{
    var name = "IronPDF";
}
<p>Hello, my name is @name</p>

@
If True Then
	Dim name = "IronPDF"
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @name</p>

En este ejemplo de código, el código Razor entre {} es un bloque de código.

Estructuras de control

También podemos utilizar estructuras de control como if-statements y bucles en nuestras Razor Pages:

@{
    var count = 5;
}

@if(count > 3){
    <p>The count is greater than 3.</p>
}

@{
    var count = 5;
}

@if(count > 3){
    <p>The count is greater than 3.</p>
}

@
If True Then
	Dim count = 5
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@if(count > 3)
'{
'	<p> The count is greater than 3.</p>
'}

En el ejemplo de código anterior, la sentencia if forma parte del código del lado del servidor que se ejecuta en el servidor, y su salida se inserta en la página HTML resultante.

Declaración de cambio

Las sentencias switch son un tipo de estructura de control condicional en el lenguaje de programación C#. Pueden utilizarse dentro de bloques de código.

@{
    var fileFormat = "PDF";
    var message = "";

    switch (fileFormat) 
    {
        case "PDF":
            message = "You selected PDF.";
            break;
        default:
            message = "Invalid selection.";
            break;
    }
}

<p>@message</p>

@{
    var fileFormat = "PDF";
    var message = "";

    switch (fileFormat) 
    {
        case "PDF":
            message = "You selected PDF.";
            break;
        default:
            message = "Invalid selection.";
            break;
    }
}

<p>@message</p>

@
If True Then
	Dim fileFormat = "PDF"
	Dim message = ""

	Select Case fileFormat
		Case "PDF"
			message = "You selected PDF."
		Case Else
			message = "Invalid selection."
	End Select
End If

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @message</p>

Hola Mundo en Razor

Uno de los programas más sencillos en cualquier lenguaje de programación es "Hola Mundo". En Razor, puede mostrar "Hola Mundo" con una simple expresión en línea como se muestra en el siguiente ejemplo:

<p>@("Hello World")</p>

<p>@("Hello World")</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @("Hello World")</p>

Bucles en Razor

La sintaxis Razor permite escribir bucles, como la sentencia foreach. Suponga que tiene una lista de nombres que desea mostrar en su página web. Puede conseguirlo con la sentencia foreach en sintaxis Razor.

@{
    var names = new List<string>{"John", "Doe", "Smith"};
}

@foreach(var name in names)
{
    <p>@name</p>
}

@{
    var names = new List<string>{"John", "Doe", "Smith"};
}

@foreach(var name in names)
{
    <p>@name</p>
}

@
If True Then
	Dim names = New List(Of String) From {"John", "Doe", "Smith"}
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@foreach(var name in names)
'{
'	<p> @name</p>
'}

Esta sentencia foreach recorre cada nombre de la lista y lo muestra en la página web.

Comprender los ayudantes de etiquetas

Los Tag Helpers en ASP.NET MVC permiten al código del lado del servidor crear y renderizar elementos HTML en archivos Razor. Son un poco como los ayudantes de HTML, pero tienen una sintaxis más parecida a la de HTML. Transforman elementos similares a HTML en sus vistas Razor en el marcado HTML enviado al navegador del cliente. Considere el siguiente ejemplo de código de un ayudante de etiqueta de anclaje:

<a asp-controller="Home" asp-action="Index">Home</a>

<a asp-controller="Home" asp-action="Index">Home</a>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<a asp-controller="Home" asp-action="Index"> Home</a>

Gestión de la interacción con el usuario

Las Razor Pages utilizan métodos handler para gestionar las interacciones de los usuarios. Por ejemplo, para manejar el envío de formularios, podemos crear un método llamado OnPostAsync en el correspondiente fichero Page Model de nuestra Razor Page.

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    //  Realizar alguna operación aquí

    return RedirectToPage("./Index");
}

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    //  Realizar alguna operación aquí

    return RedirectToPage("./Index");
}

Public Async Function OnPostAsync() As Task(Of IActionResult)
	If Not ModelState.IsValid Then
		Return Page()
	End If

	'  Realizar alguna operación aquí

	Return RedirectToPage("./Index")
End Function

Comentarios en Razors

Razor también admite comentarios al estilo de C#. Recuerde que los comentarios de Razor son del lado del servidor, es decir, no se envían al navegador. Su aspecto es el siguiente

@* This is a Razor comment *@

@* This is a Razor comment *@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a Razor comment *@

Y este es un comentario de varias líneas:

@*
    This is a multi-line Razor comment.
    It's useful when you have a lot to say.
*@

@*
    This is a multi-line Razor comment.
    It's useful when you have a lot to say.
*@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a multi-line Razor comment.It's useful @when you have a lot @to say. *@

Las vistas y páginas Razor pueden incluir comentarios HTML. Estos comentarios son visibles en la salida HTML enviada al navegador.

<!-- This is an HTML comment -->

<!-- This is an HTML comment -->

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<!-- This is an HTML comment -- >

Pasar modelos a una página Razor

Razor permite pasar modelos a la página desde el servidor. La directiva @model se utiliza para especificar el tipo de objeto que se pasa. Se puede acceder a esta propiedad del modelo en la página Razor como se muestra en el siguiente ejemplo:

@page
@model ExampleModel

<h2>@Model.Title</h2>
<p>@Model.Description</p>

@page
@model ExampleModel

<h2>@Model.Title</h2>
<p>@Model.Description</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@page @model ExampleModel <h2> @Model.Title</h2> <p> @Model.Description</p>

Generación de PDF con IronPDF en Razor

IronPDF es una popular biblioteca que permite a los desarrolladores generar PDF a partir de HTML imágenes e incluso páginas web existentes en .NET. Es una herramienta excelente para crear informes, facturas y cualquier otro documento que requiera un formato de impresión estándar. IronPDF funciona perfectamente en el marco de ASP.NET MVC y ASP.NET Razor Pages.

Instalación

En primer lugar, debe instalar el paquete IronPDF. Puede hacerlo desde la consola del gestor de paquetes NuGet en Visual Studio. Ejecute el siguiente comando:

:PackageInstall

Crear un PDF sencillo

Ahora, vamos a crear un simple PDF a partir de código HTML dentro de su página Razor. En primer lugar, vamos a importar el espacio de nombres IronPDF en la parte superior de su página Razor.

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

A continuación, puede utilizar IronPDF para crear un PDF. Digamos que tenemos un botón en nuestra página Razor que creará un simple PDF cuando se haga clic en él.

En el manejador correspondiente de nuestro archivo Page Model, podemos añadir el siguiente código:

@page "/pdf"
@using IronPdf;
@inject IJSRuntime JS

<PageTitle>Create PDF</PageTitle>

<h1>Create PDF</h1>

<div class="form-outline">
    <button class="btn btn-primary mt-3" @onclick="CreatePDF">Create PDF</button>
</div>

@code {
    private string htmlString { get; set; }

    private async Task CreatePDF()
    {

        var Renderer = new IronPdf.ChromePdfRenderer();
        Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2;

        var doc = Renderer.RenderUrlAsPdf("https://ironpdf.com/");

        using var Content = new DotNetStreamReference(stream: doc.Stream);

        await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content);
    }
}

@page "/pdf"
@using IronPdf;
@inject IJSRuntime JS

<PageTitle>Create PDF</PageTitle>

<h1>Create PDF</h1>

<div class="form-outline">
    <button class="btn btn-primary mt-3" @onclick="CreatePDF">Create PDF</button>
</div>

@code {
    private string htmlString { get; set; }

    private async Task CreatePDF()
    {

        var Renderer = new IronPdf.ChromePdfRenderer();
        Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2;

        var doc = Renderer.RenderUrlAsPdf("https://ironpdf.com/");

        using var Content = new DotNetStreamReference(stream: doc.Stream);

        await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content);
    }
}

Private page "/pdf" [using] IronPdf
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: inject IJSRuntime JS <PageTitle> Create PDF</PageTitle> <h1> Create PDF</h1> <div class="form-outline"> <button class="btn btn-primary mt-3" onclick="CreatePDF"> Create PDF</button> </div> @code
"btn btn-primary mt-3" onclick="CreatePDF"> Create PDF</button> </div> code
Private Friend IJSRuntime As inject
	Private Property htmlString() As String

	Private Async Function CreatePDF() As Task

		Dim Renderer = New IronPdf.ChromePdfRenderer()
		Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2

		Dim doc = Renderer.RenderUrlAsPdf("https://ironpdf.com/")

		Dim Content = New DotNetStreamReference(stream:= doc.Stream)

		Await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content)
	End Function
End Class

SALIDA

Conclusión

Ha aprendido con éxito los fundamentos de Razor C# y ha descubierto cómo integrar IronPDF para generar archivos PDF dentro de su aplicación. Empezaste creando un nuevo proyecto en Visual Studio y luego aprendiste a utilizar la sintaxis de Razor para crear páginas web dinámicas. También ha explorado cómo IronPDF puede utilizarse para generar PDF a partir de código HTML e incluso vistas Razor completas.

Ahora, a medida que siga creando aplicaciones más avanzadas, podrá aprovechar las potentes funciones que ofrece IronPDF. Puede probar IronPDF para gratis. Si le parece valioso, puede adquirir una licencia a partir de $749.