Razor C# (Cómo funciona para desarrolladores)

Requisitos previos

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

1. .NET Core SDK
2. Visual Studio

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

Paso 1 Creación de 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 plantillas de proyecto, elige "Blazor Server App".

   

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

   

4. Selecciona ".NET 7.0" o posterior de los desplegables.

   

Ahora tienes un nuevo proyecto de Razor Pages.

Comprensión de la sintaxis y los archivos de Razor

Los archivos Razor utilizan la extensión de archivo .cshtml, que combina C# (de ahí el 'cs') con HTML. Si estuviéramos usando 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". Aquí verás una combinación de código HTML y código C#. Esta mezcla es posible gracias al Razor Parser.

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

@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 contenido dinámico

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

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

@{
    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>

@{
    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>
'}

@{
    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>

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

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

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

@{
    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>
'}

Entender los ayudantes de etiquetas

Los Tag Helpers en ASP.NET MVC permiten que el código del lado del servidor cree y renderice elementos HTML en archivos Razor. Son un poco como los ayudantes de HTML pero tienen una sintaxis más similar al HTML. Transforman los 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 Tag Helper de anclaje:

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

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

Gestión de la interacción con el usuario

Las Razor Pages usan métodos manejadores para gestionar las interacciones del usuario. Por ejemplo, para manejar el envío de formulario, podemos crear un método llamado OnPostAsync en el archivo de modelo de página correspondiente de nuestra página Razor .

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

    // Perform some operation here

    return RedirectToPage("./Index");
}

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

    // Perform some operation here

    return RedirectToPage("./Index");
}

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

	' Perform some operation here

	Return RedirectToPage("./Index")
End Function

Comentarios en Razor

Razor también admite comentarios de estilo C#. Recuerda, los comentarios de Razor son del lado del servidor, lo que significa que no se envían al navegador. Se ven así:

@* 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.

Pasar modelos a una página Razor

Razor te 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 ejemplo a continuación:

@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

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

Install-Package IronPdf

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

@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);
    }
}

Conclusión

Ha aprendido con éxito lo básico de Razor C# y descubierto cómo integrar IronPDF para generar archivos PDF dentro de su aplicación. Comenzó creando un nuevo proyecto en Visual Studio y luego aprendió cómo usar la sintaxis Razor para crear páginas web dinámicas. También exploró cómo se puede utilizar IronPDF para generar PDFs a partir de código HTML e incluso vistas completas de Razor.

Ahora, a medida que continúa construyendo aplicaciones más avanzadas, puede aprovechar las potentes características que ofrece IronPDF. Puede probar IronPDF gratis y si lo encuentra valioso, puede comprar una licencia adecuada para sus necesidades.