Razor est un langage de balisage côté serveur utilisé pour créer des pages web dynamiques avec .NET Core et .NET Framework. Il est principalement utilisé en conjonction avec ASP.NET Core. Les Razor Pages sont un nouvel aspect d'ASP.NET Core qui fournissent un moyen propre et clair d'organiser le code au sein des applications, réduisant le problème de duplication de code. Razor combine le côté serveur utilisant C# ou VB (Visual Basic) avec HTML pour créer du contenu web.

Ce tutoriel vous guidera dans la création d'une application de base utilisant Razor avec C# dans Visual Studio. Commençons !

Prérequis

Avant de plonger dans le monde de Razor, assurez-vous d'avoir installé les éléments suivants :

1. SDK .NET Core
2. Visual Studio

Ceux-ci sont nécessaires car ils fournissent le Razor View Engine et les modèles de projet que nous utiliserons pour ce tutoriel. De plus, ils peuvent fonctionner sur plusieurs systèmes d'exploitation, ce qui signifie que vous pouvez suivre quelle que soit votre plateforme : Windows, Linux ou macOS.

Étape 1 Création d'un Nouveau Projet de Pages Razor

Ouvrez Microsoft Visual Studio et suivez ces étapes :

1. Cliquez sur "Fichier" > "Nouveau" > "Projet".
2. Dans l'écran de sélection du modèle de projet, choisissez "Blazor Server App".

3. Nommez votre projet "IronPDFExample" et cliquez sur "Créer".

4. Sélectionnez ".NET 7.0" ou une version ultérieure dans les listes déroulantes.

Vous avez maintenant un nouveau projet de Pages Razor.

Comprendre la Syntaxe et les Fichiers Razor

Les fichiers Razor utilisent l'extension de fichier .cshtml, combinant C# (d'où le 'cs') avec HTML. Si nous utilisions Visual Basic, l'extension de fichier changerait en .vbhtml.

Dans votre Explorateur de solutions, trouvez et ouvrez le fichier avec l'extension .cshtml nommé "Index.cshtml". C'est ici que vous verrez une combinaison de code HTML et de code C#. Ce mélange est rendu possible par le Parser Razor.

Syntaxe Razor

La syntaxe Razor dans ASP.NET Core est une combinaison de HTML et de code côté serveur. Le code serveur est soit du code C# soit du code VB. Le code Razor est indiqué par le symbole @, et il est exécuté sur le serveur avant l'envoi du HTML au client.

Un exemple de syntaxe Razor simple :

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

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

Dans cet exemple de code, @DateTime.Now est un code Razor. Il est exécuté sur le serveur, remplacé par la date et l'heure actuelles avant d'être envoyé au client.

Vue Razor

Le terme "vue" dans Razor correspond à toute page web destinée à présenter des informations à l'utilisateur. Le Razor View Engine est responsable du rendu de la page HTML pour l'utilisateur.

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

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>

Utiliser le Balisage Razor pour du Contenu Dynamique

Le balisage Razor nous permet d'insérer du code côté serveur dans notre balisage HTML. Nous pouvons utiliser diverses constructions de code comme les blocs de code, les expressions en ligne et les expressions codées en HTML.

Expression en Ligne

Une expression en ligne sort directement le résultat dans le HTML en utilisant le code suivant :

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

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

Ici, @Model.Name est une expression inline qui affiche la valeur de la propriété Name du modèle passé à la vue Razor.

Bloc de Code

Les blocs de code sont des segments de code exécutés sur le serveur :

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

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

Dans cet exemple de code, le code Razor entre { } est un bloc de code.

Structures de Contrôle

Nous pouvons également utiliser des structures de contrôle telles que des instructions if et des boucles dans nos Pages Razor :

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

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

Dans l'exemple de code ci-dessus, l'instruction if fait partie du code côté serveur qui s'exécute sur le serveur, et sa sortie est insérée dans la page HTML résultante.

Instruction Switch

Les instructions switch sont un type de structure de contrôle conditionnelle dans le langage de programmation C#. Elles peuvent être utilisées dans des blocs de code.

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

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

Bonjour le Monde en Razor

L'un des programmes les plus simples dans tout langage de programmation est "Bonjour le Monde". Dans Razor, vous pouvez afficher "Bonjour le Monde" avec une simple expression en ligne comme indiqué dans l'exemple ci-dessous :

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

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

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

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

Les Boucles en Razor

La syntaxe Razor vous permet d'écrire des boucles, telles que l'instruction foreach. Supposons que vous ayez une liste de noms que vous souhaitez afficher sur votre page web. Vous pouvez réaliser cela avec l'instruction foreach en syntaxe 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>
'}

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

Cette instruction foreach parcourt chaque nom dans la liste et l'affiche sur la page web.

Comprendre les Tag Helpers

Les Tag Helpers dans ASP.NET MVC permettent au code côté serveur de créer et de rendre des éléments HTML dans des fichiers Razor. Ils sont un peu comme les aides HTML mais ont une syntaxe plus proche de l'HTML. Ils transforment les éléments de type HTML dans vos vues Razor en balisage HTML envoyé au navigateur du client. Considérez l'exemple de code suivant d'un Tag Helper d'ancrage :

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

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

Gérer l'Interaction de l'Utilisateur

Les Pages Razor utilisent des méthodes de gestion pour gérer les interactions utilisateur. Par exemple, pour gérer la soumission de formulaire, nous pouvons créer une méthode nommée OnPostAsync dans le fichier modèle de page correspondant à notre page 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

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

Commentaire dans Razor

Razor prend également en charge les commentaires de style C#. Rappelez-vous, les commentaires Razor sont côté serveur, ce qui signifie qu'ils ne sont pas envoyés au navigateur. Ils ressemblent à ceci :

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

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

Et ceci est un commentaire sur plusieurs lignes :

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

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

Les vues et pages Razor peuvent inclure des commentaires HTML. Ces commentaires sont visibles dans la sortie HTML envoyée au navigateur.

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

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

Passer des Modèles à une Page Razor

Razor vous permet de passer des modèles à la page depuis le serveur. La directive @model est utilisée pour spécifier le type d'objet passé. Cette propriété modèle peut être accédée dans la page Razor comme montré dans l'exemple ci-dessous :

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

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

Générer des PDFs avec IronPDF dans Razor

Découvrez IronPDF for .NET est une bibliothèque populaire qui permet aux développeurs de générer des PDFs à partir de HTML, d'images et même de pages web existantes dans .NET. C'est un excellent outil pour créer des rapports, des factures, et tout autre document nécessitant un format d'impression standard. IronPDF fonctionne parfaitement au sein du cadre ASP.NET MVC et ASP.NET Razor Pages.

Installation

Tout d'abord, vous devez installer le package IronPDF. Vous pouvez le faire à partir de la console du gestionnaire de packages NuGet dans Visual Studio. Exécutez la commande suivante :

Install-Package IronPdf

Créer un PDF simple

Maintenant, créons un PDF simple à partir de code HTML dans votre Page Razor. Tout d'abord, importons l'espace de noms IronPDF en haut de votre page Razor.

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

Dim IronPdf As [using]

Ensuite, vous pouvez utiliser IronPDF pour créer un PDF. Disons que nous avons un bouton sur notre page Razor qui créera un PDF simple lorsqu'il est cliqué.

Dans le gestionnaire correspondant dans notre fichier modèle de page, nous pouvons ajouter le code suivant :

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

SORTIE

Conclusion

Vous avez appris avec succès les bases de Razor C# et découvert comment intégrer IronPDF pour générer des fichiers PDF dans votre application. Vous avez commencé par créer un nouveau projet dans Visual Studio, puis appris à utiliser la syntaxe Razor pour créer des pages web dynamiques. Vous avez également exploré comment IronPDF peut être utilisé pour générer des PDFs à partir de code HTML et même de vues Razor complètes.

Maintenant, au fur et à mesure que vous continuez à développer des applications plus avancées, vous pouvez tirer parti des fonctionnalités puissantes offertes par IronPDF. Vous pouvez essayer IronPDF gratuitement et si vous le trouvez utile, vous pouvez acheter une licence adaptée à vos besoins.