Mudblazor .NET 8 (Funktionsweise für Entwickler)

Einrichten von MudBlazor in .NET-Projekten

Um MudBlazor in Ihrem Client- oder Serverprojekt zu verwenden, stellen Sie zunächst sicher, dass das .NET Framework installiert ist. Erstellen Sie dann ein neues Blazor-Projekt im Client-Layout-Ordner oder Server-Layout, je nach Ihren Hosting-Modellen. Verwenden Sie dazu die Befehlszeile oder Visual Studio. Wählen Sie in Visual Studio die Vorlagenoption Blazor App.

Fügen Sie dann MudBlazor zu Ihrem Projekt hinzu. Öffnen Sie das Terminal oder die Paket-Manager-Konsole und führen Sie den Befehl aus:

Install-Package MudBlazor

Dieser Befehl fügt MudBlazor zu Ihrem Projekt hinzu.

Nach der Installation von MudBlazor gehen Sie zu _Imports.razor. Fügen Sie Folgendes hinzu:

@using MudBlazor

Dies macht MudBlazor-Komponenten in Ihrem Projekt verfügbar.

Fügen Sie in wwwroot/index.html (oder Host.cshtml für Serverprojekte) das CSS und JS von MudBlazor zu derselben Datei hinzu, um sicherzustellen, dass der interaktive Rendermodus mit den Standardeinstellungen der Vorlage unterstützt wird. Schließen Sie die folgende Zeile ein:

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

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

Fügen Sie hinzu:

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

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

Dieser Schritt stellt sicher, dass die Styles und Funktionen von MudBlazor in Ihrer App funktionieren.

Ein einfaches Code-Beispiel: Erstellen einer einfachen MudBlazor-Schaltfläche

Um MudBlazor in Aktion zu demonstrieren, fügen wir einer Komponente einen einfachen Button hinzu. Öffnen Sie eine Razor-Komponentendatei wie Index.razor. Fügen Sie den folgenden MudBlazor-Button-Code hinzu:

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

Dieser Code initiiert die Erstellung eines Buttons mit der Aufschrift "Click Me". Beim Klicken wird eine Nachricht in der Konsole protokolliert, die das Serverseitige Rendering demonstriert. Die Eigenschaften Variant und Color passen das Erscheinungsbild des Buttons an.

Dialoge in MudBlazor

Die Dialogkomponente von MudBlazor vereinfacht das Erstellen und Verwalten von Dialogen. Zuerst injizieren Sie IDialogService in Ihre Komponente:

@inject IDialogService DialogService

Verwenden Sie dann die folgende Methode, um einen Dialog zu öffnen:

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

MyDialog ist eine Razor-Komponente, die den Dialoginhalt darstellt. Sie können Parameter mit DialogParameters übergeben.

Datenraster

MudBlazor bietet eine Datenrasterkomponente zur Anzeige von Sammlungen. Es unterstützt Sortierung, Pagination und Filterung. Um es zu verwenden, binden Sie eine Sammlung an die Eigenschaft 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 */;
}

Eingabeformulare

Für Formulareingaben bietet MudBlazor verschiedene Komponenten. Hier ist ein Beispiel mit 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();
}

Registerkarten

Um Inhalte mit Tabs zu organisieren, verwenden Sie MudTabs. Definieren Sie jeden Tab mit MudTabPanel:

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

Symbole

MudBlazor integriert Material Icons. Um ein Icon zu verwenden, fügen Sie eine MudIcon Komponente hinzu:

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

Dieser Code zeigt ein Alarm-Icon an. Icons verbessern Benutzeroberflächen, indem sie visuelle Hinweise bieten.

Benutzungsfall der Zusammenführung von IronPDF mit C# MudBlazor

MudBlazor ist eine Komponentenbibliothek für Blazor, voller nützlicher Widgets und Tools zum Erstellen von responsiven und interaktiven UIs. Wenn Sie MudBlazors UI-Fähigkeiten mit der PDF-Generierung von IronPDF kombinieren, erhalten Sie ein leistungsstarkes Toolkit. Ein häufiger Anwendungsfall könnte eine Webanwendung sein, die es Benutzern ermöglicht, Dokumente oder Berichte mit MudBlazor-Komponenten zu entwerfen und dann mit einem Klick auf eine Schaltfläche diese Entwürfe in herunterladbare PDFs mit IronPDF zu konvertieren.

Code-Beispiel für Anwendungsfall

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