Composants Razor : Comment ça fonctionne pour les développeurs

Quels sont les Razor Components

Les Razor Components sont un framework d'interface utilisateur dans ASP.NET Core qui permet aux développeurs de créer des pages web en utilisant une combinaison de C# et HTML, avec la possibilité d'écrire une logique côté serveur qui peut être exécutée du côté client. Les Razor Components font partie du framework Blazor, qui est un framework d'interface utilisateur web côté client qui exécute du code C# dans le navigateur en utilisant WebAssembly (Wasm) ou SignalR. Les Razor Components offrent une architecture basée sur les composants pour créer des applications web modernes, où l'interface utilisateur est décomposée en composants plus petits et autonomes qui peuvent être composés ensemble pour créer une page web complète.

Les Razor Components utilisent un langage de balisage appelé syntaxe Razor, qui est une combinaison de C# et HTML permettant une intégration fluide du code côté serveur et côté client. Les Razor Components sont similaires à d'autres frameworks d'interface utilisateur basés sur les composants, tels que React, Angular, et Vue, mais avec la différence principale qu'ils sont écrits en C# et s'exécutent sur le serveur ou le client, selon le modèle d'hébergement (WebAssembly ou SignalR).

Avantages des Razor Components

Les Razor Components offrent plusieurs avantages aux développeurs web, notamment :

Commencer avec les Razor Components

Pour commencer avec les Razor Components, vous devez avoir installé .NET Core 3.0 ou une version ultérieure sur votre système. Créez un nouveau projet ASP.NET Core en utilisant le modèle Blazor dans Visual Studio ou l'interface de ligne de commande .NET Core.

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Dans cet exemple, nous avons un composant Razor appelé "Counter" avec un bouton qui incrémente la variable currentCount lorsqu'il est cliqué. Le bloc @code est utilisé pour définir le code C# du composant.

Créer un composant Razor personnalisé

Dans le projet, créez un nouveau dossier appelé "Components" pour stocker vos Razor Components.

À l'intérieur du dossier "Components", ajoutez un nouveau fichier de composant Razor avec l'extension ".razor". Ce fichier contiendra le code C# et HTML de votre composant.

Ouvrez le fichier de composant Razor et définissez votre composant en utilisant la syntaxe Razor. La syntaxe Razor vous permet de combiner le code C# et HTML dans un seul fichier, facilitant la création de pages web dynamiques. Par exemple, vous pouvez définir un composant Razor simple comme celui-ci :

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

Vous pouvez désormais utiliser votre composant Razor dans d'autres parties de votre application web en l'incluant dans votre balisage HTML en utilisant le nom de balise du composant. Par exemple, vous pouvez utiliser le composant dans votre page Razor principale comme ceci :

<MyComponent />

Vous pouvez également passer des données à votre composant Razor en utilisant des paramètres de composants. Les paramètres de composants permettent de passer des données d'un composant parent à un composant enfant, permettant une communication entre les composants. Par exemple, vous pouvez définir un paramètre dans votre composant Razor comme ceci :

@code {
    [Parameter]
    public string Message { get; set; }
}

Et ensuite utiliser le paramètre du composant dans votre classe de composant Razor comme ceci :

<p>@Message</p>

Et passer des données au composant à partir d'un composant parent comme ceci :

<MyComponent Message="Hello from parent component!" />

Les Razor Components peuvent également contenir une logique côté serveur qui peut être exécutée du côté client. Par exemple, vous pouvez écrire une logique de traitement, faire des requêtes HTTP, gérer des événements utilisateur, et effectuer d'autres opérations côté serveur directement à partir de vos Razor Components en utilisant le code C#. Cela vous permet de créer des pages web dynamiques et interactives sans écrire de code JavaScript.

Créer des composants Razor réutilisables

L'un des avantages des Razor Components est la possibilité de créer des composants d'interface utilisateur réutilisables qui peuvent être utilisés sur plusieurs pages ou applications. Pour créer un composant réutilisable, vous pouvez créer un nouveau fichier ".razor" dans le dossier "Shared" de votre projet.

Par exemple, disons que nous voulons créer un composant qui affiche une liste de livres. Nous pouvons créer un nouveau fichier BookList.razor dans le dossier "Shared" tel que :

Nous pouvons définir le composant razor comme ceci :

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

Dans cet exemple, nous avons un composant appelé BookList qui prend une liste d'objets "Book" comme paramètre razor. La boucle @foreach est utilisée pour parcourir la liste et afficher chaque titre de livre et auteur.

Dans la section suivante, nous explorerons comment utiliser IronPDF avec les Razor Components pour créer des fichiers PDF à partir des applications web.

Utiliser IronPDF avec les Razor Components

IronPDF est une bibliothèque C# qui permet aux développeurs de créer des fichiers PDF à partir de HTML, CSS, et JavaScript. Elle est construite sur Chromium, le navigateur open-source qui propulse Google Chrome. Avec IronPDF, les développeurs peuvent facilement convertir les Razor Components en HTML et créer des fichiers PDF à partir d'eux.

IronPDF excelle à convertir HTML en PDF, garantissant que la mise en page et le style restent intacts. Ceci est particulièrement utile pour générer des PDF à partir de contenus web tels que les rapports, les factures et la documentation. Les fichiers HTML, les URLs et les chaînes HTML peuvent facilement être convertis en fichiers PDF.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

		' 1. Convert HTML String to PDF
		Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
		Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
		pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

		' 2. Convert HTML File to PDF
		Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
		Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
		pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

Installation d'IronPDF

Pour utiliser IronPDF avec les Razor Components, nous devons d'abord installer le package NuGet IronPDF. Pour ce faire, suivez ces étapes :

1. Ouvrez votre projet dans Visual Studio.
2. Cliquez avec le bouton droit sur le projet et sélectionnez "Gérer les packages NuGet".
3. Recherchez "IronPDF" et sélectionnez le "package IronPDF".
4. Cliquez sur "Installer" pour installer le package.

Après avoir installé le package NuGet IronPDF, nous pouvons l'utiliser dans notre application Razor Components.

Une fois le package installé, vous pouvez créer un nouveau fichier PDF à partir d'un composant Razor en utilisant la classe IronPdf.ChromePdfRenderer.

Pour créer un fichier PDF dans les Razor Components ASP.NET Core, vous pouvez passer la chaîne de syntaxe HTML, le fichier HTML ou l'URL à la méthode IronPdf.ChromePdfRenderer. Par exemple, supposons que nous voulons créer un fichier PDF avec l'incrémentation d'un compteur.

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

Dans cet exemple, nous créons une nouvelle instance du ChromePdfRenderer. Nous créons ensuite une nouvelle instance de la classe PdfDocument et passons une chaîne à la méthode RenderHtmlAsPdf. Enfin, nous enregistrons le fichier PDF résultant sur le disque en utilisant la méthode PdfDocument.SaveAs.

Dans cet exemple, nous avons modifié notre composant compteur. Nous avons modifié la fonction onClick d'un bouton de compteur qui, une fois cliqué, créera un PDF contenant le compte du compteur.

Conclusion

Dans cet article, nous avons exploré comment utiliser les Razor Components avec IronPDF pour créer des fichiers PDF à partir d'applications web. Nous avons couvert les bases des Razor Components, comment installer et utiliser IronPDF, et fourni des exemples de code pour vous aider à démarrer.

Les Razor Components et IronPDF sont des outils puissants qui peuvent être utilisés pour créer des applications web robustes et riches en fonctionnalités. En combinant ces technologies, les développeurs peuvent créer des applications web à la fois très fonctionnelles et visuellement attrayantes.

IronPDF peut également être utilisé pour convertir des pages razor et des URL en PDF, ainsi que pour lire, créer et manipuler des documents PDF. IronPDF permet même un contrôle plus granulaire des PDF comme l'ajout d'en-têtes, de pieds de page, de numéros de pages, de signatures numériques, de mots de passe et des fonctions avancées de manipulation des PDF aux documents PDF existants ou nouvellement générés. It is free for development but requires a free trial license or commercial license for production.