.NET 幫助

Mudblazor .NET 8（開發人員如何運作）

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

坎納帕特·烏頓潘

2024年4月29日

本教程在 .NET 8 的背景下介紹MudBlazor和IronPDF用於構建網頁應用程式。 MudBlazor 是一個用於 Blazor 專案的元件庫。它提供了一系列用於構建用戶端和伺服器端 Blazor 應用程式的 UI 元件。 IronPDF 是一個函式庫，使得在 .NET 應用程式中可以創建、操作和讀取 PDF 文件。

我們將介紹如何安裝MudBlazor、使用其元件進行網頁開發，以及整合IronPDF以實現PDF功能。本指南針對 Blazor 和 .NET 的初學者，但對於希望學習 MudBlazor 和 IronPDF 的中級開發人員也將有幫助。

在本教程結束時，您將了解如何設置一個 Blazor 伺服器應用程式，整合 MudBlazor 元件，並使用 IronPDF 處理 PDF 文件。重點在於使用 Visual Studio 建構現代網路應用程式的實務知識。讓我們開始設置環境，並在 .NET 8 中建立一個新項目。

開始使用MudBlazor

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

HTML

此外，添加：

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

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

HTML

此步驟確保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!");
    }
}

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

'INSTANT VB TODO TASK: The following line could not be converted:
<MudButton [Variant]="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick"> Click [Me] </MudButton> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private void ButtonClick()
'	{
'		Console.WriteLine("Button clicked!");
'	}
End If

這段程式碼初始化一個按鈕的建構器，按鈕上顯示「Click Me」。當點擊時，它會將一條訊息記錄到控制台，展示伺服器端渲染。 Variant 和 Color 屬性可自訂按鈕的外觀。

MudBlazor 的功能

MudBlazor 中的對話框

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

@inject IDialogService DialogService

@inject IDialogService DialogService

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@inject IDialogService DialogService

然後，使用以下方法打開對話框：

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

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

Private Sub OpenDialog()
	DialogService.Show(Of MyDialog)("My Dialog", New DialogParameters With {("Parameter1") = "Value1"})
End Sub

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 */;
}

<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 */;
}

'INSTANT VB TODO TASK: The following line could not be converted:
<MudTable Items="@myItems"> (Of HeaderContent) (Of MudTh) Header 1</MudTh> (Of MudTh) Header 2</MudTh> </HeaderContent> (Of RowTemplate) <MudTd DataLabel="Header 1"> context.Item1</MudTd> <MudTd DataLabel="Header 2"> context.Item2</MudTd> </RowTemplate> </MudTable> code
If True Then
	private List(Of MyItemType) myItems =
End If

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

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

'INSTANT VB TODO TASK: The following line could not be converted:
<MudForm Model="@myModel"> <MudTextField Label="Enter text" [For]="@(() => myModel.Text)"></MudTextField> </MudForm> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public class MyModel
'	{
'		public string Text
'		{
'			get;
'			set;
'		}
'	}
	private MyModel myModel = New MyModel()
End If

選項卡

要使用MudTabs來組織內容。為每個標籤定義MudTabPanel：

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<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" />

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<MudIcon Icon="@Icons.Material.Filled.Alarm" />

此代碼顯示一個警報圖標。圖標通過提供視覺提示來增強使用者介面。

IronPDF 和 MudBlazor 的整合

IronPDF 是一個 C# 函式庫，簡化了在 .NET 應用程式中創建、編輯和閱讀 PDF 文件的過程。它的突出之處在於其所需的安裝設置很少，而且在將HTML 轉換為 PDF方面相當簡單明瞭。這在您希望動態生成報表或發票時特別方便。

IronPDF 最好的功能是能將HTML 轉換為 PDF，並保留原始佈局和樣式。它非常適合從網頁內容生成 PDF，如報告、發票和文件。 HTML 檔案、URL 和 HTML 字串都支援轉換為 PDF。

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

		' 1. Convert HTML String to PDF
		Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
		Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
		pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

		' 2. Convert HTML File to PDF
		Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
		Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
		pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

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

MudBlazor 是 Blazor 的一個元件庫，其中包含許多用於構建響應式和互動式用戶介面的有用小部件和工具。當你結合 MudBlazor 的 UI 能力與 IronPDF 的 PDF 生成功能時，你將獲得一個強大的工具包。一個常見的使用案例可能是一個 Web 應用程式，允許使用者使用 MudBlazor 元件設計文件或報告，然後透過點擊按鈕，使用 IronPDF 將這些設計轉換為可下載的 PDF。

使用案例的程式碼範例

讓我們來看看一個基本範例：我們將使用MudBlazor構建UI，然後使用IronPDF將此UI轉換為PDF文件。

首先，確保在您的專案中安裝了MudBlazor和IronPDF。您可以通過 NuGet 套件管理器或套件管理器主控台來完成此操作：

Install-Package MudBlazor
Install-Package IronPdf

步驟 1：使用 MudBlazor 建立 UI

在您的 Blazor 頁面上，您可以添加 MudBlazor 元件來創建用戶界面。以下是使用 MudBlazor 創建的簡易表單：

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

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

Add -= 1
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <!-- Add more TryCast(components, needed) -- > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> @code
"Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> code
If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed)  > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick
"Variant.Filled" Color="Color.Primary" OnClick
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed)  > <MudButton @Variant="Variant.Filled" Color
"@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]="Variant.Filled" Color
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed)  > <MudButton @Variant
"Enter Report Title" bind-Value="@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value
"p-4"> <MudTextField Label="Enter Report Title" bind-Value
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label
"Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]="p-4"> <MudTextField Label
page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]
TryCast(components, needed) -= 1
	private String reportTitle = ""
End If

步驟 2：使用 IronPDF 實作 PDF 生成

現在，為了整合 PDF 生成功能，我們將處理 GeneratePDF 方法。此功能將把我們的 HTML 內容轉換為 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 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

在此簡化範例中，RenderHtmlAsPdf 將一段 HTML 內容的字串轉換成 PDF。在完整應用程式中，您可能會根據使用者輸入或其他資料來源動態生成此 HTML 字串。

Mudblazor .NET 8（對開發者的運作方式）：圖 3

以下是程式碼的輸出：

Mudblazor .NET 8（對開發者來說的運作方式）：圖 4

結論

Mudblazor .NET 8（對於開發人員的運作方式）：圖5

本指南將帶您逐步使用MudBlazor和IronPDF與.NET 8進行網頁開發。 MudBlazor 為 Blazor 應用程式提供 UI 元件，以最少的代碼增強使用者介面。 IronPDF 允許創建和操作 PDF，對 .NET 應用程式中的文件管理而言極其重要。

透過逐步說明，您可以學習將MudBlazor整合到您的項目中，利用其元件，並利用IronPDF從網頁內容生成PDF。本教程非常適合初學者和中級開發者，確保您能夠充分運用這些庫來構建現代網絡應用程式。對於那些有興趣進一步探索IronPDF的人，可以從免費試用開始，價格從$749起。

坎納帕特·烏頓潘

立即與工程團隊聊天

軟體工程師

在成為軟體工程師之前，Kannapat 在日本北海道大學完成了環境資源博士學位。在攻讀學位期間，Kannapat 也成為了車輛機器人實驗室的成員，該實驗室隸屬於生物生產工程學系。2022 年，他利用自己的 C# 技能，加入了 Iron Software 的工程團隊，專注於 IronPDF 的開發。Kannapat 珍視這份工作，因為他可以直接向負責撰寫大部分 IronPDF 程式碼的開發人員學習。除了同儕學習外，Kannapat 還享受在 Iron Software 工作的社交方面。當他不在撰寫程式碼或文件時，Kannapat 通常會在 PS5 上玩遊戲或重看《最後生還者》。

< 上一頁
C# 參考（這對開發人員的工作方式）

下一個 >
C#中的volatile（開發者指南）