.NET 帮助

Razor组件：开发者如何使用

发布 2023年四月19日

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

Razor 组件是什么

Razor组件Razor Components 是 ASP.NET Core 中的 UI 框架，允许开发人员结合使用 C# 和 HTML 构建网页，并能编写可在客户端执行的服务器端逻辑。Razor Components 是 Blazor 框架的一部分，后者是一个客户端网页 UI 框架，可使用 WebAssembly 在浏览器中运行 C# 代码。(Wasm)或 SignalR. 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

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

VB C#

在这个例子中，我们有一个名为 "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

VB C#

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

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

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

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

<Parameter>
Public Property Message() As String

VB C#

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

    @Message

    @Message

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

VB C#

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

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

VB C#

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

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

使用IronPDF与Razor组件

IronPDF是一个允许开发人员从HTML、CSS和JavaScript创建PDF文件的C#库。它是建立在开源浏览器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

VB C#

安装 IronPDF

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

在 Visual Studio 中打开项目。
右键点击项目，选择“管理 NuGet 程序包”。
搜索 "IronPDF" 并选择 "IronPdf 软件包".
点击“安装”以安装该包。
安装 IronPDF NuGet 包后，我们可以在 Razor 组件应用程序中使用它。
安装包后，您可以使用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")

VB C#

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

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

结论

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

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

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

< 前一页
C# PDF NuGet（开发人员工作原理）

下一步 >
MAUI 与 Blazor