Icône de message
Passer au contenu du pied de page
  1. IronPDF
  2. Blog IronPDF
  3. .NET Aide
  4. Razor C#
.NET AIDE

Razor C# (Comment ça fonctionne pour les développeurs)

Curtis Chau
Curtis Chau
Mis à jour:

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

Razor C# (Comment Cela Fonctionne pour les Développeurs) Figure 1

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

Razor C# (Comment Cela Fonctionne pour les Développeurs) Figure 2

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

Razor C# (Comment Cela Fonctionne pour les Développeurs) Figure 3

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 Solution, 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 identifié par le symbole @, et il est exécuté sur le serveur avant que le HTML soit envoyé 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>
$vbLabelText   $csharpLabel

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>
$vbLabelText   $csharpLabel

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>
$vbLabelText   $csharpLabel

Ici, @Model.Name est une expression en ligne 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>
$vbLabelText   $csharpLabel

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>
'}
$vbLabelText   $csharpLabel

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>
$vbLabelText   $csharpLabel

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>
$vbLabelText   $csharpLabel

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 y parvenir avec l'instruction foreach dans la 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>
'}
$vbLabelText   $csharpLabel

Cette instruction foreach boucle sur chaque nom de 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>
HTML

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 d'un formulaire, nous pouvons créer une méthode nommée OnPostAsync dans le fichier modèle de page correspondant de 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
$vbLabelText   $csharpLabel

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 *@
$vbLabelText   $csharpLabel

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. *@
$vbLabelText   $csharpLabel

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

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>
$vbLabelText   $csharpLabel

Générer des PDFs avec IronPDF dans Razor

Discover IronPDF for .NET is a popular library that allows developers to generate 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]
$vbLabelText   $csharpLabel

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

SORTIE

Razor C# (Comment Cela Fonctionne pour les Développeurs) Figure 4

Razor C# (Comment Cela Fonctionne pour les Développeurs) Figure 5

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.

Questions Fréquemment Posées

Comment puis-je générer des PDF à partir de HTML en utilisant Razor en C# ?

Vous pouvez générer des PDF à partir de HTML en utilisant Razor en C# en utilisant la bibliothèque IronPDF. Tout d'abord, installez le package IronPDF, importez l'espace de noms IronPDF, puis utilisez ses méthodes API comme RenderHtmlAsPdf pour convertir votre contenu HTML en format PDF.

Quel est le rôle de la syntaxe Razor dans le développement web ?

La syntaxe Razor joue un rôle crucial dans le développement web en combinant C# ou VB avec HTML pour créer des pages web dynamiques. Elle permet aux développeurs d'écrire du code côté serveur exécuté avant que le HTML ne soit envoyé au navigateur du client, facilitant une intégration et des fonctionnalités transparentes.

Comment les Pages Razor améliorent-elles le développement d'applications web ?

Les Pages Razor améliorent le développement d'applications web en fournissant un moyen structuré et organisé de gérer le code, réduisant ainsi la duplication et la complexité. Elles simplifient le processus de développement en permettant aux développeurs de se concentrer sur la création de fonctionnalités dans un format basé sur des pages.

Que sont les Tag Helpers et comment assistent-ils dans les Pages Razor ?

Les Tag Helpers dans les Pages Razor aident en permettant au code côté serveur de créer et de rendre des éléments HTML avec une syntaxe semblable à HTML. Cela aide à produire un balisage HTML propre et facile à maintenir en transformant les éléments sur le serveur avant de les envoyer au navigateur du client.

Comment puis-je gérer les interactions utilisateur dans les Pages Razor ?

Les interactions utilisateur dans les Pages Razor sont gérées en utilisant des méthodes de gestionnaire telles que OnPostAsync. Ces méthodes traitent les soumissions de formulaires et d'autres entrées utilisateur, permettant aux développeurs d'exécuter des opérations basées sur les données reçues des clients.

Quelle est l'importance de la directive '@model' dans Razor ?

La directive '@model' dans Razor est importante car elle spécifie le type de données de l'objet passé à une page Razor. Cela permet aux développeurs d'accéder et de manipuler directement les propriétés du modèle au sein de la page, facilitant ainsi la liaison et l'interaction des données.

Quels sont les avantages d'utiliser Razor avec C# dans Visual Studio ?

Utiliser Razor avec C# dans Visual Studio offre des avantages tels que l'intégration de la logique côté serveur avec HTML, un développement simplifié à travers les Pages Razor, et la possibilité de générer facilement du contenu web dynamique. De plus, Visual Studio fournit des outils et des modèles robustes pour soutenir le développement avec Razor.

Puis-je utiliser la syntaxe Razor pour à la fois C# et VB ?

Oui, la syntaxe Razor peut être utilisée avec à la fois C# et VB (Visual Basic) pour combiner la logique côté serveur avec HTML. Cette flexibilité permet aux développeurs de choisir leur langage préféré tout en bénéficiant des capacités de Razor dans le développement web.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Démarrer l'essai gratuit