1. IronPDF
  2. IronPDF 部落格
  3. .NET 幫助
  4. mudblazor-net-8
.NET 幫助

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

發佈 2024年4月29日
分享:

本教程介紹MudBlazor和IronPDF在 .NET 8 的環境中建構 web 應用程式。 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" />.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
VB   C#

此外，添加：

<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
VB   C#

此步驟確保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
VB   C#

這段程式碼初始化一個按鈕的建構器，按鈕上顯示「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
VB   C#

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

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
VB   C#

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
VB   C#

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
VB   C#

選項卡

要使用標籤來組織內容，請使用 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>
VB   C#

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" />
VB   C#

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

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
VB   C#

將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
VB   C#

步驟 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
VB   C#

在此簡化示例中，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 開始。

< 上一頁
C# 參考（這對開發人員的工作方式）
下一個 >
C#中的volatile（開發者指南）
從NuGet 免費用於開發

安裝與 NuGet nuget.org/packages/IronPdf

PM > Install-Package IronPdf

報告問題

準備開始了嗎？ 版本: 2024.12 剛剛發布

免費 NuGet 下載 總下載次數： 11,622,374 查看許可證 >