.NET 帮助

Razor组件:开发者如何使用

发布 2023年四月19日
分享:

多年来,网络开发取得了长足的进步,随着现代框架和库的出现,开发人员可以使用强大的工具来构建动态和交互式网页。近年来大受欢迎的一项技术就是 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 组件 :如何为开发者工作:图2 - 什么是Blazor,什么是Razor组件?

剃刀组件的优点

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

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 组件。

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

现在您可以在网络应用程序的其他部分使用Razor组件,方法是在HTML标记中使用组件的标记名。例如,您可以在 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组件还可以包含可在客户端执行的服务器端逻辑。例如,您可以使用C#代码直接在Razor组件中编写处理逻辑、进行HTTP请求、处理用户事件以及执行其他服务器端操作。这使您无需编写任何JavaScript代码即可创建动态和交互式网页。

创建可重复使用的 Razor 组件

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

例如,我们想创建一个显示书籍列表的组件。我们可以在 "共享 "文件夹中创建一个新的 "BookList.razor "文件,例如

Razor 组件 :如何为开发人员工作:图 5 - 生成的类

我们可以这样定义剃须刀组件:


    @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 的组件,它将一个 "图书 "对象列表作为剃刀参数。@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
VB   C#

安装 IronPDF

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

1.在 Visual Studio 中打开项目。

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

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

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

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

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")
VB   C#

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

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

结论

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

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

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

< 前一页
C# PDF NuGet(开发人员工作原理)
下一步 >
MAUI 与 Blazor

准备开始了吗? 版本: 2024.9 刚刚发布

免费NuGet下载 总下载量: 10,840,061 查看许可证 >