Razor组件 vs Razor页面

Question

在Visual Studio的菜单中，有两个选项，Razor组件和Razor页面。如果在Razor组件的顶部添加@page指令，则该组件将有自己的地址。那么它们在实践中有什么区别呢？

- Happy Developer

Answer 1

介绍

在启动dotnet web应用程序时，您可以在几种类型的应用程序之间进行选择，其中包括mvc、webapp和Blazor：

dani@localhost ~ $ dotnet new
Templates                                         Short Name               Language          Tags                  
--------------------------------------------      -------------------      ------------      ----------------------
Razor Page                                        page                     [C#]              Web/ASP.NET           
...
Blazor Server App                                 blazorserver             [C#]              Web/Blazor            
Blazor WebAssembly App                            blazorwasm               [C#]              Web/Blazor/WebAssembly
...
ASP.NET Core Web App (Model-View-Controller)      mvc                      [C#], F#          Web/MVC               
ASP.NET Core Web App                              webapp                   [C#]              Web/MVC/Razor Pages   
...

如果你创建了一个webapp，你可以看到razor页面:

dani@localhost pp2 $ tree
.
├── appsettings.Development.json
├── appsettings.json
├── obj
│   ├── ...
├── Pages
│   ├── Error.cshtml                <-- Razor Page
│   ├── Error.cshtml.cs             <-- Razor Page
│   ├── Index.cshtml
│   ├── Index.cshtml.cs
│   ├── Privacy.cshtml
│   ├── Privacy.cshtml.cs
│   ├── Shared
│   │   ├── _Layout.cshtml
│   │   └── _ValidationScriptsPartial.cshtml
│   ├── _ViewImports.cshtml
│   └── _ViewStart.cshtml
├── ...

引用自ASP.NET Core中的Razor Pages入门:

Razor Pages可以使编写面向页面的场景比使用控制器和视图更加容易和高效。

如您所见，一个Razor页面是一个cshtml文件(模板)加上一个cs文件(行为)，页面被呈现为HTML并发送到浏览器。

还有另一种类型的应用程序，Blazor。 引用自ASP.NET Core Blazor入门:

Blazor是一个用.NET构建交互式客户端Web UI的框架

重要术语“交互式”，不仅渲染HTML，而且还是一个使页面具有交互性的语言（不仅在服务器上渲染HTML并将其发送到客户端）

Razor组件与Razor页面

• Razor页面通常用于在ASP.NET Core Web应用程序上生成HTML页面并发送到客户端
• Razor组件（“Blazor组件”）是用于交互式使用的Blazor应用程序组件（可以在Blazor Server应用程序和Blazor WebAssembly应用程序中运行）。

备注

• 请参阅下面的Henk答案，“Razor Component”一词没有逻辑，按照Henk（和我的）意见应该是“Blazor Component”，因为它仅在Blazor应用程序上运行。
• Razor组件供应商将这些组件命名为“Blazor组件”：https://www.syncfusion.com/blazor-components，https://www.telerik.com/blazor-ui，...
• 请注意，当您向Blazor组件添加@page指令时，它变成了可路由的（类似于“blazor页面”），但它仍然是一个组件。
• 您可以在Web应用程序中同时添加Razor组件（“Blazor组件”）和Razor页面：在现有的MVC应用程序中使用Blazor组件 by Chris Sainty。

- dani herrera

---

感谢您的回答和其他答案。我在我的调试输出项目中找不到g.cs，我正在使用.NET 5.0。 - Happy Developer

我创建了一个空的 Razor 页面，但是在它的 g.cs 文件中没有 Microsoft.AspNetCore.Components.ComponentBase。@dani - Happy Developer

检查答案：但是您的助手谈论的是Razor页面（而不是不可路由的Blazor组件）。 Razor页面是Model-View-Controller MVC架构的一部分。 - dani herrera

所以请删除或移动您的第一行（因为它不是我的问题，它会使您的答案含糊不清），然后我接受您的答案。 - Happy Developer

我会重写整个答案以澄清并与问题相匹配。 - dani herrera

Answer 2

Razor组件是.razor文件中的Blazor组件的非正式模板名称。

Blazor页面是具有@page "/..."指令的Blazor组件(.razor)。

请注意，图标是正确的。只需选择紫色的Bl@zor即可。

- H H

---

现在我们可以在 Razor 组件中添加 @page。在我的 Visual Studio 中，Blazor 页面是用 .cshtml 创建的。 - Happy Developer

不，Razor页面放置在.cshtml中，并且可以（必须）有一个没有路由的@page。 - H H

@HappyDeveloper，我猜Henk所说的术语“Razor Component”是存在的（也出现在MS文档中），但这个术语没有逻辑，正确的名称可能是“blazor component”。所有组件供应商和项目都将组件称为“Blazor Components”。 - dani herrera

Answer 3

这是两者之间功能的比较：

Razor Page - 可以定义页面的 @model，强类型视图 - 不能定义 @model，但可以在 @code{} 块中定义多个类，然后绑定到 HTML 元素

Razor Component - 可以使用 @code{} 块来处理页面事件，如 OnClick、OnInitialize、OnParameterSet、OnAfterRender，其中像 OnClick 这样的事件不需要页面重新加载

@code 块 - 代码块仅在页面渲染时运行 - 代码块可以根据您定义的事件（OnClick、OnKeyDown 等）在整个页面生命周期中使用

- Jerdine Sabio