Mudblazor .NET 8 (Wie es für Entwickler funktioniert)

Dieser Lehrgang führt ein in MudBlazor und IronPDF im Kontext von .NET 8 für die Erstellung von Webanwendungen. MudBlazor ist eine Komponentenbibliothek für Blazor-Projekte. Es bietet eine Reihe von UI-Komponenten für die Erstellung von client- und serverseitigen Blazor-Anwendungen. IronPDF ist eine Bibliothek, die das Erstellen, Bearbeiten und Lesen von PDF-Dokumenten in .NET-Anwendungen ermöglicht.

Wir werden die Installation von MudBlazor, die Verwendung seiner Komponenten für die Webentwicklung und die Integration von IronPDF für die PDF-Funktionalität behandeln. Dieser Leitfaden richtet sich an Anfänger in Blazor und .NET, ist aber auch für fortgeschrittene Entwickler nützlich, die sich mit MudBlazor und IronPDF vertraut machen wollen.

Am Ende dieses Tutorials werden Sie wissen, wie Sie eine Blazor-Server-Anwendung einrichten, MudBlazor-Komponenten integrieren und IronPDF für die Arbeit mit PDF-Dateien verwenden. Der Schwerpunkt liegt auf dem praktischen Wissen für die Erstellung moderner Webanwendungen mit Visual Studio. Beginnen wir damit, unsere Umgebung einzurichten und ein neues Projekt in .NET 8 zu erstellen.

Erste Schritte mit MudBlazor

Einrichten von MudBlazor in .NET-Projekten

Um MudBlazor in Ihrem Client- oder Serverprojekt zu verwenden, müssen Sie zunächst sicherstellen, dass Sie das .NET-Framework installiert haben. Erstellen Sie dann ein neues Blazor-Projekt im Client-Layout-Ordner oder im Server-Layout-Ordner, je nach Ihrem Hosting-Modell. Verwenden Sie dazu die Befehlszeile oder Visual Studio. Wählen Sie in Visual Studio die Blazor-App-Vorlage.

Als nächstes fügen Sie MudBlazor zu Ihrem Projekt hinzu. Öffnen Sie das Terminal oder die Paketmanager-Konsole. Führen Sie den Befehl Install-Package MudBlazor aus. Dieser Befehl fügt MudBlazor zu Ihrem Projekt hinzu.

Nach der Installation von MudBlazor gehen Sie zu _Imports.razor. Hinzufügen @mit MudBlazor. Dadurch werden MudBlazor-Komponenten in Ihrem Projekt verfügbar.

In wwwroot/index.html (oder Host.cshtml für Serverprojekte)fügen Sie CSS und JS von MudBlazor in dieselbe Datei ein, um sicherzustellen, dass der interaktive Rendering-Modus mit Standardvorlageneinstellungen unterstützt wird. Fügen Sie die folgende Zeile ein:

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

Fügen Sie außerdem hinzu:

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

Dieser Schritt stellt sicher, dass die Stile und Funktionalitäten von MudBlazor in Ihrer Anwendung funktionieren.

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

Um MudBlazor in Aktion zu demonstrieren, fügen wir eine einfache Schaltfläche zu einer Komponente hinzu. Öffnen Sie eine Razor-Komponentendatei, z. B. Index.razor. Fügen Sie den folgenden MudBlazor-Schaltflächencode 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!");
    }
}

'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

Dieser Code initiiert die Erstellung eines Builders für eine Schaltfläche mit der Aufschrift "Click Me". Wenn Sie darauf klicken, wird eine Meldung auf der Konsole protokolliert, die das serverseitige Rendering demonstriert. Mit den Eigenschaften Variant und Farbe wird das Aussehen der Schaltfläche angepasst.

Merkmale von MudBlazor

Dialoge in MudBlazor

Die Dialogkomponente von MudBlazor vereinfacht die Erstellung und Verwaltung von Dialogen. Zuerst injizieren Sie den IDialogService in Ihre Komponente:

@inject IDialogService DialogService

@inject IDialogService DialogService

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@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" });
}

Private Sub OpenDialog()
	DialogService.Show(Of MyDialog)("My Dialog", New DialogParameters With {("Parameter1") = "Value1"})
End Sub

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

Datenraster

MudBlazor bietet eine Datengitterkomponente für die Anzeige von Sammlungen. Es unterstützt Sortieren, Blättern und Filtern. Um sie 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 */;
}

'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

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

'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

Registerkarten

Um Inhalte mit Registerkarten zu organisieren, verwenden Sie MudTabs. Definieren Sie jede Registerkarte 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>

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

Icons

MudBlazor ist mit Material Icons integriert. Um ein Symbol zu verwenden, fügen Sie eine MudIcon-Komponente hinzu:

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

Dieser Code zeigt ein Alarmsymbol an. Symbole verbessern Benutzeroberflächen, indem sie visuelle Anhaltspunkte liefern.

Integration von IronPDF und MudBlazor

IronPDF ist eine Bibliothek für C#, die das Erstellen, Bearbeiten und Lesen von PDF-Dateien in .NET-Anwendungen vereinfacht. Es zeichnet sich dadurch aus, dass es nur eine minimale Einrichtung erfordert und ziemlich unkompliziert ist, was die Umwandlung von HTML zu PDFs. Dies kann besonders praktisch sein, wenn Sie Berichte oder Rechnungen dynamisch erstellen möchten.

Die beste Funktion von IronPDF ist seine Fähigkeit zur Umwandlung HTML zu PDFI see you have provided text within an incomplete code block. Please provide the text itself that you need translated into German, and I will ensure to preserve the original layout and style in the translation. Es ist hervorragend geeignet, um PDFs aus Webinhalten wie Berichten, Rechnungen und Dokumentationen zu erstellen. HTML-Dateien, URLs und HTML-Strings werden alle für die Konvertierung in PDFs unterstützt.

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

Anwendungsfall der Zusammenführung von IronPDF mit C# MudBlazor

MudBlazor ist eine Komponentenbibliothek für Blazor, voll mit nützlichen Widgets und Tools für die Erstellung von responsiven und interaktiven UIs. Wenn Sie die UI-Funktionen von MudBlazor mit der PDF-Erzeugung von IronPDF kombinieren, erhalten Sie ein leistungsstarkes Toolkit. Ein gängiger Anwendungsfall könnte eine Webanwendung sein, die es Benutzern ermöglicht, Dokumente oder Berichte mit MudBlazor-Komponenten zu entwerfen und diese Entwürfe dann mit einem Mausklick in herunterladbare PDFs mit IronPDF zu konvertieren.

Code-Beispiel für einen Anwendungsfall

Lassen Sie uns ein einfaches Beispiel durchgehen, bei dem wir eine Benutzeroberfläche mit MudBlazor erstellen und dann IronPDF verwenden, um diese Benutzeroberfläche in ein PDF-Dokument zu konvertieren.

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

Install-Package MudBlazor
Install-Package IronPdf

Schritt 1: Aufbau der Benutzeroberfläche mit MudBlazor

Auf Ihrer Blazor-Seite können Sie MudBlazor-Komponenten hinzufügen, um die Benutzeroberfläche 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 = "";
}

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

Schritt 2: Implementierung der PDF-Erzeugung mit IronPDF

Um die PDF-Erzeugungsfunktionalität zu integrieren, werden wir nun die Methode GeneratePDF verwenden. Diese Funktion wandelt unseren HTML-Inhalt in eine PDF-Datei um:

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

In diesem vereinfachten Beispiel nimmt RenderHtmlAsPdf eine Zeichenkette mit HTML-Inhalt und konvertiert sie in ein PDF-Dokument. In einer vollständigen Anwendung können Sie diese HTML-Zeichenfolge dynamisch auf der Grundlage von Benutzereingaben oder anderen Datenquellen erzeugen.

Hier ist die Ausgabe des Codes:

Schlussfolgerung

Dieser Leitfaden 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, die die Benutzeroberfläche mit minimalem Code verbessern. IronPDF ermöglicht die Erstellung und Bearbeitung von PDF-Dateien und erweist sich damit als unschätzbar wertvoll für die Dokumentenverwaltung in .NET-Anwendungen.

Anhand von Schritt-für-Schritt-Anleitungen lernen Sie, MudBlazor in Ihre Projekte zu integrieren, seine Komponenten zu nutzen und IronPDF zur Erzeugung von PDFs aus Webinhalten einzusetzen. Dieses Tutorial ist sowohl für Anfänger als auch für fortgeschrittene Entwickler geeignet und stellt sicher, dass Sie gut gerüstet sind, um mit diesen Bibliotheken moderne Webanwendungen zu erstellen. Für diejenigen, die IronPDF weiter erforschen möchten, gibt es eine kostenloser Test beginnen bei 749 $.