Mudblazor .NET 8 (jak to działa dla programistów)

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

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 MudBlazora do tego samego pliku, upewniając się, że obsługiwany jest interaktywny tryb renderowania z domyślnymi ustawieniami 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, np. 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!");
    }
}

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 pozwalają dostosować wygląd przycisku.

Okna dialogowe w MudBlazor

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

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

MyDialog to komponent Razor reprezentujący zawartość okna dialogowego. Parametry można przekazywać za pomocą DialogParameters.

Siatka danych

MudBlazor oferuje komponent siatki danych do wyświetlania kolekcji. Obsługuje sortowanie, paginację i filtrowanie. Aby z niego skorzystać, należy powiązać 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 */;
}

Formularze wprowadzania danych

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

Zakładki

Aby uporządkować treść za pomocą zakładek, użyj MudTabs. Zdefiniuj każdą zakładkę za pomocą MudTabPanel:

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

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

Przykład zastosowania połączenia 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

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

    <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