---
title: Integrate ASP.NET Core Razor components into Razor Pages and MVC apps
author: guardrex
description: Learn about data binding scenarios for components and DOM elements in Blazor apps.
monikerRange: '>= aspnetcore-3.1'
ms.author: riande
ms.custom: mvc
ms.date: 04/25/2020
no-loc: ["ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
uid: blazor/components/integrate-components-into-razor-pages-and-mvc-apps
---
# Integrate ASP.NET Core Razor components into Razor Pages and MVC apps
By [Luke Latham](https://github.com/guardrex) and [Daniel Roth](https://github.com/danroth27)
Razor components can be integrated into Razor Pages and MVC apps. When the page or view is rendered, components can be prerendered at the same time.
After [preparing the app](#prepare-the-app), use the guidance in the following sections depending on the app's requirements:
* Routable components: For components that are directly routable from user requests. Follow this guidance when visitors should be able to make an HTTP request in their browser for a component with an [`@page`](xref:mvc/views/razor#page) directive.
* [Use routable components in a Razor Pages app](#use-routable-components-in-a-razor-pages-app)
* [Use routable components in an MVC app](#use-routable-components-in-an-mvc-app)
* [Render components from a page or view](#render-components-from-a-page-or-view): For components that aren't directly routable from user requests. Follow this guidance when the app embeds components into existing pages and views with the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper).
## Prepare the app
An existing Razor Pages or MVC app can integrate Razor components into pages and views:
1. In the app's layout file (`_Layout.cshtml`):
* Add the following `` tag to the `` element:
```html
```
The `href` value (the *app base path*) in the preceding example assumes that the app resides at the root URL path (`/`). If the app is a sub-application, follow the guidance in the *App base path* section of the article.
The `_Layout.cshtml` file is located in the *Pages/Shared* folder in a Razor Pages app or *Views/Shared* folder in an MVC app.
* Add a `
```
The framework adds the *blazor.server.js* script to the app. There's no need to manually add the script to the app.
1. Add an `_Imports.razor` file to the root folder of the project with the following content (change the last namespace, `MyAppNamespace`, to the namespace of the app):
```razor
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using MyAppNamespace
```
1. In `Startup.ConfigureServices`, register the Blazor Server service:
```csharp
services.AddServerSideBlazor();
```
1. In `Startup.Configure`, add the Blazor Hub endpoint to `app.UseEndpoints`:
```csharp
endpoints.MapBlazorHub();
```
1. Integrate components into any page or view. For more information, see the [Render components from a page or view](#render-components-from-a-page-or-view) section.
## Use routable components in a Razor Pages app
*This section pertains to adding components that are directly routable from user requests.*
To support routable Razor components in Razor Pages apps:
1. Follow the guidance in the [Prepare the app](#prepare-the-app) section.
1. Add an `App.razor` file to the project root with the following content:
```razor
@using Microsoft.AspNetCore.Components.Routing
Page not found
Sorry, but there's nothing here!
```
1. Add a `_Host.cshtml` file to the `Pages` folder with the following content:
```cshtml
@page "/blazor"
@{
Layout = "_Layout";
}
```
Components use the shared `_Layout.cshtml` file for their layout.
configures whether the `App` component:
* Is prerendered into the page.
* Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
| Render Mode | Description |
| ----------- | ----------- |
| | Renders the `App` component into static HTML and includes a marker for a Blazor Server app. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
| | Renders a marker for a Blazor Server app. Output from the `App` component isn't included. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
| | Renders the `App` component into static HTML. |
For more information on the Component Tag Helper, see .
1. Add a low-priority route for the `_Host.cshtml` page to endpoint configuration in `Startup.Configure`:
```csharp
app.UseEndpoints(endpoints =>
{
...
endpoints.MapFallbackToPage("/_Host");
});
```
1. Add routable components to the app. For example:
```razor
@page "/counter"
Counter
...
```
For more information on namespaces, see the [Component namespaces](#component-namespaces) section.
## Use routable components in an MVC app
*This section pertains to adding components that are directly routable from user requests.*
To support routable Razor components in MVC apps:
1. Follow the guidance in the [Prepare the app](#prepare-the-app) section.
1. Add an `App.razor` file to the root of the project with the following content:
```razor
@using Microsoft.AspNetCore.Components.Routing
Page not found
Sorry, but there's nothing here!
```
1. Add a `_Host.cshtml` file to the `Views/Home` folder with the following content:
```cshtml
@{
Layout = "_Layout";
}
```
Components use the shared `_Layout.cshtml` file for their layout.
configures whether the `App` component:
* Is prerendered into the page.
* Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
| Render Mode | Description |
| ----------- | ----------- |
| | Renders the `App` component into static HTML and includes a marker for a Blazor Server app. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
| | Renders a marker for a Blazor Server app. Output from the `App` component isn't included. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
| | Renders the `App` component into static HTML. |
For more information on the Component Tag Helper, see .
1. Add an action to the Home controller:
```csharp
public IActionResult Blazor()
{
return View("_Host");
}
```
1. Add a low-priority route for the controller action that returns the `_Host.cshtml` view to the endpoint configuration in `Startup.Configure`:
```csharp
app.UseEndpoints(endpoints =>
{
...
endpoints.MapFallbackToController("Blazor", "Home");
});
```
1. Create a `Pages` folder and add routable components to the app. For example:
```razor
@page "/counter"
Counter
...
```
For more information on namespaces, see the [Component namespaces](#component-namespaces) section.
## Render components from a page or view
*This section pertains to adding components to pages or views, where the components aren't directly routable from user requests.*
To render a component from a page or view, use the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper).
### Render stateful interactive components
Stateful interactive components can be added to a Razor page or view.
When the page or view renders:
* The component is prerendered with the page or view.
* The initial component state used for prerendering is lost.
* New component state is created when the SignalR connection is established.
The following Razor page renders a `Counter` component:
```cshtml
My Razor Page
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
```
For more information, see .
### Render noninteractive components
In the following Razor page, the `Counter` component is statically rendered with an initial value that's specified using a form. Since the component is statically rendered, the component isn't interactive:
```cshtml
My Razor Page
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
```
For more information, see .
## Component namespaces
When using a custom folder to hold the app's components, add the namespace representing the folder to either the page/view or to the `_ViewImports.cshtml` file. In the following example:
* Change `MyAppNamespace` to the app's namespace.
* If a folder named *Components* isn't used to hold the components, change `Components` to the folder where the components reside.
```cshtml
@using MyAppNamespace.Components
```
The `_ViewImports.cshtml` file is located in the `Pages` folder of a Razor Pages app or the `Views` folder of an MVC app.
For more information, see .