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

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

發佈 2024年4月29日
分享:

本教程介紹 MudBlazor 和 IronPDF 在使用 .NET 8 建構網頁應用程式的環境中，MudBlazor 是一個專門為 Blazor 專案設計的元件庫。它提供一系列用於構建客戶端和伺服器端 Blazor 應用程式的 UI 元件。IronPDF 是一個庫，它能夠在 .NET 應用程式中創建、操作和讀取 PDF 文件。

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

通過本教程的學習，您將能夠設置一個 Blazor Server 應用程式，整合 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#

此程式碼為按鈕創建一個 builder，該按鈕上顯示“點擊我”。當按下時，它會記錄一條訊息至主控台，以演示伺服器端渲染。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 的組件庫，充滿了對於構建響應式和交互式 UI 有用的小工具和工具。當您將 MudBlazor 的 UI 功能與 IronPDF 的 PDF 生成結合在一起時，您會得到一個強大的工具包。一個常見的用例是：一個 Web 應用允許用戶使用 MudBlazor 組件設計文檔或報告，然後只需點擊一個按鈕，即可使用 IronPDF 將這些設計轉換成可下載的 PDF。

使用範例的代碼示例

讓我們通過一個基本示例，建立一個帶有MudBlazor的UI，然後使用IronPDF將此UI轉換為PDF文檔。

首先，確保你的專案中已安裝了MudBlazor和IronPDF。你可以通過NuGet軟件包管理器或軟件包管理器控制台來完成這個任務：

Install-Package MudBlazor
Install-Package IronPdf

第一步：使用MudBlazor建立UI

在您的Blazor頁面上，您可以添加MudBlazor元件來建立UI。以下是一個使用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#

第二步： 使用 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.10 剛剛發布

免費 NuGet 下載 總下載次數： 10,993,239 查看許可證 >

免費獲取

30天試用序號 立即。

15天試用金鑰 立即。

bullet_checked不需要信用卡或帳戶註冊
試用表格已提交
成功。

您的試用金鑰應該在郵件中。
如果不是，請聯繫
support@ironsoftware.com

bullet_test在生产环境中测试
無浮水印
子彈日曆30天完整
功能性產品
bullet_support24/5 技術支援
試用期間支援

感謝您！

您的授權密鑰已發送到提供的電子郵件地址。聯絡我們

24小時升級優惠：

Save 50% 在一
專業 升級

去 專業 涵蓋10位開發人員
和無限專案。

小時

:

分鐘

:

秒钟

升級到專業版

升級

專業

$600 美元

$299 美元

  • 10 位開發人員
  • 10個地點
  • 10個專案
今天 唯一

5 個 .NET 產品只需 2 個價格

IronPDF IronOCR IronXL IronBarcode IronWebscraper

總套件價值：

$7,192 美元

升級價格

今天
唯一

$499 美元

24小時後

$1,098 美元