In the menu of visual studio, there are two options, Razor Component, and Razor Page, If one adds @page directive on the top of the razor component, it has its own address.
So what is the difference between them in practice?
Razor Component vs Razor Page
Viewed 7153
2 Answers
Introduction
When you start a dotnet web app, you can choose between several types of apps, among them, mvc, webapp and 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
...
If you create a webapp you can see razor pages:
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
├── ...
Quoting Introduction to Razor Pages in ASP.NET Core:
Razor Pages can make coding page-focused scenarios easier and more productive than using controllers and views.
As you can see on tree structure, a razor page is a cshtmlfile (template) plus acs` file (behavior). The page is rendered as html and send to navigator.
Exists another kind of apps, blazor. Quoting Introduction to ASP.NET Core Blazor:
Blazor is a framework for building interactive client-side web UI with .NET
Important term "interactive", not only render html, is a language to make page interactive (no just render html on server and send it to client)
Razor Component vs Razor Page
- Razor page is tipically to generate an html page on server and send to client on a ASP.NET Core Web App
- Razor component ("Blazor Component") is a component for a Blazor app (can run in Blazor Server App and also in Blazor WebAssembly App) intended for interactive usage.
Notes
- Check Henk's answer below, the term "Razor Component" has no logic, in Henk's opinion (and mine) should be "Blazor Component" because it runs only on Blazor apps.
- Razor components vendors named this components as "Blazor Components" : https://www.syncfusion.com/blazor-components , https://www.telerik.com/blazor-ui, ...
- Notice that when you add
@pagedirective to a Blazor component it becomes enroutable (like a "blazor page"), but it is still a component. - You can add both Razor Components ("Blazor Components") and Razor pages to a webapp: Using Blazor Components In An Existing MVC Application by Chris Sainty.
Razor Component is the illogical template name for a Blazor Component, in a .razor file.
A Blazor Page is a Blazor Component (.razor) that has a @page "/..." directive.
Note that the icons are correct. Just go for the purple Bl@zor thing.
Related