Test dans un environnement réel
Test en production sans filigrane.
Fonctionne partout où vous en avez besoin.
Ce tutoriel présente MudBlazor et IronPDF dans le contexte de .NET 8 pour la création d'applications web. MudBlazor est une bibliothèque de composants pour les projets Blazor. Il fournit une gamme de composants d'interface utilisateur pour la création d'applications Blazor côté client et côté serveur. IronPDF est une bibliothèque qui permet la création, la manipulation et la lecture de documents PDF dans les applications .NET.
Nous verrons comment installer MudBlazor, utiliser ses composants pour le développement web et intégrer IronPDF pour les fonctionnalités PDF. Ce guide s'adresse aux débutants en Blazor et en .NET, mais il sera également utile aux développeurs intermédiaires désireux de se familiariser avec MudBlazor et IronPDF.
À la fin de ce tutoriel, vous saurez comment configurer une application Blazor Server, intégrer des composants Blazor et utiliser IronPDF pour travailler avec des fichiers PDF. L'accent est mis sur les connaissances pratiques nécessaires à la création d'applications web modernes avec Visual Studio. Commençons par configurer notre environnement et par créer un nouveau projet dans .NET 8.
Pour utiliser MudBlazor dans votre projet client ou serveur, assurez-vous d'abord que le Framework .NET est installé. Ensuite, créez un nouveau projet Blazor dans le dossier de présentation du client ou du serveur, en fonction de vos modèles d'hébergement. Pour ce faire, utilisez la ligne de commande ou Visual Studio. Dans Visual Studio, choisissez le modèle Blazor App.
Ensuite, ajoutez MudBlazor à votre projet. Ouvrez le terminal ou la console du gestionnaire de paquets. Exécutez la commande Install-Package MudBlazor. Cette commande ajoute MudBlazor à votre projet.
Après avoir installé MudBlazor, allez dans _Imports.razor. Ajouter @utiliser MudBlazor. Cela rend les composants de MudBlazor disponibles dans votre projet.
Dans wwwroot/index.html (ou Host.cshtml pour les projets de serveur)le fichier CSS et JS de MudBlazor est ajouté dans le même fichier, ce qui garantit que le mode de rendu interactif avec les paramètres par défaut du modèle est pris en charge. Inclure la ligne suivante :
<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
Ajouter également :
<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
Cette étape permet de s'assurer que les styles et les fonctionnalités de MudBlazor fonctionnent dans votre application.
Pour montrer MudBlazor en action, ajoutons un simple bouton à 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!");
}
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudButton [Variant]="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick"> Click [Me] </MudButton> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
' private void ButtonClick()
' {
' Console.WriteLine("Button clicked!");
' }
End If
Ce code initie la création d'un constructeur pour un bouton qui dit "Cliquez-moi". Lorsqu'il est cliqué, il enregistre un message dans la console, démontrant ainsi le rendu côté serveur. Les propriétés Variant et Color permettent de personnaliser l'apparence du bouton.
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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@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" });
}
Private Sub OpenDialog()
DialogService.Show(Of MyDialog)("My Dialog", New DialogParameters With {("Parameter1") = "Value1"})
End Sub
MyDialog est un composant Razor représentant le contenu du dialogue. Vous pouvez passer des paramètres avec DialogParameters.
MudBlazor propose un composant de grille de données pour l'affichage des collections. Il permet 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 */;
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudTable Items="@myItems"> (Of HeaderContent) (Of MudTh) Header 1</MudTh> (Of MudTh) Header 2</MudTh> </HeaderContent> (Of RowTemplate) <MudTd DataLabel="Header 1"> context.Item1</MudTd> <MudTd DataLabel="Header 2"> context.Item2</MudTd> </RowTemplate> </MudTable> code
If True Then
private List(Of MyItemType) myItems =
End If
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();
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudForm Model="@myModel"> <MudTextField Label="Enter text" [For]="@(() => myModel.Text)"></MudTextField> </MudForm> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
' public class MyModel
' {
' public string Text
' {
' get;
' set;
' }
' }
private MyModel myModel = New MyModel()
End If
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>
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<MudTabs> <MudTabPanel Text="Tab 1"> Content for Tab 1 </MudTabPanel> <MudTabPanel Text="Tab 2"> Content for Tab 2 </MudTabPanel> </MudTabs>
MudBlazor s'intègre à Material Icons. Pour utiliser une icône, ajoutez un composant MudIcon :
<MudIcon Icon="@Icons.Material.Filled.Alarm" />
<MudIcon Icon="@Icons.Material.Filled.Alarm" />
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<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 repères visuels.
IronPDF est une bibliothèque pour C# qui simplifie le processus de création, d'édition et de lecture des fichiers PDF dans les applications .NET. Il se distingue par le fait qu'il ne nécessite qu'une installation minimale et qu'il est assez simple en termes de conversion HTML vers PDF. Cela peut s'avérer particulièrement utile lorsque vous souhaitez générer des rapports ou des factures de manière dynamique.
La meilleure fonctionnalité d'IronPDF est sa capacité à convertir HTML vers PDFSure, please provide the text you'd like translated into French. C'est idéal pour générer des fichiers 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 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
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 une puissante boîte à outils. Un cas d'utilisation courant pourrait être une application web qui permet aux utilisateurs de concevoir des documents ou des rapports à l'aide de composants MudBlazor, puis, d'un simple clic, de convertir ces conceptions en PDF téléchargeables à l'aide d'IronPDF.
Prenons un exemple basique où nous construisons une interface utilisateur avec MudBlazor et utilisons ensuite IronPDF pour convertir cette interface en un document PDF.
Tout d'abord, assurez-vous que MudBlazor et IronPDF sont installés dans votre projet. Vous pouvez le faire via le gestionnaire de paquets NuGet ou la console du gestionnaire de paquets :
Install-Package MudBlazor
Install-Package IronPdf
Sur votre page Blazor, vous pouvez ajouter des composants MudBlazor pour créer l'interface utilisateur. Voici un formulaire simple 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 = "";
}
Add -= 1
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <!-- Add more TryCast(components, needed) -- > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> @code
"Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> code
If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed) > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick
"Variant.Filled" Color="Color.Primary" OnClick
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed) > <MudButton @Variant="Variant.Filled" Color
"@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]="Variant.Filled" Color
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed) > <MudButton @Variant
"Enter Report Title" bind-Value="@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value
"p-4"> <MudTextField Label="Enter Report Title" bind-Value
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label
"Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]="p-4"> <MudTextField Label
page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]
TryCast(components, needed) -= 1
private String reportTitle = ""
End If
Pour intégrer la fonctionnalité de génération de PDF, nous allons utiliser la méthode GeneratePDF. Cette fonction convertit 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
Dans cet exemple simplifié, RenderHtmlAsPdf prend une chaîne de contenu HTML et la convertit en PDF. Dans une application complète, vous pouvez générer dynamiquement cette chaîne HTML en fonction des entrées de l'utilisateur ou d'autres sources de données.
Voici le résultat du code :
Ce guide vous permet d'utiliser MudBlazor et IronPDF avec .NET 8 pour le développement web. MudBlazor propose des composants d'interface utilisateur pour les applications Blazor, améliorant les interfaces utilisateur avec un minimum de code. IronPDF permet de créer et de manipuler des fichiers PDF, ce qui s'avère très utile pour la gestion des documents dans les applications .NET.
Grâce à des instructions pas à pas, vous apprendrez à intégrer MudBlazor dans vos projets, à utiliser ses composants et à tirer parti d'IronPDF pour générer des PDF à partir de contenus Web. Idéal pour les développeurs débutants et intermédiaires, ce tutoriel vous permet de vous assurer que vous êtes bien équipé pour créer des applications web modernes à l'aide de ces bibliothèques. Pour ceux qui souhaitent explorer IronPDF plus en profondeur, une essai gratuit à partir de 749 $.
9 produits de l'API .NET pour vos documents de bureau