在实际环境中测试
在生产中测试无水印。
随时随地为您服务。
本教程介绍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 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" />.
此外,还要加上
<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>.
此步骤可确保 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 的对话框组件简化了对话框的创建和管理。 首先,在您的组件中注入 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 提供了各种组件。 这是使用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 集成了 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是一个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
MudBlazor 是一个用于 Blazor 的组件库,充满了用于构建响应式和交互式用户界面的实用小部件和工具。 当你将MudBlazor的UI功能与IronPDF的PDF生成结合起来时,你就得到了一个强大的工具包。 一个常见的使用情境可能是一个网络应用程序,允许用户使用MudBlazor组件设计文档或报告,然后,只需点击一个按钮,就可以使用IronPDF将这些设计转换成可下载的PDF。
让我们来看看一个基本示例,其中我们使用MudBlazor构建一个UI,然后使用IronPDF将这个UI转换成PDF文档。
首先,确保在项目中安装了MudBlazor和IronPDF。 您可以通过NuGet包管理器或包管理器控制台来实现这一点:
Install-Package MudBlazor
Install-Package IronPdf
在您的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
现在,为了集成 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 和 IronPDF 与 .NET 8 进行网页开发。 MudBlazor 为 Blazor 应用程序提供 UI 组件,以最少的代码增强用户界面。 IronPDF 允许创建和操作 PDF,对于 .NET 应用程序中的文档管理非常有价值。
通过一步步的说明,您将学习如何将MudBlazor集成到您的项目中,使用其组件,并利用IronPDF从网页内容生成PDF。 适合初学者和中级开发人员,本教程确保您具备使用这些库构建现代网络应用程序的充分准备。 对于那些有兴趣进一步探索IronPDF的人来说,免费试用从 $749 开始。