Ten samouczek przedstawia MudBlazor i IronPDF w kontekście platformy .NET 8 do tworzenia aplikacji internetowych. MudBlazor to biblioteka komponentów dla projektów Blazor. Zapewnia szereg komponentów interfejsu użytkownika do tworzenia aplikacji Blazor po stronie klienta i serwera. IronPDF to biblioteka umożliwiająca tworzenie, edycję i odczyt dokumentów PDF w aplikacjach .NET.

Omówimy, jak zainstalować MudBlazor, wykorzystać jego komponenty do tworzenia stron internetowych oraz zintegrować IronPDF w celu uzyskania funkcjonalności PDF. Ten przewodnik jest skierowany do początkujących użytkowników Blazor i .NET, ale będzie również przydatny dla programistów o średnim poziomie zaawansowania, którzy chcą dowiedzieć się więcej o MudBlazor i IronPDF.

Po zakończeniu tego samouczka dowiesz się, jak skonfigurować aplikację Blazor Server, zintegrować komponenty MudBlazor oraz korzystać z IronPDF do pracy z plikami PDF. Nacisk kładziony jest na praktyczną wiedzę dotyczącą tworzenia nowoczesnych aplikacji internetowych przy użyciu Visual Studio. Zacznijmy od skonfigurowania naszego środowiska i utworzenia nowego projektu w .NET 8.

Pierwsze kroki z MudBlazor

Konfiguracja MudBlazor w projektach .NET

Aby użyć MudBlazor w projekcie klienckim lub serwerowym, najpierw upewnij się, że masz zainstalowany .NET Framework. Następnie utwórz nowy projekt Blazor w folderze układu klienta lub układu serwera, w zależności od modeli hostingu. W tym celu należy użyć wiersza poleceń lub programu Visual Studio. W programie Visual Studio wybierz szablon aplikacji Blazor.

Następnie dodaj MudBlazor do swojego projektu. Otwórz terminal lub konsolę menedżera pakietów i uruchom polecenie:

Install-Package MudBlazor

To polecenie dodaje MudBlazor do Twojego projektu.

Po zainstalowaniu MudBlazor, przejdź do _Imports.razor. Dodaj następujące informacje:

@using MudBlazor

@using MudBlazor

Dzięki temu komponenty MudBlazor będą dostępne w Twoim projekcie.

W wwwroot/index.html (lub Host.cshtml dla projektów serwerowych), dodaj CSS i JS MudBlazor do tego samego pliku, zapewniając wsparcie trybu renderowania interaktywnego z ustawieniami domyślnego szablonu. Należy uwzględnić następujący wiersz:

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

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

Dodaj również:

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

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

Ten krok gwarantuje, że style i funkcje MudBlazor będą działać w Twojej aplikacji.

Podstawowy przykład kodu: Tworzenie prostego przycisku MudBlazor

Aby zademonstrować działanie MudBlazor, dodajmy prosty przycisk do komponentu. Otwórz plik komponentu Razor, taki jak Index.razor. Dodaj następujący kod przycisku 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!");
    }
}

Ten kod inicjuje utworzenie przycisku z napisem "Click Me". Po kliknięciu rejestruje komunikat w konsoli, demonstrując renderowanie po stronie serwera. Właściwości Variant i Color dostosowują wygląd przycisku.

Funkcje MudBlazor

Okna dialogowe w MudBlazor

Komponent dialogowy MudBlazor ułatwia tworzenie okien dialogowych i zarządzanie nimi. Najpierw wstrzyknij IDialogService do swojego komponentu:

@inject IDialogService DialogService

@inject IDialogService DialogService

Następnie użyj następującej metody, aby otworzyć okno dialogowe:

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 to komponent Razor reprezentujący zawartość okna dialogowego. Możesz przekazać parametry za pomocą DialogParameters.

Siatka danych

MudBlazor oferuje komponent siatki danych do wyświetlania kolekcji. Obsługuje sortowanie, paginację i filtrowanie. Aby go użyć, powiąż kolekcję z właściwością 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 */;
}

Formularze wprowadzania danych

W zakresie elementów formularzy MudBlazor udostępnia różne komponenty. Oto przykład użycia 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();
}

Zakładki

Aby zorganizować zawartość przy użyciu kart, użyj MudTabs. Zdefiniuj każdą kartę z 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>

Ikony

MudBlazor integruje się z Material Icons. Aby użyć ikony, dodaj komponent MudIcon:

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

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

Ten kod wyświetla ikonę alarmu. Ikony wzbogacają interfejsy użytkownika, dostarczając wskazówek wizualnych.

Integracja IronPDF i MudBlazor

IronPDF to biblioteka dla języka C#, która upraszcza proces tworzenia, edycji i odczytu plików PDF w aplikacjach .NET. Wyróżnia się tym, że wymaga minimalnej konfiguracji i jest dość prosty w zakresie konwersji HTML do PDF. Może to być szczególnie przydatne, gdy chcesz dynamicznie generować raporty lub faktury.

Największą zaletą IronPDF jest możliwość konwersji plików HTML do formatu PDF z zachowaniem oryginalnego układu i stylu. Świetnie nadaje się do generowania plików PDF z treści internetowych, takich jak raporty, faktury i dokumentacja. Pliki HTML, adresy URL i ciągi znaków HTML są obsługiwane w celu konwersji do formatu 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");
    }
}

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

Przypadek użycia scalania IronPDF z C# MudBlazor

MudBlazor to biblioteka komponentów dla Blazora, pełna przydatnych widżetów i narzędzi do tworzenia responsywnych i interaktywnych interfejsów użytkownika. Połączenie możliwości interfejsu użytkownika MudBlazor z funkcją generowania plików PDF w IronPDF daje w rezultacie potężny zestaw narzędzi. Typowym przykładem zastosowania może być aplikacja internetowa, która pozwala użytkownikom projektować dokumenty lub raporty przy użyciu komponentów MudBlazor, a następnie, jednym kliknięciem, konwertować te projekty na pliki PDF do pobrania za pomocą IronPDF.

Przykładowy kod przedstawiający przypadek użycia

Przejdźmy przez podstawowy przykład, w którym tworzymy interfejs użytkownika za pomocą MudBlazor, a następnie używamy IronPDF do konwersji tego interfejsu do dokumentu PDF.

Najpierw upewnij się, że w projekcie masz zainstalowane MudBlazor i IronPDF. Można to zrobić za pomocą menedżera pakietów NuGet lub konsoli menedżera pakietów:

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

Krok 1: Tworzenie interfejsu użytkownika za pomocą MudBlazor

Na stronie Blazor można dodać komponenty MudBlazor w celu utworzenia interfejsu użytkownika. Oto prosty formularz utworzony za pomocą 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 = "";
}

Krok 2: Wdrażanie generowania plików PDF za pomocą IronPDF

Teraz, aby zintegrować funkcjonalność generowania PDF, obsłużymy metodę GeneratePDF. Ta funkcja przekształci naszą zawartość HTML na plik 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

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

W tym uproszczonym przykładzie, RenderHtmlAsPdf przyjmuje ciąg treści HTML i przekształca go w PDF. W pełnej aplikacji ten ciąg HTML można generować dynamicznie na podstawie danych wprowadzonych przez użytkownika lub innych źródeł danych.

Oto wynik działania kodu:

Wnioski

Ten przewodnik przeprowadzi Cię przez proces korzystania z MudBlazor i IronPDF z .NET 8 do tworzenia stron internetowych. MudBlazor oferuje komponenty interfejsu użytkownika dla aplikacji Blazor, wzbogacając interfejsy użytkownika przy minimalnym nakładzie kodu. IronPDF umożliwia tworzenie i edycję plików PDF, co okazuje się nieocenione w zarządzaniu dokumentami w aplikacjach .NET.

Dzięki instrukcjom krok po kroku nauczysz się integrować MudBlazor ze swoimi projektami, wykorzystywać jego komponenty oraz korzystać z IronPDF do generowania plików PDF z treści internetowych. Ten samouczek, idealny zarówno dla początkujących, jak i średnio zaawansowanych programistów, zapewni Ci odpowiednie przygotowanie do tworzenia nowoczesnych aplikacji internetowych przy użyciu tych bibliotek. Dla tych, którzy są zainteresowani dalszym badaniem IronPDF, bezpłatna wersja próbna zaczyna się od $999.