Mudblazor .NET 8 (Comment ça fonctionne pour les développeurs)

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, rendez-vous sur _Imports.razor. Ajoutez ce qui suit :

@using MudBlazor

Cela rend les composants MudBlazor disponibles dans votre projet.

Dans wwwroot/index.html (ou Host.cshtml pour les projets serveur), ajoutez le CSS et le 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, tel que 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!");
    }
}

Ce code initie la création d'un bouton qui dit « Cliquez ici ». 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.

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

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

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 */;
}

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();
}

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>

Icônes

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

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

Cas d'utilisation de la fusion de 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 en utilisant IronPDF.

Exemple de code de cas d'utilisation

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

@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 = "";
}

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