Razor C# (Cómo funciona para desarrolladores)

Prerequisites

Before we dive into the world of Razor, ensure you have the following installed:

1. .NET Core SDK
2. Visual Studio

These are necessary as they provide the Razor View Engine and the project templates we'll be using for this tutorial. Also, they can operate on multiple operating systems, meaning you can follow along no matter if you are on Windows, Linux, or macOS.

Step 1 Creating a New Razor Pages Project

Open Microsoft Visual Studio and follow these steps:

1. Click on "File" > "New" > "Project".

2. In the project template selection screen, choose "Blazor Server App".

   

3. Name your project "IronPDFExample" and click "Create".

   

4. Select ".NET 7.0" or later from the dropdowns.

   

You now have a new Razor Pages project.

Understanding Razor Syntax and Files

Razor files use the .cshtml file extension, combining C# (hence the 'cs') with HTML. If we were using Visual Basic, the file extension would change to .vbhtml.

In your Solution Explorer, find and open the .cshtml extension file named "Index.cshtml". It's here you'll see a combination of HTML code and C# code. This mixing is made possible by the 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>

Using Razor Markup for Dynamic Content

Razor Markup allows us to insert server-side code within our HTML markup. We can use various code constructs like code blocks, inline expressions, and HTML encoded expressions.

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

Understanding Tag Helpers

Tag Helpers in ASP.NET MVC enable server-side code to create and render HTML elements in Razor files. They're a bit like HTML helpers but have a more HTML-like syntax. They transform HTML-like elements in your Razor views into the HTML markup sent to the client's browser. Consider the following code example of an anchor Tag Helper:

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

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

Handling User Interaction

Razor Pages use handler methods to manage user interactions. For example, to handle form submission, we can create a method named OnPostAsync in our Razor Page's corresponding Page Model file.

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

Comments in Razor

Razor also supports C# style comments. Remember, Razor comments are server-side, meaning they are not sent to the browser. They look like this:

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

And this is a multi-line comment:

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

Razor views and pages can include HTML comments. These comments are visible in the HTML output sent to the browser.

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

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

Passing Models to a Razor Page

Razor allows you to pass models to the page from the server. The @model directive is used to specify the type of object being passed. This model property can be accessed in the Razor page as shown in the example below:

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

Generating PDFs with IronPDF in Razor

Discover IronPDF for .NET is a popular library that allows developers to generate PDFs from HTML, images, and even existing web pages in .NET. It is an excellent tool for creating reports, invoices, and any other document where a standard print format is required. IronPDF works perfectly within the ASP.NET MVC and ASP.NET Razor Pages framework.

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

Conclusion

You have successfully learned the basics of Razor C# and discovered how to integrate IronPDF to generate PDF files within your application. You started by creating a new project in Visual Studio and then learned how to use Razor syntax to create dynamic web pages. You also explored how IronPDF can be used to generate PDFs from HTML code and even complete Razor Views.

Now, as you continue to build more advanced applications, you can take advantage of the powerful features offered by IronPDF. You can try IronPDF for free and if you find it valuable, you can purchase a license suitable for your needs.