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

在.NET專案中設定MudBlazor

要在客戶端或伺服器專案中使用MudBlazor，首先確保已安裝.NET Framework。 然後在客戶端佈局資料夾中或伺服器佈局中建立一個新的Blazor專案，具體取決於您的託管模型。 使用命令行或Visual Studio來完成這一步。 在Visual Studio中，選擇Blazor App範本。

接下來，將MudBlazor加入您的專案。 打開終端機或Package Manager Console並執行以下命令：

Install-Package MudBlazor

此命令將MudBlazor加入您的專案。

安裝MudBlazor後，進入_Imports.razor。 新增以下內容：

@using MudBlazor

這將使MudBlazor元件在您的專案中可用。

在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"字樣的按鈕。 當按下此按鈕時，它會向控制台記錄一條資訊，展示伺服器端渲染。 屬性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的元件庫，充滿了用於建構響應性和互動性UI的實用工具和工具。 當您將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" />

    <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