Dieses Tutorial führt in MudBlazor und IronPDF im Kontext von .NET 8 zur Erstellung von Webanwendungen ein. MudBlazor ist eine Komponentenbibliothek für Blazor-Projekte. Es bietet eine Reihe von UI-Komponenten zum Erstellen von Client- und Server-seitigen Blazor-Anwendungen. IronPDF ist eine Bibliothek, die das Erstellen, Bearbeiten und Lesen von PDF-Dokumenten in .NET-Anwendungen ermöglicht.

Wir werden behandeln, wie man MudBlazor installiert, seine Komponenten für die Webentwicklung nutzt und IronPDF für die PDF-Funktionalität integriert. Dieses Handbuch richtet sich an Anfänger in Blazor und .NET, wird aber auch für fortgeschrittene Entwickler nützlich sein, die sich über MudBlazor und IronPDF informieren möchten.

Am Ende dieses Tutorials wissen Sie, wie Sie eine Blazor-Server-Anwendung einrichten, MudBlazor-Komponenten integrieren und IronPDF für die Arbeit mit PDF-Dateien verwenden. Der Fokus liegt auf praktischem Wissen für den Aufbau moderner Webanwendungen mit Visual Studio. Beginnen wir mit dem Einrichten unserer Umgebung und der Erstellung eines neuen Projekts in .NET 8.

Einstieg mit MudBlazor

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

@using MudBlazor

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

Fügen Sie in wwwroot/index.html (oder Host.cshtml für Serverprojekte) MudBlazors CSS und JS in die gleiche Datei ein und stellen Sie sicher, dass der interaktive Render-Modus mit den Standard-Template-Einstellungen 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 zum Beispiel 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!");
    }
}

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

Funktionen von MudBlazor

Dialoge in MudBlazor

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

@inject IDialogService DialogService

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

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

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

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

<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" />

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

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

Integration von IronPDF und MudBlazor

IronPDF ist eine Bibliothek für C#, die den Prozess des Erstellens, Editierens und Lesens von PDF-Dateien innerhalb von .NET-Anwendungen vereinfacht. Es zeichnet sich dadurch aus, dass es kaum Einrichtung erfordert und es recht einfach ist, von HTML zu PDFs zu konvertieren. Dies kann besonders nützlich sein, wenn Sie Berichte oder Rechnungen dynamisch generieren möchten.

Das beste Merkmal von IronPDF ist seine Fähigkeit, HTML zu PDF zu konvertieren und das ursprüngliche Layout und den Stil beizubehalten. Es eignet sich hervorragend für die Erstellung von PDFs aus Webinhalten wie Berichten, Rechnungen und Dokumentationen. HTML-Dateien, URLs und HTML-Strings werden alle zur Konvertierung in PDFs unterstützt.

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

Fallstudie zur Integration 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

Gehen wir nun durch ein einfaches Beispiel, in dem wir eine UI mit MudBlazor erstellen und dann IronPDF verwenden, um diese UI in ein PDF-Dokument zu konvertieren.

Stellen Sie zunächst sicher, dass MudBlazor und IronPDF in Ihrem Projekt installiert sind. Dies können Sie über den NuGet-Paketmanager oder die Paket-Manager-Konsole tun:

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

Schritt 1: Erstellen der Benutzeroberfläche mit MudBlazor

Auf Ihrer Blazor-Seite können Sie MudBlazor-Komponenten hinzufügen, um die UI zu erstellen. Hier ist ein einfaches Formular, das mit MudBlazor erstellt wurde:

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

Schritt 2: Implementieren der PDF-Erzeugung mit IronPDF

Nun werden wir zur Integration der PDF-Generierungsfunktionalität die Methode GeneratePDF behandeln. Diese Funktion konvertiert unseren HTML-Inhalt in eine PDF-Datei:

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

In diesem vereinfachten Beispiel nimmt RenderHtmlAsPdf eine Zeichenkette mit HTML-Inhalt und konvertiert sie in ein PDF. In einer vollständigen Anwendung würden Sie diesen HTML-String möglicherweise dynamisch basierend auf Benutzereingaben oder anderen Datenquellen generieren.

Hier ist die Ausgabe des Codes:

Abschluss

Dieses Handbuch führt Sie durch die Verwendung von MudBlazor und IronPDF mit .NET 8 für die Webentwicklung. MudBlazor bietet UI-Komponenten für Blazor-Anwendungen und verbessert Benutzeroberflächen mit minimalem Code. IronPDF ermöglicht die Erstellung und Bearbeitung von PDF-Dateien, was für das Dokumentenmanagement in .NET-Apps von unschätzbarem Wert ist.

Durch schrittweise Anleitungen lernen Sie, wie Sie MudBlazor in Ihre Projekte integrieren, dessen Komponenten nutzen und IronPDF verwenden, um PDFs aus Webinhalten zu generieren. Ideal für Anfänger sowie fortgeschrittene Entwickler sorgt dieses Tutorial dafür, dass Sie gut gerüstet sind, um moderne Webanwendungen mit diesen Bibliotheken zu erstellen. Für diejenigen, die daran interessiert sind, IronPDF weiter zu erkunden, beginnt eine kostenlose Testversion von $999.