Composants Razor : Comment cela fonctionne pour les développeurs

Le développement web a beaucoup évolué au fil des ans et, grâce à l'avènement de cadres et de bibliothèques modernes, les développeurs disposent d'outils puissants pour créer des pages web dynamiques et interactives. L'une de ces technologies qui a considérablement gagné en popularité ces dernières années est Razor Components, qui fait partie du framework Blazor dans ASP.NET Core. Les composants Razor permettent aux développeurs de créer des applications web riches, côté client, en utilisant C# et HTML, sans avoir à écrire de JavaScript. Dans cet article, nous examinerons les composants Razor et la manière dont ils peuvent être utilisés pour créer des pages web modulaires, réutilisables et dynamiques.

Qu'est-ce qu'un composant Razor ?

Composants du rasoir sont un framework d'interface utilisateur dans ASP.NET Core qui permet aux développeurs de construire des pages web en utilisant une combinaison de C# et de HTML, avec la possibilité d'écrire une logique côté serveur qui peut être exécutée côté client. Les composants Razor 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 à l'aide de WebAssembly(Wasm) ou SignalR. Les composants Razor offrent une architecture basée sur les composants pour la construction d'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 composants Razor utilisent un langage de balisage appelé syntaxe Razor, qui est une combinaison de C# et de HTML permettant une intégration transparente du code côté serveur et côté client. Les composants Razor sont similaires à d'autres frameworks d'interface utilisateur basés sur des composants, tels que React, Angular et Vue, mais avec la différence clé qu'ils sont écrits en C# et s'exécutent côté serveur ou côté client, en fonction du modèle d'hébergement(WebAssembly ou SignalR).

Avantages des composants Razor

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

Réutilisation

Les composants Razor sont des composants autonomes qui peuvent être facilement réutilisés à plusieurs endroits dans une application web ou dans différents projets. Cela favorise la réutilisation du code et réduit la duplication du code, ce qui se traduit par des applications web plus faciles à maintenir et plus évolutives.

Modularité

Les composants Razor suivent une architecture basée sur les composants, où l'interface utilisateur est décomposée en composants plus petits qui peuvent être composés ensemble pour créer des pages web complexes. Cela favorise la modularité, permettant aux développeurs d'encapsuler l'interface utilisateur et la logique dans des composants individuels, ce qui facilite la gestion et la maintenance de la base de code.

Intégration transparente avec C# ;

Les composants Razor étant écrits en C#, les développeurs peuvent tirer parti de leurs compétences et de leurs connaissances en C# pour créer des applications web. Il n'est donc pas nécessaire d'apprendre et d'écrire du JavaScript, ce qui peut constituer un avantage considérable pour les développeurs déjà familiarisés avec C#.

Exécution côté serveur et côté client

Les composants Razor peuvent être exécutés côté serveur ou côté client, en fonction du modèle d'hébergement. Cela permet aux développeurs de choisir le modèle d'exécution le plus approprié pour leur application, en fonction de facteurs tels que les performances, la sécurité et l'expérience de l'utilisateur.

Communication en temps réel

Les composants Razor peuvent utiliser SignalR, une bibliothèque de communication en temps réel, pour établir une communication bidirectionnelle entre le client et le serveur. Cela permet des mises à jour et des notifications en temps réel dans les applications web, offrant ainsi une expérience utilisateur réactive et interactive.

Extensibilité

Les composants Razor sont très extensibles, ce qui permet aux développeurs de créer leurs propres composants, bibliothèques et modèles. Cela permet aux développeurs d'élaborer des solutions sur mesure qui répondent aux exigences spécifiques de leurs applications web.

Premiers pas avec le composant Razor

Pour commencer à utiliser 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 à l'aide du modèle Blazor dans Visual Studio ou dans l'interface de programmation .NET Core.

    dotnet new razorcomponent

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

page "/counter" Counter Counter < role="status"> Current count: currentCount Click ReadOnly Property code() As [me]
		private Integer currentCount = 0
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'		private void IncrementCount()
'		{
'		currentCount++;
'	}
End Property

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 composants Razor.

Dans le dossier "Components", ajoutez un nouveau fichier Razor Component avec l'extension ".razor". Ce fichier contiendra le code C# et HTML de votre composant.

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

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

Hello, World(Not This is a) ReadOnly Property Component_code() As Razor Implements Component.code
	' C# code for the component
End Property

Vous pouvez maintenant utiliser votre composant Razor dans d'autres parties de votre application web en l'incluant dans votre balisage HTML à l'aide du nom de la balise du composant. Par exemple, vous pouvez utiliser la balise dans votre page principale Razor comme suit :

Vous pouvez également transmettre des données à votre composant Razor en utilisant les paramètres du composant. Les paramètres des composants permettent de transmettre des données d'un composant parent à un composant enfant, ce qui permet la communication entre les composants. Par exemple, vous pouvez définir un paramètre dans votre composant Razor comme suit :

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

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

<Parameter>
Public Property Message() As String

Puis utilisez le paramètre component dans votre classe Razor Component comme ceci :

    @Message

    @Message

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@Message

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

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

Création de composants Razor réutilisables

L'un des avantages de 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" comme suit :

Nous pouvons définir le composant razor comme suit :

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

typeparam Function foreach(var book ByVal Books As in) As Book
			book.Title by book.Author
End Function

	code
	If True Then
		<Parameter>
		public List Books {get;set;}
	End If

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

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

Utilisation d'IronPDF avec des composants Razor

IronPDF est une bibliothèque C# qui permet aux développeurs de créer des fichiers PDF à partir de HTML, CSS et JavaScript. Il est construit au-dessus de Chrome, le navigateur open-source qui alimente Google Chrome. Avec IronPDF, les développeurs peuvent facilement convertir les composants Razor en HTML et créer des fichiers PDF à partir de ceux-ci.

IronPDF excelle dans la conversionHTML vers PDF, en veillant à ce que la mise en page et le style restent intacts. Ceci est particulièrement utile pour générer des PDF à partir de contenu Web tel que des rapports, des factures et de la documentation. Les fichiers HTML, les URL et les chaînes HTML peuvent être facilement 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 Razor Components, nous devons d'abord installer le paquet NuGet IronPDF. Pour ce faire, suivez les étapes suivantes :

1. Ouvrez votre projet dans Visual Studio.

2. Faites un clic droit sur le projet et sélectionnez "Manage NuGet Packages".

3. Recherchez "IronPDF" et sélectionnez le bouton "Paquet IronPDF".

4. Cliquez sur "Install" pour installer le paquet.

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

   

   Une fois le paquet installé, vous pouvez créer un nouveau fichier PDF à partir d'un fichier Razor Component en utilisant la classe IronPdf.ChromePDFRenderer :

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

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

Dim Renderer = New IronPdf.ChromePdfRenderer()
			 Dim pdf As PdfDocument = Renderer.RenderHtmlAsPdf("MY PDF # " & currentCount)
			 pdf.SaveAs("myPdf" & currentCount & ".pdf")

Dans cet exemple, nous créons une nouvelle instance de "ChromPDFRenderer". 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 à l'aide de 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, lorsqu'il est cliqué, crée un PDF contenant le décompte du compteur.

Conclusion

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

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 page, de signatures numériques, de mots de passe et d'autres élémentsfonctions avancées de manipulation des PDF aux documents PDF existants ou nouvellement générés. Il est gratuit pour le développement mais nécessiteune licence d'essai gratuite oulicence commerciale pour la production.