Razor 组件：开发者如何使用

什么是 Razor 组件

Razor 组件 是 ASP.NET Core 中的一个 UI 框架，它允许开发人员使用 C# 和 HTML 的组合构建网页，能够编写可以在客户端执行的服务器端逻辑。 Razor 组件是 Blazor 框架的一部分，Blazor 是一个客户端 Web UI 框架，通过 WebAssembly (Wasm) 或 SignalR 在浏览器中运行 C# 代码。 Razor 组件为构建现代 Web 应用程序提供了基于组件的架构，其中 UI 被分解为更小的、自包含的组件，这些组件可以组合在一起创建完整的网页。

Razor 组件使用一种称为 Razor 语法的标记语言，它是 C# 和 HTML 的组合，可以无缝集成服务器端和客户端代码。 Razor 组件与其他基于组件的 UI 框架（例如 React、Angular 和 Vue）相似，但其关键区别在于它们用 C# 编写，并且根据托管模型（WebAssembly 或 SignalR）在服务器端或客户端运行。

Razor 组件的优点

Razor 组件为 Web 开发人员提供了多项好处，包括：

开始使用 Razor 组件

要开始使用 Razor 组件，您需要在系统上安装 .NET Core 3.0 或更高版本。 使用 Visual Studio 中的 Blazor 模板或 .NET Core CLI 创建一个新的 ASP.NET Core 项目。

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在此示例中，我们有一个名为“Counter”的 Razor 组件，带有一个按钮，单击时会增加 currentCount 变量。 使用 @code 块定义组件的 C# 代码。

创建自定义 Razor 组件

在项目中创建一个名为“Components”的新文件夹来存储 Razor 组件。

在“Components”文件夹中添加一个新的扩展名为“.razor”的 Razor 组件文件。 此文件将包含您的组件的 C# 和 HTML 代码。

打开 Razor 组件文件，使用 Razor 语法定义您的组件。 Razor 语法允许您在单个文件中组合 C# 和 HTML 代码，从而轻松创建动态网页。 例如，您可以像这样定义一个简单的 Razor 组件：

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

现在可以通过在 HTML 标记中包含组件的标签名称，将您的 Razor 组件用于 Web 应用程序的其他部分。 例如，您可以在主 Razor 页面中这样使用组件：

<MyComponent />

还可以使用组件参数向 Razor 组件传递数据。 组件参数允许您将数据从父组件传递给子组件，实现组件之间的通信。 例如，您可以在 Razor 组件中定义一个参数，如下所示：

@code {
    [Parameter]
    public string Message { get; set; }
}

然后在 Razor 组件类中这样使用组件参数：

<p>@Message</p>

并从父组件向组件传递数据，如下所示：

<MyComponent Message="Hello from parent component!" />

Razor 组件还可以包含可在客户端执行的服务器端逻辑。例如，您可以编写处理逻辑、进行 HTTP 请求、处理用户事件并直接从 Razor 组件中执行其他服务器端操作，使用 C# 代码。 这使您可以创建动态和交互式的网页，而无需编写任何 JavaScript 代码。

创建可重用的 Razor 组件

Razor 组件的一个优点是能够创建可重用的 UI 组件，这些组件可以跨多个页面或应用程序使用。 要创建一个可重用组件，您可以在项目的“Shared”文件夹中创建一个新的“.razor”文件。

例如，假设我们想创建一个显示图书列表的组件。 我们可以在“Shared”文件夹中创建一个新的 BookList.razor 文件，例如：

我们可以这样定义 razor 组件：

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

在此示例中，我们有一个名为 BookList 的组件，它将一组“Book”对象作为 razor 参数。 @foreach 循环用于遍历列表，显示每本书的标题和作者。

在下一部分中，我们将探讨如何使用 IronPDF 和 Razor 组件从 Web 应用程序创建 PDF 文件。

将 IronPDF 与 Razor 组件一起使用

IronPDF 是一个 C# 库，允许开发人员使用 HTML、CSS 和 JavaScript 创建 PDF 文件。 它建立在 Chromium 之上，这是一种开源浏览器，为 Google Chrome 提供支持。 使用 IronPDF，开发人员可以轻松地将 Razor 组件转换为 HTML，并用它们创建 PDF 文件。

IronPDF 擅长转换 HTML 到 PDF，确保布局和样式保持不变。 这对于从基于 Web 的内容（如报告、发票和文档）生成 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

安装 IronPDF

要将 IronPDF 与 Razor 组件一起使用，首先需要安装 IronPDF NuGet 包。 请按照以下步骤操作：

1.在 Visual Studio 中打开您的项目。

2. 右键点击项目并选择“管理 NuGet 包”。
3. 搜索 “IronPDF” 并选择“IronPDF 包”。
4. 单击“安装”以安装该包。

安装 IronPDF NuGet 包后，可以在 Razor 组件应用程序中使用它。

包安装完成后，可以通过使用 IronPdf.ChromePdfRenderer 类从 Razor 组件创建新的 PDF 文件。

要在 ASP.NET Core Razor 组件中创建 PDF 文件，可以将 HTML 语法字符串、HTML 文件或 URL 传递给 IronPdf.ChromePdfRenderer 方法。 例如，假设我们想要创建一个包含计数器增量的 PDF 文件。

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

在此示例中，我们创建一个新的 ChromePdfRenderer 实例。 然后创建一个新的 PdfDocument 类实例，并将字符串传递给 RenderHtmlAsPdf 方法。 最后，通过使用 PdfDocument.SaveAs 方法将生成的 PDF 文件保存到磁盘。

在此示例中，我们修改了我们的计数器组件。 我们修改了计数器按钮的 onClick 功能，单击时将创建一个包含计数器计数的 PDF。

结论

在本文中，我们探讨了如何使用 Razor 组件与 IronPDF 创建 Web 应用程序的 PDF 文件。 我们介绍了 Razor 组件的基础知识、如何安装和使用 IronPDF，并提供了代码示例以帮助您入门。

Razor 组件和 IronPDF 是可以用来创建强大且功能丰富的 Web 应用程序的工具。 通过结合这些技术，开发人员可以创建功能强大且视觉吸引力的 Web 应用程序。

IronPDF 还可用于将 razor 页面和 URL 转换为 PDF，以及读取、创建和操作 PDF 文档。 IronPDF 甚至允许更精细的 PDF 控制，例如向现有或新生成的 PDF 文档添加页眉、页脚、页码、数字签名、密码和高级 PDF 操作功能。 It is free for development but requires a free trial license or commercial license for production.