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

此代碼創建了一個標有「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傳遞參數。

數據網格

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 的組件庫，擁有大量有用的小部件和工具，用於構建響應式和互動式用戶界面。 當您將 MudBlazor 的 UI 能力與 IronPDF 的 PDF 生成功能相結合時，您將獲得一個強大的工具組。 一個常見的用例可能是允許用戶使用 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");
}

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