Mudblazor .NET 8（開發者使用指南）

在 .NET 專案中設定 MudBlazor

若要在您的用戶端專案或伺服器專案中使用 MudBlazor，首先，請確保您已安裝 .NET Framework。 然後，依據您的主機模式，在用戶端佈局資料夾或伺服器佈局中建立新的 Blazor 專案。 請使用命令列或 Visual Studio 來完成。 在 Visual Studio 中，選擇 Blazor App 模板。

接下來，將 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!");
    }
}

此代碼會啟動"Click Me"按鈕的建立。 當點選時，它會將訊息記錄到控制台，展示伺服器端渲染。 Variant 和 Color 屬性可自訂按鈕的外觀。

MudBlazor 中的對話窗

MudBlazor 的對話框元件簡化了對話框的建立與管理。 首先，在您的元件中注入 IDialogService ：

@inject IDialogService DialogService

然後，使用下列方法開啟對話框：

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

MyDialog 是代表對話內容的 Razor 元件。 您可以使用 DialogParameters 傳遞參數。

Data Grid

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 提供各種元件。 以下是使用 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 整合了 Material Icons。 若要使用圖示，請新增 MudIcon 元件：

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

此程式碼會顯示警報圖示。 圖示透過提供視覺提示來強化使用者介面。

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

MudBlazor 是 Blazor 的元件庫，內含許多有用的小工具和工具，可用於建置回應式互動 UI。 當您將 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" />
    <!-- Add more components as needed -->
    <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");
}