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

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 offre un moyen propre et direct d'organiser le code au sein des applications, réduisant ainsi le problème de la duplication du code. Razor combine le côté serveur en 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!

Conditions préalables

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

1. .NET Core SDK

2. Visual Studio

   Ils sont nécessaires car ils fournissent le moteur de visualisation Razor 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 les suivre, que vous soyez sous Windows, Linux ou macOS.

Étape 1 Création d'un nouveau projet Razor Pages

Ouvrez Microsoft Visual Studio et suivez les étapes suivantes :

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 menus déroulants.

   

   Vous avez maintenant un nouveau projet Razor Pages.

Comprendre la syntaxe et les fichiers de 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 du fichier deviendrait .vbhtml.

Dans l'explorateur de solutions, recherchez et ouvrez le fichier d'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 l'analyseur Razor.

Syntaxe du rasoir

Syntaxe du rasoir est une combinaison de HTML et de serveur. Le code du serveur est un code C# ou VB. Le code Razor est désigné par le symbole @ et il est exécuté sur le serveur avant que le code HTML ne soit envoyé au client. Il n'y a donc pas de C# ;

Exemple de syntaxe 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>

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 rasoir

Le terme "vue" dans Razor correspond à toute page web destinée à présenter des informations à l'utilisateur. Le moteur de visualisation Razor est responsable du rendu de la page HTML à 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>

Utilisation de la balise Razor pour le contenu dynamique

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

Expression en ligne

Une expression en ligne produit le résultat directement dans le code 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>

Ici, @Model.Name est une expression en ligne qui produit 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 qui sont 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>

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 les déclarations if et les 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>
'}

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.

Déclaration de l'interrupteur

Les instructions de commutation sont un type de structure de contrôle conditionnel dans le langage de programmation C#. Ils peuvent être utilisés à l'intérieur 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>

Hello World dans Razor

L'un des programmes les plus simples dans n'importe quel langage de programmation est "Hello World". Dans Razor, vous pouvez afficher "Hello World" à l'aide d'une simple expression en ligne, comme le montre 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>

Boucles dans Razor

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

Cette instruction foreach passe en revue chaque nom de la liste et l'affiche sur la page web.

Comprendre les aides aux balises

Les Tag Helpers dans ASP.NET MVC permettent au code côté serveur de créer et de rendre les éléments HTML dans les fichiers Razor. Ils sont un peu comme des aides HTML, mais leur syntaxe est plus proche de celle du HTML. Ils transforment les éléments de type HTML de vos vues Razor en balises HTML envoyées au navigateur du client. Prenons l'exemple de code suivant d'une balise d'ancrage (anchor Tag Helper) :

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

Gestion de l'interaction avec l'utilisateur

Les pages Razor utilisent des méthodes de traitement pour gérer les interactions avec l'utilisateur. Par exemple, pour gérer la soumission d'un formulaire, nous pouvons créer une méthode nommée OnPostAsync dans le fichier de 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

Commentaires dans Razor

Razor prend également en charge les commentaires de style C#. N'oubliez pas que les commentaires Razor sont transmis au serveur, c'est-à-dire qu'ils ne sont pas envoyés au navigateur. Elles se présentent comme suit

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

Il s'agit d'un commentaire de 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. *@

Les vues et les 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 -->

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

Transmettre des modèles à une page Razor

Razor vous permet de transmettre des modèles à la page depuis le serveur. La directive @model est utilisée pour spécifier le type d'objet transmis. Cette propriété de modèle est accessible dans la page Razor, comme le montre 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>

Générer des PDF avec IronPDF dans Razor

IronPDF est une bibliothèque populaire qui permet aux développeurs de générer des PDF à partir de HTML, des images et même des pages web existantes en .NET. Il s'agit d'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 paquetage IronPDF. Vous pouvez le faire à partir de la console NuGet Package Manager dans Visual Studio. Exécutez la commande suivante :

:PackageInstall

Création d'un PDF simple

Maintenant, créons un simple PDF à partir d'un 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]

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

Dans le gestionnaire correspondant de notre fichier Page Model, 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);
    }
}

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

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 vous avez appris à utiliser la syntaxe Razor pour créer des pages web dynamiques. Vous avez également découvert comment IronPDF peut être utilisé pour générer des PDF à partir de code HTML et même des vues complètes de Razor.

Désormais, alors que vous continuez à créer des applications plus avancées, vous pouvez tirer parti des puissantes fonctionnalités offertes par IronPDF. Vous pouvez essayer IronPDF pour gratuit. Si vous le trouvez intéressant, vous pouvez acheter une licence à partir de $749.