1. IronPDF
  2. IronPDF博客
  3. .NET 帮助
  4. mudblazor-net-8
.NET 帮助

Mudblazor .NET 8（对开发人员的工作方式）

发布 2024年四月29日
分享:

本教程介绍MudBlazor和IronPDF在构建Web应用程序时的.NET 8环境中。 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 应用程序模板。

接下来，将 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, preserving the original layout and style. 非常适合从网页内容生成PDF，例如报告、发票和文档。 HTML文件、URLs和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#

在 C# MudBlazor 中合并 IronPDF 的用例

MudBlazor 是一个用于 Blazor 的组件库，充满了用于构建响应式和交互式用户界面的实用小部件和工具。 当你将MudBlazor的UI功能与IronPDF的PDF生成结合起来时，你就得到了一个强大的工具包。 一个常见的使用情境可能是一个网络应用程序，允许用户使用MudBlazor组件设计文档或报告，然后，只需点击一个按钮，就可以使用IronPDF将这些设计转换成可下载的PDF。

使用案例的代码示例

让我们来看看一个基本示例，其中我们使用MudBlazor构建一个UI，然后使用IronPDF将这个UI转换成PDF文档。

首先，确保在项目中安装了MudBlazor和IronPDF。 您可以通过NuGet包管理器或包管理器控制台来实现这一点：

Install-Package MudBlazor
Install-Package IronPdf

第一步：使用MudBlazor构建用户界面

在您的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#

步骤 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# 参考（开发人员如何使用）
下一步 >
用于开发者的Volatile C#（工作原理）

报告问题

准备开始了吗？ 版本： 2024.12 刚刚发布

免费NuGet下载 总下载量: 11,781,565 查看许可证 >