.NET 帮助

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

发布 2024年四月29日

本教程介绍 MudBlazor 和 IronPDF MudBlazor 是一个用于 Blazor 项目的组件库。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（点击我）"的按钮创建创建器。点击后，它会向控制台记录一条信息，演示服务器端的渲染。变量和颜色属性可自定义按钮的外观。

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#

我的对话框是一个代表对话框内容的 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#

图标

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 文件的过程。它的突出之处在于只需极少的设置，而且在转换 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 的用户界面功能与 IronPDF 的 PDF 生成功能相结合时，您将获得一个强大的工具包。一个常见的用例可以是允许用户使用 MudBlazor 组件设计文档或报告的网络应用程序，然后只需点击一下按钮，就可以使用 IronPDF 将这些设计转换为可下载的 PDF。

用例代码示例

让我们通过一个基本示例，用 MudBlazor 创建用户界面，然后使用 IronPDF 将用户界面转换为 PDF 文档。

首先，确保项目中已安装 MudBlazor 和 IronPDF。您可以通过 NuGet 软件包管理器或软件包管理器控制台进行安装：

Install-Package MudBlazor
Install-Package IronPdf

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

在 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 应用程序提供用户界面组件，以最少的代码增强用户界面。IronPDF 允许创建和处理 PDF，这对于在 .NET 应用程序中进行文档管理非常有价值。

通过循序渐进的指导，您将学会将 MudBlazor 集成到您的项目中、使用其组件以及利用 IronPDF 从网页内容生成 PDF。本教程是初学者和中级开发人员的理想之选，可确保您具备使用这些库构建现代网络应用程序的能力。对于有兴趣进一步了解 IronPDF 的读者，我们还提供了一个免费试用 749 美元起。

< 前一页
C# 参考（开发人员如何使用）

下一步 >
用于开发者的Volatile C#（工作原理）