Ce didacticiel présente MudBlazor et IronPDF dans le contexte de .NET 8 pour créer des applications web. MudBlazor est une bibliothèque de composants pour les projets Blazor. Il fournit une gamme de composants d'interface utilisateur pour construire des applications Blazor côté client et serveur. IronPDF est une bibliothèque qui permet la création, la manipulation et la lecture de documents PDF dans des applications .NET.

Nous couvrirons comment installer MudBlazor, utiliser ses composants pour le développement web et intégrer IronPDF pour la fonctionnalité PDF. Ce guide est destiné aux débutants en Blazor et .NET mais sera également utile aux développeurs intermédiaires désirant apprendre sur MudBlazor et IronPDF.

À la fin de ce tutoriel, vous saurez comment configurer une application Blazor Server, intégrer des composants MudBlazor et utiliser IronPDF pour travailler avec des fichiers PDF. L'objectif est d'acquérir des connaissances pratiques pour construire des applications web modernes avec Visual Studio. Commençons par configurer notre environnement et créer un nouveau projet dans .NET 8.

Commencer avec MudBlazor

Configuration de MudBlazor dans les projets .NET

Pour utiliser MudBlazor dans votre projet client ou serveur, assurez-vous d'abord d'avoir installé le .NET Framework. Ensuite, créez un nouveau projet Blazor dans le dossier de mise en page client ou serveur, selon votre modèle d'hébergement. Utilisez la ligne de commande ou Visual Studio pour cela. Dans Visual Studio, choisissez le modèle Blazor App.

Ensuite, ajoutez MudBlazor à votre projet. Ouvrez le terminal ou la console du gestionnaire de packages et exécutez la commande :

Install-Package MudBlazor

Cette commande ajoute MudBlazor à votre projet.

Après avoir installé MudBlazor, allez à _Imports.razor. Ajoutez ce qui suit :

@using MudBlazor

@using MudBlazor

Cela rend les composants MudBlazor disponibles dans votre projet.

Dans wwwroot/index.html (ou Host.cshtml pour les projets serveurs), ajoutez le CSS et JS de MudBlazor au même fichier, en veillant à ce que le mode de rendu interactif avec les paramètres de modèle par défaut soit pris en charge. Incluez la ligne suivante :

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Ajoutez également :

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Cette étape garantit que les styles et les fonctionnalités de MudBlazor fonctionnent dans votre application.

Un exemple de code basique : Construire un bouton simple avec MudBlazor

Pour démontrer MudBlazor en action, ajoutons un bouton simple à un composant. Ouvrez un fichier de composant Razor, comme Index.razor. Ajoutez le code suivant pour le bouton MudBlazor :

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

Ce code initie la création d'un bouton qui dit " Cliquez moi ". Lorsqu'il est cliqué, il enregistre un message dans la console, démontrant le rendu côté serveur. Les propriétés Variant et Color personnalisent l'apparence du bouton.

Fonctionnalités de MudBlazor

Dialogues dans MudBlazor

Le composant de dialogue de MudBlazor simplifie la création et la gestion des dialogues. Tout d'abord, injectez le IDialogService dans votre composant :

@inject IDialogService DialogService

@inject IDialogService DialogService

Ensuite, utilisez la méthode suivante pour ouvrir un dialogue :

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

MyDialog est un composant Razor représentant le contenu du dialogue. Vous pouvez passer des paramètres avec DialogParameters.

Grille de données

MudBlazor offre un composant de grille de données pour afficher des collections. Il prend en charge le tri, la pagination et le filtrage. Pour l'utiliser, liez une collection à la propriété Items :

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

Formulaires de saisie

Pour les entrées de formulaire, MudBlazor fournit divers composants. Voici un exemple utilisant MudTextField :

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

Onglets

Pour organiser le contenu avec des onglets, utilisez MudTabs. Définissez chaque onglet avec MudTabPanel :

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

Icônes

MudBlazor s'intègre aux Material Icons. Pour utiliser une icône, ajoutez un composant MudIcon :

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

Ce code affiche une icône d'alarme. Les icônes améliorent les interfaces utilisateur en fournissant des indices visuels.

Intégration de IronPDF et MudBlazor

IronPDF est une bibliothèque pour C# qui simplifie le processus de création, d'édition et de lecture de fichiers PDF au sein des applications .NET. Il se distingue car il nécessite peu de configuration et il est très simple en termes de conversion de HTML en PDF. Cela peut être particulièrement pratique lorsque vous cherchez à générer des rapports ou des factures de manière dynamique.

La meilleure fonctionnalité d'IronPDF est sa capacité à convertir HTML en PDF, en préservant la mise en page et le style originaux. Il est excellent pour générer des PDF à partir de contenu web comme des rapports, des factures, et de la documentation. Les fichiers HTML, les URL et les chaînes HTML sont tous pris en charge pour la conversion en PDF.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // 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");
        
        // 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");
        
        // 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();
        
        // 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");
        
        // 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");
        
        // Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' 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")

        ' 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")

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

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' 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")

        ' 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")

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

Cas d'utilisation de la fusion d'IronPDF avec C# MudBlazor

MudBlazor est une bibliothèque de composants pour Blazor, pleine de widgets et d'outils utiles pour construire des interfaces utilisateur réactives et interactives. Lorsque vous combinez les capacités d'interface utilisateur de MudBlazor avec la génération de PDF d'IronPDF, vous obtenez un outil puissant. Un cas d'utilisation courant peut être une application web qui permet aux utilisateurs de concevoir des documents ou des rapports en utilisant les composants MudBlazor, puis, avec un simple clic, de convertir ces conceptions en PDF téléchargeables avec IronPDF.

Exemple de code de cas d'utilisation

Voyons un exemple de base où nous construisons une interface utilisateur avec MudBlazor et utilisons ensuite IronPDF pour convertir cette interface en document PDF.

Tout d'abord, assurez-vous d'avoir installé MudBlazor et IronPDF dans votre projet. Vous pouvez le faire via le Package Manager NuGet ou la console du Package Manager :

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

Étape 1 : Construire l'interface utilisateur avec MudBlazor

Sur votre page Blazor, vous pouvez ajouter des composants MudBlazor pour créer l'interface utilisateur. Voici un simple formulaire créé avec MudBlazor :

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
    <!-- Add more components as needed -->
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
    <!-- Add more components as needed -->
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

Étape 2 : Implémenter la génération de PDF avec IronPDF

Maintenant, pour intégrer la fonctionnalité de génération de PDF, nous allons manipuler la méthode GeneratePDF. Cette fonction convertira notre contenu HTML en fichier PDF :

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub

Dans cet exemple simplifié, RenderHtmlAsPdf prend une chaîne de contenu HTML et la convertit en PDF. Dans une application complète, vous pourriez générer dynamiquement cette chaîne HTML en fonction des entrées utilisateur ou d'autres sources de données.

Voici le résultat du code :

Conclusion

Ce guide vous accompagne dans l'utilisation de MudBlazor et IronPDF avec .NET 8 pour le développement web. MudBlazor offre des composants d'interface utilisateur pour les applications Blazor, améliorant les interfaces utilisateur avec un code minimal. IronPDF permet la création et la manipulation de PDF, s'avérant inestimable pour la gestion des documents au sein des applications .NET.

Grâce à des instructions étape par étape, vous apprendrez à intégrer MudBlazor dans vos projets, à utiliser ses composants, et à tirer parti d'IronPDF pour générer des PDF à partir de contenu web. Idéal pour les débutants comme pour les développeurs intermédiaires, ce tutoriel vous assure d'être bien équipé pour construire des applications web modernes en utilisant ces bibliothèques. Pour ceux qui souhaitent explorer davantage IronPDF, un essai gratuit commence à partir de $999.