Razor组件：开发者如何使用

多年来，网络开发取得了长足的进步，随着现代框架和库的出现，开发人员可以使用强大的工具来构建动态和交互式网页。近年来大受欢迎的一项技术就是 Razor Components，它是 ASP.NET Core 中 Blazor 框架的一部分。Razor Components 允许开发人员使用 C# 和 HTML 构建丰富的客户端 Web 应用程序，而无需编写 JavaScript。本文将介绍 Razor Components，以及如何使用它们创建模块化、可重用和动态的网页。

什么是剃须刀组件

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

Razor Components使用一种名为Razor语法的标记语言，它是C#和HTML的结合，可实现服务器端和客户端代码的无缝集成。Razor Components与其他基于组件的用户界面框架（如React、Angular和Vue）相似，但主要区别在于它们是用C#编写的，并根据托管模式在服务器端或客户端运行。 (WebAssembly 或 SignalR).

剃刀组件的优点

Razor Components为网页开发者提供了多种优势，包括

可重用性

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

模块化

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

与 C&num 无缝集成；

由于Razor Components是用C#编写的，开发人员可以利用现有的C#技能和知识来构建网络应用程序。这样就不需要学习和编写 JavaScript，这对于已经熟悉 C# 的开发人员来说是一大优势。

服务器端和客户端执行

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

实时通信

Razor 组件可使用实时通信库 SignalR 在客户端和服务器之间建立双向通信。这样就能在网络应用程序中实现实时更新和通知，提供反应灵敏的交互式用户体验。

可扩展性

Razor Components具有高度可扩展性，允许开发人员创建自定义组件、库和模板。这样，开发人员就能建立量身定制的解决方案，以满足其网络应用程序的特定要求。

开始使用 Razor 组件

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

    dotnet new razorcomponent

    @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

在本示例中，我们有一个名为 "Counter "的 Razor 组件，该组件带有一个按钮，点击该按钮后，"currentCount "变量会递增。@code 块用于定义组件的 C# 代码。

创建自定义 Razor 组件

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

在 "组件 "文件夹中，添加一个扩展名为".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

现在您可以在网络应用程序的其他部分使用Razor组件，方法是在HTML标记中使用组件的标记名。例如，您可以在 Razor 主页面中这样使用该标签：

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

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

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

<Parameter>
Public Property Message() As String

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

    @Message

    @Message

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

然后像这样从父组件向组件传递数据：

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

创建可重复使用的 Razor 组件

创建可重复使用的用户界面组件是 Razor Components 的优势之一，它可以在多个页面或应用程序中使用。要创建可重复使用的组件，可以在项目的 "共享 "文件夹下创建一个新的".razor "文件。

例如，我们想创建一个显示书籍列表的组件。我们可以在 "共享 "文件夹中创建一个新的 "BookList.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

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

在下一节中，我们将探讨如何使用 IronPDF 和 Razor Components 从网络应用程序中创建 PDF 文件。

将 IronPDF 与 Razor 组件一起使用

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

安装 IronPDF

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

1.在 Visual Studio 中打开项目。

2.右键单击项目，选择 "管理 NuGet 包"。

3.搜索 "IronPDF "并选择"IronPDF"软件包。

4.点击 "安装 "安装软件包。

安装完 IronPDF NuGet 软件包后，我们就可以在 Razor Components 应用程序中使用它了。

安装软件包后，您可以使用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")

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

在本例中，我们修改了计数器组件。我们修改了计数器按钮的 onClick 函数，点击后将创建一个包含计数器计数的 PDF 文件。

结论

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

Razor Components和IronPDF是强大的工具，可用于创建功能强大且丰富的网络应用程序。通过将这些技术相结合，开发人员可以创建功能强大、外观精美的网络应用程序。

IronPDF 还可用于将 razor 页面和 URL 转换为 PDF，以及阅读、创建和处理 PDF 文档。IronPDF 甚至还可以进行更精细的 PDF 控制，如添加页眉、页脚、页码、数字签名、密码和其他功能。 更多 到现有或新生成的 PDF 文档中。它的开发是免费的，但需要 免费 审判或 商业许可 用于生产。