Mudblazor .NET 8（對於開發者的運行原理）

在.NET專案中設定 MudBlazor

若要在客戶端專案或伺服器專案中使用 MudBlazor，首先請確保已安裝.NET Framework 。 然後，根據您的託管模型，在客戶端佈局資料夾或伺服器佈局中建立一個新的Blazor專案。 可以使用命令列或 Visual Studio 來完成此操作。 在 Visual Studio 中，選擇Blazor應用程式範本。

接下來，將 MudBlazor 新增到您的專案中。 開啟終端機或軟體包管理器控制台，然後執行以下命令：

Install-Package MudBlazor

此命令會將 MudBlazor 新增至您的專案中。

安裝 MudBlazor 後，請前往 _Imports.razor。 添加以下內容：

@using MudBlazor

這樣，MudBlazor 元件就可以在您的專案中使用了。

在 wwwroot/index.html(或伺服器專案的 Host.cshtml)中，將 MudBlazor 的 CSS 和 JS 新增至同一個檔案中，確保支援使用預設範本設定的互動式渲染模式。 請新增以下行：

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

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

此外，還要加上：

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

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

此步驟可確保 MudBlazor 的樣式和功能在您的應用程式中正常運作。

基本程式碼範例：建立一個簡單的 MudBlazor 按鈕

為了示範 MudBlazor 的實際應用，我們為組件添加一個簡單的按鈕。 開啟一個Razor元件文件，例如 Index.razor。 新增以下 MudBlazor 按鈕代碼：

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

這段程式碼會創造一個寫著"點擊我"的按鈕。 點擊後，它會在控制台記錄一條訊息，演示伺服器端渲染。 Variant 和 Color 屬性用於自訂按鈕的外觀。

MudBlazor中的對話框

MudBlazor 的對話方塊元件簡化了對話方塊的建立和管理。 首先，在你的組件中註入 IDialogService：

@inject IDialogService DialogService

然後，使用以下方法開啟對話方塊：

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

MyDialog 是Razor元件，表示對話方塊內容。 你可以使用 DialogParameters 傳遞參數。

資料網格

MudBlazor 提供了一個資料網格元件，用於顯示集合。 它支援排序、分頁和篩選。 要使用它，請將集合綁定到 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 */;
}

Mudblazor .NET 8(開發者使用方法)：圖 1

輸入表單

MudBlazor 為表單輸入提供了各種元件。 以下是使用 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();
}

標籤頁

若要使用標籤組織內容，請使用 MudTabs。 每個製表符用 MudTabPanel 定義：

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

Mudblazor .NET 8(開發者使用指南)：圖 2

圖示

MudBlazor 與 Material Icons 整合。 若要使用圖標，請新增 MudIcon 元件：

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

這段程式碼會顯示一個警報圖示。 圖標透過提供視覺提示來增強使用者介面。

IronPDF與 C# MudBlazor 合併的使用案例

MudBlazor 是一個Blazor元件庫，其中包含大量用於建立響應式和互動式使用者介面的實用小工具和工具。 將 MudBlazor 的 UI 功能與 IronPDF 的 PDF 產生功能結合起來，就能得到一個強大的工具包。 一個常見的用例是，一個 Web 應用程式允許使用者使用 MudBlazor 元件設計文件或報告，然後只需點擊一個按鈕，即可使用IronPDF將這些設計轉換為可下載的 PDF。

用例程式碼範例

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