Integrar componentes de ASP.NET Core Razor en aplicaciones de ASP.NET Core

  • Artículo

En este artículo se explican escenarios de integración de los componentes Razor para aplicaciones ASP.NET Core.

Integración de componentes Razor

Los componentes Razor se pueden integrar en Razor Pages, MVC y otros tipos de aplicaciones ASP.NET Core. Los componentes Razor también se pueden integrar en cualquier aplicación web, incluidas las aplicaciones que no se basan en ASP.NET Core, como elementos HTML personalizados.

Use la guía que aparece en las secciones siguientes en función de los requisitos del proyecto:

Incorporación de compatibilidad de Blazor a una aplicación de ASP.NET Core

En esta sección, se explica cómo agregar compatibilidad con Blazor a una aplicación ASP.NET Core:

Nota:

En los ejemplos de esta sección, el nombre y el espacio de nombres de la aplicación de ejemplo es BlazorSample.

Agregar la representación estática del lado servidor (SSR estática)

Añade una carpeta Components a la aplicación.

Agregue el siguiente _Imports archivo para los espacios de nombres usados por Razor los componentes.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Cambie el marcador de posición del espacio de nombres ({APP NAMESPACE}) al espacio de nombres de la aplicación. Por ejemplo:

@using BlazorSample
@using BlazorSample.Components

Agregue el enrutador Blazor (<Router>, Router) a la aplicación en un componente Routes, que se coloca en la carpeta Components de la aplicación.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Puede proporcionar un diseño predeterminado con el parámetro RouteView.DefaultLayout del componente RouteView:

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

Para obtener más información, consulte Diseños de ASP.NET Core Blazor.

Agregue un App componente a la aplicación, que actúa como componente raíz, que es el primer componente que carga la aplicación.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="BlazorSample.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Para el <link> elemento del ejemplo anterior, cambie BlazorSample el nombre de archivo de la hoja de estilos para que coincida con el nombre del proyecto de la aplicación. Por ejemplo, un proyecto denominado ContosoApp usa el nombre de archivo de ContosoApp.styles.css hoja de estilos:

<link rel="stylesheet" href="ContosoApp.styles.css" />

Agregue una Pages carpeta a la Components carpeta para contener componentes enrutables Razor.

Agregue el siguiente componente Welcome para mostrar la SSR estática.

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

En el archivo del Program proyecto ASP.NET Core:

  • Agregue una using instrucción a la parte superior del archivo para los componentes del proyecto:

    using {APP NAMESPACE}.Components;

    En la línea anterior, cambie el marcador de posición {APP NAMESPACE} al espacio de nombres de la aplicación. Por ejemplo:

    using BlazorSample.Components;

  • Agregue servicios de componente Razor (AddRazorComponents), que también agregan automáticamente servicios antifalsificación (AddAntiforgery). Agregue la línea siguiente antes de la línea que llama a builder.Build()):

    builder.Services.AddRazorComponents();

  • Agregue Middleware antifalsificación a la canalización de procesamiento de solicitudes con UseAntiforgery. UseAntiforgery se llama después de la llamada a UseRouting. Si hay llamadas a UseRouting y UseEndpoints, la llamada a UseAntiforgery debe ir entre ellas. Se debe realizar una llamada a UseAntiforgery después de las llamadas a UseAuthentication y UseAuthorization.

    app.UseAntiforgery();

  • Agregue MapRazorComponents a la canalización de procesamiento de solicitudes de la aplicación con el componente App (App.razor) especificado como componente raíz predeterminado (el primer componente cargado). Coloque el código siguiente antes de la línea que llama a app.Run:

    app.MapRazorComponents<App>();

Cuando se ejecuta la aplicación, se accede al componente Welcome en el punto de conexión /welcome.

Habilitar la representación interactiva del lado servidor (SSR interactiva)

Siga las instrucciones de la sección Agregar representación estática del lado servidor (SSR estático).

En el archivo Program de la aplicación, agregue una llamada a AddInteractiveServerComponents donde se agreguen los servicios de componentes Razor con AddRazorComponents:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Agregue una llamada a AddInteractiveServerRenderModedonde se asignen los componentes de Razor con MapRazorComponents:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Agregue el siguiente componente Counter a la aplicación que adopta la representación interactiva del lado servidor (SSR interactiva).

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Cuando se ejecuta la aplicación, se accede al Counter componente en /counter.

Habilitar la representación automática interactiva (Automática) o del lado cliente (CSR)

Siga las instrucciones de la sección Agregar representación estática del lado servidor (SSR estático).

Los componentes que usan el modo de representación automática interactiva usan inicialmente SSR interactivo. El runtime de .NET y el lote de aplicaciones se descargan en el cliente en segundo plano y se almacenan en caché para que se puedan usar en futuras visitas. Los componentes que usan el modo de representación Interactivo de WebAssembly solo se representan de forma interactiva en el cliente después de descargar la agrupación Blazor y el runtime Blazor se activa. Tenga en cuenta que cuando se usan los modos de representación Automático interactivo o Interactivo de WebAssembly, el código de componente descargado en el cliente no es privado. Para obtener más información, vea Modos de representación de ASP.NET CoreBlazor.

Después de decidir qué modo de representación adoptar:

Agregue una referencia de paquete a la aplicación para el paquete de NuGet Microsoft.AspNetCore.Components.WebAssembly.Server.

Nota:

Para obtener instrucciones sobre cómo agregar paquetes a aplicaciones .NET, consulte los artículos de Instalación y administración de paquetes en Flujo de trabajo de consumo de paquetes (NuGet documentación). Confirme las versiones correctas del paquete en NuGet.org.

Cree una aplicación web de donantes Blazor para proporcionar recursos a la aplicación. Siga las orientaciones del artículo Tooling for ASP.NET CoreBlazor, seleccionando la compatibilidad con las siguientes funciones de plantilla al generar la Web App Blazor.

Para el nombre de la aplicación, use el mismo nombre que la aplicación ASP.NET Core, lo que da como resultado la coincidencia de marcado de nombres de aplicación en componentes y espacios de nombres coincidentes en el código. El uso del mismo nombre o espacio de nombres no es estrictamente necesario, ya que los espacios de nombres se pueden ajustar después de que los recursos se muevan de la aplicación donante a la aplicación ASP.NET Core. Sin embargo, el tiempo se guarda haciendo coincidir los espacios de nombres en el principio.

Visual Studio:

  • Para modo de representación interactiva, seleccione Automático (servidor y WebAssembly).
  • Establezca la ubicación de interactividad en Por página o componente.
  • Anule la selección de la casilla incluir páginas de ejemplo.

CLI DE .NET:

  • Use la opción -int Auto.
  • No use la -ai|--all-interactive opción.
  • Pase la -e|--empty opción.

Desde la aplicación web de donantes Blazor, copie todo .Client el proyecto en la carpeta de la solución de la aplicación ASP.NET Core.

Importante

No copie la .Client carpeta en la carpeta del proyecto de ASP.NET Core. El mejor enfoque para organizar soluciones de .NET es colocar cada proyecto de la solución en su propia carpeta dentro de una carpeta de solución de nivel superior. Si no existe una carpeta de solución situada encima de la carpeta del proyecto de ASP.NET Core, cree una. A continuación, copie la .Client carpeta del proyecto desde la aplicación web de donantes Blazor en la carpeta de la solución. La estructura final de carpetas del proyecto debe tener el siguiente diseño:

  • BlazorSampleSolution (carpeta de solución de nivel superior)
    • BlazorSample (proyecto original ASP.NET Core)
    • BlazorSample.Client (.Client carpeta del proyecto de la aplicación web de donantes Blazor )

Para el archivo de solución ASP.NET Core, puede dejarlo en la carpeta del proyecto ASP.NET Core. Como alternativa, puede mover el archivo de solución o crear uno nuevo en la carpeta de solución de nivel superior siempre que el proyecto haga referencia correctamente a los archivos de proyecto (.csproj) de los dos proyectos de la carpeta de la solución.

Si ha llamado a la aplicación web de donantes Blazor al crear el proyecto de donantes igual que la aplicación ASP.NET Core, los espacios de nombres usados por los recursos donados coinciden con los de la aplicación ASP.NET Core. No es necesario seguir los pasos necesarios para buscar coincidencias con los espacios de nombres. Si usó un espacio de nombres diferente al crear el proyecto de aplicación web de donantes Blazor, debe ajustar los espacios de nombres entre los recursos donados para que coincidan si piensa usar el resto de esta guía exactamente como se muestra. Si los espacios de nombres no coinciden, ajuste los espacios de nombres antes de continuar o ajuste los espacios de nombres a medida que siga las instrucciones restantes de esta sección.

Elimine la aplicación web de donantes Blazor, ya que no tiene más uso en este proceso.

Agregue el .Client proyecto a la solución:

  • Haga clic con el botón derecho en el Explorador de soluciones y, a continuación, seleccione Agregar>Proyecto existente. Vaya a la .Client carpeta y seleccione el archivo del proyecto (.csproj).

  • CLI de .NET: use el dotnet sln add comando para agregar el .Client proyecto a la solución.

Agregue una referencia de proyecto desde el proyecto de ASP.NET Core al proyecto de cliente:

  • En el Explorador de soluciones, haga clic con el botón derecho en el proyecto ASP.NET Core y elija Agregar>Referencia del proyecto. Asigne al proyecto el nombre .Client y seleccione Aceptar.

  • CLI de .NET: en la carpeta del proyecto de ASP.NET Core, use el siguiente comando:

    dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj

    El comando anterior supone lo siguiente:

    • El nombre del archivo del proyecto es BlazorSample.Client.csproj.
    • El .Client proyecto se encuentra en una BlazorSample.Client carpeta dentro de la carpeta de la solución. La .Client carpeta está en paralelo con la carpeta del proyecto ASP.NET Core.

    Para obtener más información sobre el dotnet add reference comando, consulte dotnet add reference (documentación de.NET).

Realice los cambios siguientes en el archivo de Program la aplicación ASP.NET Core:

  • Agregue servicios de componentes de WebAssembly interactivos con AddInteractiveWebAssemblyComponents donde se agregan servicios de componentes Razor con AddRazorComponents.

    Para la representación automática interactiva:

    builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

    Solo para la representación interactiva de WebAssembly:

    builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

  • Agregue el modo de representación interactivo de WebAssembly (AddInteractiveWebAssemblyRenderMode) y ensamblados adicionales para el proyecto .Client donde los componentes Razor se asignan con MapRazorComponents.

    Para la representación automática interactiva (Automática):

    app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Solo para la representación interactiva de WebAssembly:

    app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    En los ejemplos anteriores, cambie BlazorSample.Client para que coincida con el .Client espacio de nombres del proyecto.

Agregue una carpeta Pages al proyecto .Client.

Si el proyecto ASP.NET Core tiene un componente existente Counter :

  • Mueva el componente a la Pages carpeta del .Client proyecto.
  • Quite la @rendermode directiva en la parte superior del archivo de componente.

Si la aplicación ASP.NET Core no tiene un Counter componente, agregue el siguiente Counter componente (Pages/Counter.razor) al .Client proyecto:

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Si la aplicación solo adopta la representación interactiva de WebAssembly, quite la directiva y el valor @rendermode:

- @rendermode InteractiveAuto

Ejecute la solución desde el proyecto de aplicación ASP.NET Core:

  • Visual Studio: confirme que el proyecto ASP.NET Core está seleccionado en el Explorador de soluciones al ejecutar la aplicación.

  • CLI de .NET: ejecute el proyecto desde la carpeta del proyecto de ASP.NET Core.

Para cargar el Counter componente, vaya a /counter.

Usar componentes no enrutables en páginas o vistas

Siga estas instrucciones para integrar componentes Razor en páginas y vistas de una aplicación Razor Pages o MVC existente con el Asistente de etiqueta de componente.

Cuando se usa la representación previa del servidor y la página o vista se representa:

  • El componente se representa previamente con la página o la vista.
  • Se pierde el estado inicial del componente que se usa para la representación previa.
  • Cuando se establece la conexión SignalR, se crea un estado del componente.

Para obtener más información sobre los modos de representación, incluida la representación de componentes estáticos no interactivos, consulte Asistente de etiqueta de componente en ASP.NET Core. Para guardar el estado de los componentes representados previamente Razor, consulte Asistente de etiqueta del estado del componente persistente en ASP.NET Core.

Agregue una carpeta Components a la carpeta raíz del proyecto.

Agregue un archivo de importación a la carpeta Components con el siguiente contenido. Cambie el marcador de posición {APP NAMESPACE} al espacio de nombres del proyecto.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

En el archivo de diseño del proyecto (Pages/Shared/_Layout.cshtml en aplicaciones Razor Pages o Views/Shared/_Layout.cshtml en aplicaciones MVC):

  • Agregue la etiqueta <base> siguiente y el asistente de etiqueta de componente para un componente HeadOutlet al marcado <head>:

    <base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />

    El valor href (la ruta de acceso base de la aplicación) del ejemplo anterior da por hecho que la aplicación reside en la ruta de acceso URL raíz (/). Si la aplicación es una subaplicación, siga las instrucciones de la sección Ruta base de la aplicación del artículo Hospedaje e implementación de ASP.NET Core Blazor.

    El componente HeadOutlet se usa para representar el contenido principal (<head>) para los títulos de página (componente PageTitle) y otros elementos principales (componente HeadContent) establecidos por componentes Razor. Para más información, vea Control del contenido principal en aplicaciones Blazor de ASP.NET Core.

  • Agregue una etiqueta <script> para el script blazor.web.js inmediatamente antes de la sección de representación Scripts (@await RenderSectionAsync(...)):

    <script src="_framework/blazor.web.js"></script>

    No es necesario agregar manualmente un script blazor.web.js a la aplicación porque el marco Blazor agrega el script blazor.web.js a la aplicación.

Nota:

Normalmente, el diseño se carga a través de un archivo _ViewStart.cshtml.

Agregue un componente App no operativo (no-op) al proyecto.

Components/App.razor:

@* No-op App component *@

Donde se registran los servicios, agregue servicios para componentes Razor y servicios para admitir la representación de componentes del servidor interactivos.

En la parte superior del archivo Program, agregue una instrucción using a la parte superior del archivo para los componentes del proyecto:

using {APP NAMESPACE}.Components;

En la línea anterior, cambie el marcador de posición {APP NAMESPACE} al espacio de nombres de la aplicación. Por ejemplo:

using BlazorSample.Components;

En el archivo Program antes de la línea que compila la aplicación (builder.Build()):

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Para obtener más información sobre cómo agregar compatibilidad con los componentes de servidor y WebAssembly, consulte Modos de representaciónBlazor de ASP.NET Core.

En el archivo Program inmediatamente después de la llamada a asignar Páginas Razor (MapRazorPages) en una aplicación de Páginas Razor o para asignar la ruta predeterminada del controlador (MapControllerRoute), llame a MapRazorComponents para detectar componentes disponibles y especificar el componente raíz de la aplicación (el primer componente cargado). De forma predeterminada, el componente raíz de la aplicación es el componente App (App.razor). Encadene una llamada a AddInteractiveInteractiveServerRenderMode para configurar la representación interactiva del lado servidor (SSR interactiva) para la aplicación:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Nota:

Si la aplicación aún no se ha actualizado para incluir el middleware de antifalsificación, agregue la línea siguiente después de llamar a UseAuthorization:

app.UseAntiforgery();

Integre los componentes en cualquier página o vista. Por ejemplo, agregue un componente EmbeddedCounter a la carpeta Components del proyecto.

Components/EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Razor Pages:

En la página Index del proyecto de una aplicación Razor Pages, agregue el espacio de nombres del componente EmbeddedCounter e inserte el componente en la página. Cuando se carga la página Index, el componente EmbeddedCounter se representa previamente en ella. En el ejemplo siguiente, reemplace el marcador de posición {APP NAMESPACE} por el espacio de nombres del proyecto.

Pages/Index.cshtml:

@page
@using {APP NAMESPACE}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

MVC:

En la vista Index del proyecto de una aplicación MVC, agregue el espacio de nombres del componente EmbeddedCounter e inserte el componente en la vista. Cuando se carga la vista Index, el componente EmbeddedCounter se representa previamente en ella. En el ejemplo siguiente, reemplace el marcador de posición {APP NAMESPACE} por el espacio de nombres del proyecto.

Views/Home/Index.cshtml:

@using {APP NAMESPACE}.Components
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

Usar componentes enrutables

Use las instrucciones siguientes para integrar componentes enrutables Razor en una aplicación Razor Pages o MVC existente.

La guía de esta sección presupone lo siguiente:

  • El título de la aplicación es Blazor Sample.
  • El espacio de nombres de la aplicación es BlazorSample.

Para admitir componentes Razor enrutables:

Agregue una carpeta Components a la carpeta raíz del proyecto.

Agregue un archivo de importación a la carpeta Components con el siguiente contenido.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Cambie el marcador de posición {APP NAMESPACE} al espacio de nombres del proyecto. Por ejemplo:

@using BlazorSample
@using BlazorSample.Components

Agregue una carpeta Layout a la carpeta Components.

Agregue un componente de pie de página y una hoja de estilos a la carpeta Layout.

Components/Layout/Footer.razor:

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
    </div>
</footer>

En el marcado anterior, establezca el marcador de posición {APP TITLE} en el título de la aplicación. Por ejemplo:

&copy; 2023 - Blazor Sample - <a href="/privacy">Privacy</a>

Components/Layout/Footer.razor.css:

.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

Agregue un componente de menú de navegación a la carpeta Layout.

Components/Layout/NavMenu.razor:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
    <a class="navbar-brand" href="/">{APP TITLE}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/privacy">Privacy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/counter">Counter</a>
            </li>
        </ul>
    </div>
</div>
</nav>

En el marcado anterior, establezca el marcador de posición {APP TITLE} en el título de la aplicación. Por ejemplo:

<a class="navbar-brand" href="/">Blazor Sample</a>

Components/Layout/NavMenu.razor.css:

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

Agregue un componente de diseño principal y una hoja de estilos a la carpeta Layout.

Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<Footer />

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Components/Layout/MainLayout.razor.css:

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Agregue un componente Routes a la carpeta Components con el siguiente contenido.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Agregue un componente App a la carpeta Components con el siguiente contenido.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{APP TITLE}</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

En el código anterior, actualice el título de la aplicación y el nombre del archivo de hoja de estilos:

  • Para el marcador de posición {APP TITLE} del elemento <title>, establezca el título de la aplicación. Por ejemplo:

    <title>Blazor Sample</title>

  • Para el marcador de posición {APP NAMESPACE} en la hoja de estilos del elemento <link>, establezca el espacio de nombres de la aplicación. Por ejemplo:

    <link rel="stylesheet" href="/BlazorSample.styles.css" />

Donde se registran los servicios, agregue servicios para componentes Razor y servicios para admitir la representación de componentes del servidor interactivos.

En la parte superior del archivo Program, agregue una instrucción using a la parte superior del archivo para los componentes del proyecto:

using {APP NAMESPACE}.Components;

En la línea anterior, cambie el marcador de posición {APP NAMESPACE} al espacio de nombres de la aplicación. Por ejemplo:

using BlazorSample.Components;

En el archivo Program antes de la línea que compila la aplicación (builder.Build()):

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Para obtener más información sobre cómo agregar compatibilidad con los componentes de servidor y WebAssembly, consulte Modos de representaciónBlazor de ASP.NET Core.

En el archivo Program inmediatamente después de la llamada para asignar Razor Pages (MapRazorPages), llame a MapRazorComponents para detectar componentes disponibles y especifique el componente raíz de la aplicación. De forma predeterminada, el componente raíz de la aplicación es el componente App (App.razor). Encadene una llamada a AddInteractiveServerRenderMode para configurar la representación interactiva del lado servidor (SSR interactiva) para la aplicación:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Nota:

Si la aplicación aún no se ha actualizado para incluir el middleware de antifalsificación, agregue la línea siguiente después de llamar a UseAuthorization:

app.UseAntiforgery();

Cree una carpeta Pages en la carpeta Components para los componentes enrutables. El ejemplo siguiente es un componente Counter basado en el componente Counter de las plantillas de proyecto de Blazor.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Ejecute el proyecto y vaya al componente Counter enrutable en /counter.

Para obtener más información sobre los espacios de nombres, vea la sección Espacios de nombres de componentes.

Devolver un RazorComponentResult desde una acción del controlador MVC

Una acción del controlador MVC puede devolver un componente con RazorComponentResult<TComponent>.

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

En un controlador:

public IResult GetWelcomeComponent()
{
    return new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });
}

Solo se devuelve el marcado HTML para el componente representado. Los diseños y el marcado de página HTML no se representan automáticamente con el componente. Para generar una página HTML completa, la aplicación puede mantener un diseño Blazor que proporcione marcado HTML para <html>, <head>, <body> y otras etiquetas. El componente incluye el diseño con la directiva @layoutRazor en la parte superior del archivo de definición de componentes, Welcome.razor para el ejemplo de esta sección. En el ejemplo siguiente se supone que la aplicación tiene un diseño denominado RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor):

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Puede evitar colocar la instrucción @using para la carpeta Layout en componentes individuales si la mueve al archivo _Imports.razor de la aplicación.

Para obtener más información, consulte Diseños de ASP.NET Core Blazor.

Espacios de nombres de componentes

Si usa una carpeta personalizada para contener los componentes _ViewImports.cshtml del proyecto, agregue el espacio de nombres que representa la carpeta a la página o vista, o bien al archivo Razor. En el ejemplo siguiente:

  • Los componentes se almacenan en la carpeta Components del proyecto.
  • El marcador de posición {APP NAMESPACE} es el espacio de nombres del proyecto. Components representa el nombre de la carpeta.
@using {APP NAMESPACE}.Components

Por ejemplo:

@using BlazorSample.Components

El archivo _ViewImports.cshtml se encuentra en la carpeta Pages de una aplicación Razor Pages o en la carpeta Views de una aplicación de MVC.

Para más información, vea Componentes Razor de ASP.NET Core.

Recursos adicionales

Representación previa de componentes de Razor de ASP.NET Core