1. IronPDF
  2. IronPDF博客
  3. .NET 帮助
  4. Razor组件
.NET 帮助

Razor组件：开发者如何使用

Chipego
奇佩戈-卡琳达
2023年四月19日
分享:

随着多年来网络开发的不断进步，随着现代框架和库的出现，开发人员可以使用功能强大的工具来构建动态和交互式的网页。 近年来获得显著流行的一种技术是Razor组件，它是ASP.NET Core的Blazor框架的一部分。 Razor 组件允许开发人员使用 C# 和 HTML 构建丰富的客户端 Web 应用程序，而无需编写 JavaScript。 在本文中，我们将探讨Razor组件以及如何使用它们创建模块化、可重用和动态的网页。

Razor 组件是什么

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

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

Razor 组件：它如何为开发人员工作：图 2 - 什么是 Blazor 和 Razor 组件？

Razor 组件的好处

Razor 组件为 Web 开发人员提供了以下几个好处：

可重用性

Razor 组件是独立的组件，可以在 web 应用程序内的多个地方或不同项目中轻松重复使用。 这促进了代码的重用性并减少了代码的重复，从而使网络应用程序更加易于维护和扩展。

模块化

Razor 组件遵循基于组件的架构，将用户界面分解成较小的组件，可以组合在一起创建复杂的网页。 这促进了模块化，使开发人员能够将UI和逻辑封装在单个组件中，从而更容易管理和维护代码库。

与 C＃无缝集成

由于Razor组件是用C#编写的，开发人员可以利用他们现有的C#技能和知识来构建Web应用程序。 这消除了学习和编写JavaScript的需求，对已经熟悉C#的开发人员来说，这可以是一个显著的优势。

服务端和客户端执行

Razor 组件可以根据托管模型在服务器端或客户端执行。 这使开发人员能够根据性能、安全性和用户体验等因素，为其应用选择最合适的执行模型。

实时通信

Razor组件可以使用SignalR（一种实时通信库）在客户端和服务器之间建立双向通信。 这使得在网络应用程序中实现实时更新和通知，提供响应和互动的用户体验。

可扩展性

Razor 组件具有高度的可扩展性，允许开发人员创建自定义组件、库和模板。 这使开发人员能够构建符合其网络应用程序特定需求的定制解决方案。

入门 Razor 组件

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

    dotnet new razorcomponent
    dotnet new razorcomponent
SHELL

Razor 组件：它如何为开发人员工作：图 3

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }
    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }
page "/counter" Counter Counter < role="status"> Current count: currentCount Click ReadOnly Property code() As [me]
		private Integer currentCount = 0
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'		private void IncrementCount()
'		{
'		currentCount++;
'	}
End Property
$vbLabelText   $csharpLabel

在这个例子中，我们有一个名为 "Counter" 的 Razor 组件，其中的按钮在点击时会增加currentCount变量。 @code 块用于定义组件的 C# 代码。

Razor 组件：开发人员如何使用：图 4

创建自定义 Razor 组件

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

在 "Components" 文件夹中，添加一个新的后缀名为 ".razor" 的 Razor 组件文件。 该文件将包含您的组件的C#和HTML代码。

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

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }
    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }
Hello, World(Not This is a) ReadOnly Property Component_code() As Razor Implements Component.code
	' C# code for the component
End Property
$vbLabelText   $csharpLabel

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

您也可以使用组件参数将数据传递到您的Razor组件。 组件参数允许您将数据从父组件传递到子组件，实现组件之间的通信。 例如，您可以在 Razor 组件中像这样定义一个参数：

    [Parameter]
    public string Message { get; set; }
    [Parameter]
    public string Message { get; set; }
<Parameter>
Public Property Message() As String
$vbLabelText   $csharpLabel

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

    @Message
    @Message
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@Message
$vbLabelText   $csharpLabel

并像这样将数据从父组件传递到组件：

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

创建可重用的Razor组件

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

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

Razor 组件：开发人员如何使用：图 5 - 生成的类

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

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

    @code {
        [Parameter]
        public List Books { get; set; }
    }
    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

    @code {
        [Parameter]
        public List Books { get; set; }
    }
typeparam Function foreach(var book ByVal Books As in) As Book
			book.Title by book.Author
End Function

	code
	If True Then
		<Parameter>
		public List Books {get;set;}
	End If
$vbLabelText   $csharpLabel

在此示例中，我们有一个名为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，确保布局和样式保持不变。 这在从基于网络的内容生成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
$vbLabelText   $csharpLabel

安装 IronPDF

要在Razor组件中使用IronPDF，我们首先需要安装IronPDF NuGet包。 要执行此操作，请按照以下步骤操作：

  1. 在 Visual Studio 中打开项目。

  2. 右键点击项目，选择“管理 NuGet 程序包”。

  3. 搜索 "IronPDF" 并选择 "IronPDF package"。

  4. 点击“安装”以安装该包。

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

    Razor组件：它是如何为开发人员工作的：图6

    安装包后，您可以使用IronPdf.ChromePDFRenderer类从Razor组件文件创建新的PDF文件：

    要在 ASP.NET Core Razor 组件中创建 PDF 文件，可以将 HTML 语法字符串、HTML 文件或 URL 传递给 IronPdf.ChromePdfRenderer 方法。 例如，我们想要创建一个带有计数器递增的PDF文件。 请考虑以下代码：

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");
    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");
Dim Renderer = New IronPdf.ChromePdfRenderer()
			 Dim pdf As PdfDocument = Renderer.RenderHtmlAsPdf("MY PDF # " & currentCount)
			 pdf.SaveAs("myPdf" & currentCount & ".pdf")
$vbLabelText   $csharpLabel

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

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

结论

在本文中，我们探讨了如何使用Razor 组件和 IronPDF从网络应用程序创建 PDF 文件。 我们已经介绍了Razor组件的基础知识，如何安装和使用IronPDF，并提供了代码示例帮助您开始使用。

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

IronPDF 还可以用于将 razor 页面和 URL 转换为 PDF，以及读取、创建和操作 PDF 文档。 IronPDF 甚至允许对 PDF 进行更细粒度的控制，例如向现有或新生成的 PDF 文档添加页眉、页脚、页码、数字签名、密码和高级 PDF 操作功能。 开发免费，但生产需要免费试用许可证或商业许可证。

Chipego
奇佩戈-卡琳达
  立即与工程团队聊天
软件工程师
Chipego 拥有出色的倾听技巧，这帮助他理解客户问题并提供智能解决方案。他在 2023 年加入 Iron Software 团队，此前他获得了信息技术学士学位。IronPDF 和 IronOCR 是 Chipego 主要专注的两个产品，但他对所有产品的了解每天都在增长，因为他不断找到支持客户的新方法。他喜欢 Iron Software 的合作氛围，公司各地的团队成员贡献他们丰富的经验，以提供有效的创新解决方案。当 Chipego 离开办公桌时，你经常可以发现他在看书或踢足球。
< 前一页
C# PDF NuGet（开发人员工作原理）
下一步 >
MAUI 与 Blazor

报告问题

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

免费开始
NuGet 下载 DLL 下载 Windows 安装程序 开始免费试用
查看许可证 >
Experience the full power of IronPDF 开始免费试用
Textlogo Iron Suite related to Razor组件：开发者如何使用

IronPDF 是 IRON 的一部分套装

10 个 .NET API 产品用于您的办公文档

以2个产品的价格获取10个产品   开始免费试用