Leer en inglés

Compartir a través de

Integración de ASP.NET componentes principales Razor con MVC o Razor Pages

  • Artículo

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la directiva de compatibilidad de .NET y .NET Core. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión de .NET 9 de este artículo.

Razor Los componentes se pueden integrar en Razor aplicaciones Pages o MVC. Cuando se representa la página o la vista, los componentes se pueden representar previamente al mismo tiempo.

Importante

Los cambios en el marco de las diversas versiones de ASP.NET Core han dado lugar a distintos conjuntos de instrucciones en este artículo. Antes de usar las instrucciones de este artículo, confirme que el selector de versión del documento en la parte superior de este artículo coincide con la versión de ASP.NET Core que quiere usar para la aplicación.

La representación previa puede mejorar la optimización del motor de búsqueda (SEO) mediante la representación del contenido de la respuesta HTTP inicial que los motores de búsqueda pueden usar para calcular la clasificación de página.

Después de configurar el proyecto, usa la guía que aparece en las secciones siguientes en función de los requisitos del proyecto:

Configuración

Use las instrucciones siguientes para integrar Razor componentes en páginas o vistas de una aplicación de Pages o MVC existente Razor .

  1. Agrega un archivo imports a la carpeta raíz del proyecto con el contenido siguiente. Cambia el marcador de posición {APP NAMESPACE} al espacio de nombres del proyecto.

    _Imports.razor:

    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.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

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

    • Agrega la siguiente etiqueta <base> y el asistente de etiqueta de componente HeadOutlet al elemento <head>:

      CSHTML 
      <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, sigue 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 obtener más información, consulta Control del contenido principal en aplicaciones de ASP.NET Core Blazor.

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

      HTML 
      <script src="_framework/blazor.server.js"></script>

      El marco agrega el script blazor.server.js a la aplicación. No es necesario agregar manualmente un archivo de script blazor.server.js a la aplicación.

    Nota

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

  3. Registra los servicios Blazor Server en Program.cs, donde se registran los servicios:

    C# 
    builder.Services.AddServerSideBlazor();

  4. Agrega el punto de conexión del centro Blazor a los puntos de conexión de Program.cs donde se asignan las rutas. Coloca la siguiente línea después de la llamada a MapRazorPages ( Razor Pages) o MapControllerRoute (MVC):

    C# 
    app.MapBlazorHub();

  5. Integra los componentes en cualquier página o vista. Por ejemplo, agrega un componente Counter a la carpeta Shared del proyecto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/Shared/Counter.razor (MVC):

    razor 
    <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++;
    }
}

    Razor Pages:

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

    Pages/Index.cshtml:

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

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

    MVC:

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

    Views/Home/Index.cshtml:

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

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

Para obtener más información, consulta la sección Representación de componentes a partir de una página o vista.

Uso de componentes enrutables en una aplicación Razor Pages

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones Razor Pages:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Agrega una página _Host al proyecto con el contenido siguiente. Reemplaza el marcador de posición {APP NAMESPACE} por el espacio de nombres de la aplicación.

    Pages/_Host.cshtml:

    CSHTML 
    @page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Nota

    En el ejemplo anterior se supone que el diseño de la aplicación representa el componente HeadOutlet y el script Blazor (_framework/blazor.server.js). Para obtener más información, consulta la sección Configuración.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, consulta Asistente de etiquetas de componente en ASP.NET Core.

  4. En los puntos de conexión Program.cs, agrega una ruta de prioridad baja para la página _Host como último punto de conexión:

    C# 
    app.MapFallbackToPage("/_Host");

  5. Agrega componentes enrutables al proyecto. El ejemplo siguiente es un componente RoutableCounter basado en el componente Counter de las plantillas de proyecto de Blazor.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable 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++;
    }
}

  6. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Uso de componentes enrutables en una aplicación MVC

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones MVC, haga lo siguiente:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Agrega una vista _Host al proyecto con el contenido siguiente. Reemplaza el marcador de posición {APP NAMESPACE} por el espacio de nombres de la aplicación.

    Views/Home/_Host.cshtml:

    CSHTML 
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Nota

    En el ejemplo anterior se supone que el diseño de la aplicación representa el componente HeadOutlet y el script Blazor (_framework/blazor.server.js). Para obtener más información, consulta la sección Configuración.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, consulta Asistente de etiquetas de componente en ASP.NET Core.

  4. Agrega una acción al controlador Home.

    Controllers/HomeController.cs:

    C# 
    public IActionResult Blazor()
{
   return View("_Host");
}

  5. En los puntos de conexión Program.cs, agrega una ruta de prioridad baja para la acción del controlador que devuelva la vista _Host:

    C# 
    app.MapFallbackToController("Blazor", "Home");

  6. Crea una carpeta Pages en la aplicación MVC y agregue componentes enrutables. El ejemplo siguiente es un componente RoutableCounter basado en el componente Counter de las plantillas de proyecto de Blazor.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable 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++;
    }
}

  7. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Representación de componentes a partir de una página o vista

Esta sección pertenece a la adición de componentes a páginas o vistas, donde los componentes no son enrutables directamente desde las solicitudes del usuario.

Para representar un componente a partir de una página o vista, usa el asistente de etiquetas de componente.

Representación de componentes interactivos con estado

Los componentes interactivos con estado se pueden agregar a una página de Razor o una vista.

Cuando se representa la página o la vista:

  • 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.

La siguiente página de Razor representa un componente Counter:

CSHTML 
<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obtener más información, consulta Asistente de etiquetas de componente en ASP.NET Core.

Representación de componentes no interactivos

En la siguiente página de Razor, el componente Counter se representa de forma estática con un valor inicial que se especifica mediante un formulario. Como el componente se representa de forma estática, no es interactivo:

CSHTML 
<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obtener más información, consulta Asistente de etiquetas de componente en ASP.NET Core.

Espacios de nombres de componentes

Si usas una carpeta personalizada para contener los componentes Razor del proyecto, agrega el espacio de nombres que representa la carpeta a la página o vista, o bien al archivo _ViewImports.cshtml. 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.
CSHTML 
@using {APP NAMESPACE}.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 obtener más información, consulta Componentes de ASP.NET Core Razor.

Conservación del estado previamente representado

Si no se conserva el estado representado previamente, se pierde el estado usado durante la representación previa, por lo que se debe volver a crear una vez que la aplicación se haya cargado por completo. Si algún estado se configura de forma asincrónica, puede que la interfaz de usuario representada previamente parpadee mientras se sustituye por marcadores de posición temporales y se vuelve a representar.

Para conservar el estado de los componentes representados previamente, usa el asistente de etiquetas de conservación del estado del componente (origen de referencia). Agrega la etiqueta del asistente de etiquetas, <persist-component-state />, dentro de la etiqueta de cierre </body> de la página _Host en una aplicación que representa previamente los componentes.

Nota

Los vínculos de la documentación al origen de referencia de .NET cargan normalmente la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta de una versión específica, usa la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, consulta Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).

En Pages/_Host.cshtml de las Blazor aplicaciones que se encuentran ServerPrerendered en una Blazor Server aplicación:

CSHTML 
<body>
    ...

    <persist-component-state />
</body>

En la aplicación, decide qué estado quieres conservar mediante el servicio PersistentComponentState. PersistentComponentState.RegisterOnPersisting registra una devolución de llamada para conservar el estado del componente antes de que se pause la aplicación. El estado se recupera cuando se reanuda la aplicación.

En el ejemplo siguiente:

  • El marcador de posición {TYPE} representa el tipo de datos que se va a conservar (por ejemplo, WeatherForecast[]).
  • El marcador de posición {TOKEN} es una cadena de identificador de estado (por ejemplo, fetchdata).
razor 
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

El ejemplo siguiente es una versión actualizada del FetchData componente en función de la plantilla de Blazor proyecto. El componente WeatherForecastPreserveState conserva el estado de previsión meteorológica durante la representación previa y, después, recupera el estado para inicializar el componente. El Asistente para la conservación de etiquetas de estado de componente conserva el estado del componente después de todas las invocaciones de componentes.

Pages/WeatherForecastPreserveState.razor:

razor 
@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Al inicializar componentes con el mismo estado que se usa durante la representación previa, los pasos de inicialización costosos solo se ejecutan una vez. La interfaz de usuario representada también coincide con la que se ha representado previamente, por lo que no se produce ningún parpadeo en el explorador.

El estado preenderado persistente se transfiere al cliente, donde se usa para restaurar el estado del componente. ASP.NET Protección de datos principales garantiza que los datos se transfieren de forma segura en Blazor Server las aplicaciones.

Tamaño de estado antes de la representación y límite de tamaño del mensaje SignalR

Un tamaño de estado preprotegendo grande puede superar Blazorel límite de tamaño del mensaje del SignalR circuito, lo que da como resultado lo siguiente:

  • El circuito SignalR no se puede inicializar con un error en el cliente: Circuit host not initialized.
  • La interfaz de usuario de reconexión del cliente aparece cuando se produce un error en el circuito. No es posible la recuperación.

Para resolver el problema, usa uno de los enfoques siguientes:

  • Reduce la cantidad de datos que se están colocando en el estado anterior a la representación.
  • Aumenta el límite de tamaño del mensajeSignalR. ADVERTENCIA: Aumentar el límite puede aumentar el riesgo de ataques por denegación de servicio (DoS).

Recursos de Blazor Server adicionales

La representación previa puede mejorar la optimización del motor de búsqueda (SEO) mediante la representación del contenido de la respuesta HTTP inicial que los motores de búsqueda pueden usar para calcular la clasificación de página.

Después de configurar el proyecto, use la guía que aparece en las secciones siguientes en función de los requisitos del proyecto:

Configuración

Use las instrucciones siguientes para integrar Razor componentes en páginas o vistas de una aplicación de Pages o MVC existente Razor .

Importante

El uso de una página de diseño (_Layout.cshtml) con un asistente de etiquetas de componente para un componente HeadOutlet es necesario para controlar el contenido <head>, como el título de la página (componente PageTitle) y otros elementos principales (componente HeadContent). Para más información, vea Control del contenido principal en aplicaciones Blazor de ASP.NET Core.

  1. En el archivo de diseño del proyecto:

    • Agregue la siguiente etiqueta <base> y asistente de etiqueta de componente HeadOutlet al elemento <head> en Pages/Shared/_Layout.cshtml (Razor Pages) o Views/Shared/_Layout.cshtml (MVC):

      CSHTML 
      <base href="~/" />
<component type="typeof(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, sigue 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.server.js inmediatamente antes de la sección de representación Scripts (@await RenderSectionAsync(...)) en el diseño de la aplicación.

      Pages/Shared/_Layout.cshtml (Razor Pages) o Views/Shared/_Layout.cshtml (MVC):

      HTML 
      <script src="_framework/blazor.server.js"></script>

      El marco agrega el script blazor.server.js a la aplicación. No es necesario agregar manualmente un archivo de script blazor.server.js a la aplicación.

  2. Agregue un archivo imports a la carpeta raíz del proyecto con el contenido siguiente. Cambia el marcador de posición {APP NAMESPACE} al espacio de nombres del proyecto.

    _Imports.razor:

    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.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Registre los servicios Blazor Server en Program.cs, donde se registran los servicios:

    C# 
    builder.Services.AddServerSideBlazor();

  4. Agrega el punto de conexión del centro Blazor a los puntos de conexión de Program.cs donde se asignan las rutas.

    Coloca la siguiente línea después de la llamada a MapRazorPages ( Razor Pages) o MapControllerRoute (MVC):

    C# 
    app.MapBlazorHub();

  5. Integra los componentes en cualquier página o vista. Por ejemplo, agrega un componente Counter a la carpeta Shared del proyecto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/Shared/Counter.razor (MVC):

    razor 
    <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++;
    }
}

    Razor Pages:

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

    Pages/Index.cshtml:

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

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

    MVC:

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

    Views/Home/Index.cshtml:

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

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

Para obtener más información, consulta la sección Representación de componentes a partir de una página o vista.

Uso de componentes enrutables en una aplicación Razor Pages

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones Razor Pages:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Agregue una página _Host al proyecto con el contenido siguiente.

    Pages/_Host.cshtml:

    CSHTML 
    @page "/blazor"
@namespace {APP NAMESPACE}.Pages.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

    En este escenario, los componentes usan el archivo compartido _Layout.cshtml para su diseño.

    Importante

    El uso de una página de diseño (_Layout.cshtml) con un asistente de etiquetas de componente para un componente HeadOutlet es necesario para controlar el contenido <head>, como el título de la página (componente PageTitle) y otros elementos principales (componente HeadContent). Para más información, vea Control del contenido principal en aplicaciones Blazor de ASP.NET Core.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, consulta Asistente de etiquetas de componente en ASP.NET Core.

  4. En los puntos de conexión Program.cs, agrega una ruta de prioridad baja para la página _Host como último punto de conexión:

    C# 
    app.MapFallbackToPage("/_Host");

  5. Agrega componentes enrutables al proyecto. El ejemplo siguiente es un componente RoutableCounter basado en el componente Counter de las plantillas de proyecto de Blazor.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable 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++;
    }
}

  6. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Uso de componentes enrutables en una aplicación MVC

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones MVC, haga lo siguiente:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Agregue una vista _Host al proyecto con el contenido siguiente.

    Views/Home/_Host.cshtml:

    CSHTML 
    @namespace {APP NAMESPACE}.Views.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

    Los componentes usan el archivo compartido _Layout.cshtml para su diseño.

    Importante

    El uso de una página de diseño (_Layout.cshtml) con un asistente de etiquetas de componente para un componente HeadOutlet es necesario para controlar el contenido <head>, como el título de la página (componente PageTitle) y otros elementos principales (componente HeadContent). Para más información, vea Control del contenido principal en aplicaciones Blazor de ASP.NET Core.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, consulta Asistente de etiquetas de componente en ASP.NET Core.

  4. Agrega una acción al controlador Home.

    Controllers/HomeController.cs:

    C# 
    public IActionResult Blazor()
{
   return View("_Host");
}

  5. En los puntos de conexión Program.cs, agrega una ruta de prioridad baja para la acción del controlador que devuelva la vista _Host:

    C# 
    app.MapFallbackToController("Blazor", "Home");

  6. Crea una carpeta Pages en la aplicación MVC y agregue componentes enrutables. El ejemplo siguiente es un componente RoutableCounter basado en el componente Counter de las plantillas de proyecto de Blazor.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable 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++;
    }
}

  7. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Representación de componentes a partir de una página o vista

Esta sección pertenece a la adición de componentes a páginas o vistas, donde los componentes no son enrutables directamente desde las solicitudes del usuario.

Para representar un componente a partir de una página o vista, usa el asistente de etiquetas de componente.

Representación de componentes interactivos con estado

Los componentes interactivos con estado se pueden agregar a una página de Razor o una vista.

Cuando se representa la página o la vista:

  • 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.

La siguiente página de Razor representa un componente Counter:

CSHTML 
<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para más información, consulte Asistente de etiquetas de componente en ASP.NET Core.

Importante

El uso de una página de diseño (_Layout.cshtml) con un asistente de etiquetas de componente para un componente HeadOutlet es necesario para controlar el contenido <head>, como el título de la página (componente PageTitle) y otros elementos principales (componente HeadContent). Para más información, vea Control del contenido principal en aplicaciones Blazor de ASP.NET Core.

Representación de componentes no interactivos

En la siguiente página de Razor, el componente Counter se representa de forma estática con un valor inicial que se especifica mediante un formulario. Como el componente se representa de forma estática, no es interactivo:

CSHTML 
<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para más información, consulte Asistente de etiquetas de componente en ASP.NET Core.

Importante

El uso de una página de diseño (_Layout.cshtml) con un asistente de etiquetas de componente para un componente HeadOutlet es necesario para controlar el contenido <head>, como el título de la página (componente PageTitle) y otros elementos principales (componente HeadContent). Para más información, vea Control del contenido principal en aplicaciones Blazor de ASP.NET Core.

Espacios de nombres de componentes

Si usas una carpeta personalizada para contener los componentes Razor del proyecto, agrega el espacio de nombres que representa la carpeta a la página o vista, o bien al archivo _ViewImports.cshtml. 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.
CSHTML 
@using {APP NAMESPACE}.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 obtener más información, consulta Componentes de ASP.NET Core Razor.

Conservación del estado previamente representado

Si no se conserva el estado representado previamente, se pierde el estado usado durante la representación previa, por lo que se debe volver a crear una vez que la aplicación se haya cargado por completo. Si algún estado se configura de forma asincrónica, puede que la interfaz de usuario representada previamente parpadee mientras se sustituye por marcadores de posición temporales y se vuelve a representar.

Para solucionar estos problemas, Blazor admite el estado persistente en una página representada previamente mediante el Asistente para la conservación de etiquetas de estado de componente. Agregue la etiqueta de asistente de etiquetas <persist-component-state /> a la etiqueta de cierre </body>.

Pages/_Layout.cshtml:

CSHTML 
<body>
    ...

    <persist-component-state />
</body>

En la aplicación, decide qué estado quieres conservar mediante el servicio PersistentComponentState. PersistentComponentState.RegisterOnPersisting registra una devolución de llamada para conservar el estado del componente antes de que se pause la aplicación. El estado se recupera cuando se reanuda la aplicación.

El ejemplo siguiente es una versión actualizada del FetchData componente en función de la plantilla de Blazor proyecto. El componente WeatherForecastPreserveState conserva el estado de previsión meteorológica durante la representación previa y, después, recupera el estado para inicializar el componente. El Asistente para la conservación de etiquetas de estado de componente conserva el estado del componente después de todas las invocaciones de componentes.

Pages/WeatherForecastPreserveState.razor:

razor 
@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Al inicializar componentes con el mismo estado que se usa durante la representación previa, los pasos de inicialización costosos solo se ejecutan una vez. La interfaz de usuario representada también coincide con la que se ha representado previamente, por lo que no se produce ningún parpadeo en el explorador.

El estado preenderado persistente se transfiere al cliente, donde se usa para restaurar el estado del componente. ASP.NET Protección de datos principales garantiza que los datos se transfieren de forma segura en Blazor Server las aplicaciones.

Tamaño de estado antes de la representación y límite de tamaño del mensaje SignalR

Un tamaño de estado preprotegendo grande puede superar Blazorel límite de tamaño del mensaje del SignalR circuito, lo que da como resultado lo siguiente:

  • El circuito SignalR no se puede inicializar con un error en el cliente: Circuit host not initialized.
  • La interfaz de usuario de reconexión del cliente aparece cuando se produce un error en el circuito. No es posible la recuperación.

Para resolver el problema, usa uno de los enfoques siguientes:

  • Reduce la cantidad de datos que se están colocando en el estado anterior a la representación.
  • Aumenta el límite de tamaño del mensajeSignalR. ADVERTENCIA: Aumentar el límite puede aumentar el riesgo de ataques por denegación de servicio (DoS).

Recursos de Blazor Server adicionales

La representación previa puede mejorar la optimización del motor de búsqueda (SEO) mediante la representación del contenido de la respuesta HTTP inicial que los motores de búsqueda pueden usar para calcular la clasificación de página.

Después de configurar el proyecto, use la guía que aparece en las secciones siguientes en función de los requisitos del proyecto:

Configuración

Una aplicación de Pages o MVC existente Razor puede integrar Razor componentes en páginas o vistas:

  1. En el archivo de diseño del proyecto:

    • Agregue la siguiente etiqueta <base> al elemento <head> en Pages/Shared/_Layout.cshtml (Razor Pages) o Views/Shared/_Layout.cshtml (MVC):

      HTML 
      <base href="~/" />

      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.

    • Agregue una etiqueta <script> para el script blazor.server.js inmediatamente antes de la sección de representación Scripts.

      Pages/Shared/_Layout.cshtml (Razor Pages) o Views/Shared/_Layout.cshtml (MVC):

      CSHTML 
          ...
    <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

      El marco agrega el script blazor.server.js a la aplicación. No es necesario agregar manualmente un archivo de script blazor.server.js a la aplicación.

  2. Agregue un archivo imports a la carpeta raíz del proyecto con el contenido siguiente. Cambia el marcador de posición {APP NAMESPACE} al espacio de nombres del proyecto.

    _Imports.razor:

    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 {APP NAMESPACE}

  3. Registre el servicio Blazor Server en Startup.ConfigureServices.

    En Startup.cs:

    C# 
    services.AddServerSideBlazor();

  4. Agregue el punto de conexión Blazor Hub a los puntos de conexión (app.UseEndpoints) de Startup.Configure.

    Startup.cs:

    C# 
    endpoints.MapBlazorHub();

  5. Integre los componentes en cualquier página o vista. Por ejemplo, agrega un componente Counter a la carpeta Shared del proyecto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/Shared/Counter.razor (MVC):

    razor 
    <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++;
    }
}

    Razor Pages:

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

    Pages/Index.cshtml:

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

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

    En el ejemplo anterior, reemplace el marcador de posición {APP NAMESPACE} por el espacio de nombres de la aplicación.

    MVC:

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

    Views/Home/Index.cshtml:

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

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

Para obtener más información, consulta la sección Representación de componentes a partir de una página o vista.

Uso de componentes enrutables en una aplicación Razor Pages

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones Razor Pages:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Nota

    Con la publicación de ASP.NET Core 5.0.1 y para las versiones 5.x adicionales, el componente Router incluye el parámetro PreferExactMatches establecido en @true. Para más información, vea Migración de ASP.NET Core 3.1 a 5.0.

  3. Agregue una página _Host al proyecto con el contenido siguiente.

    Pages/_Host.cshtml:

    CSHTML 
    @page "/blazor"
@{
    Layout = "_Layout";
}

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

    Los componentes usan el archivo compartido _Layout.cshtml para su diseño.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, vea Asistente de etiquetas de componente en ASP.NET Core.

  4. En los puntos de conexión Startup.Configure de Startup.cs, agregue una ruta de prioridad baja para la página _Host como último punto de conexión:

    C# 
    endpoints.MapFallbackToPage("/_Host");

    En el ejemplo siguiente se muestra la línea agregada en la configuración del punto de conexión de una aplicación típica:

    C# 
    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

  5. Agregue componentes enrutables al proyecto.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<h1>Routable 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++;
    }
}

  6. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Uso de componentes enrutables en una aplicación MVC

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones MVC, haga lo siguiente:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Nota

    Con la publicación de ASP.NET Core 5.0.1 y para las versiones 5.x adicionales, el componente Router incluye el parámetro PreferExactMatches establecido en @true. Para más información, vea Migración de ASP.NET Core 3.1 a 5.0.

  3. Agregue una vista _Host al proyecto con el contenido siguiente.

    Views/Home/_Host.cshtml:

    CSHTML 
    @{
    Layout = "_Layout";
}

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

    Los componentes usan el archivo compartido _Layout.cshtml para su diseño.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, consulta Asistente de etiquetas de componente en ASP.NET Core.

  4. Agrega una acción al controlador Home.

    Controllers/HomeController.cs:

    C# 
    public IActionResult Blazor()
{
   return View("_Host");
}

  5. En los puntos de conexión Startup.Configure de Startup.cs, agregue una ruta de prioridad baja para la acción del controlador que devuelva la vista _Host:

    C# 
    endpoints.MapFallbackToController("Blazor", "Home");

    En el ejemplo siguiente se muestra la línea agregada en la configuración del punto de conexión de una aplicación típica:

    C# 
    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Agregue componentes enrutables al proyecto.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<h1>Routable 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++;
    }
}

  7. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Representación de componentes a partir de una página o vista

Esta sección pertenece a la adición de componentes a páginas o vistas, donde los componentes no son enrutables directamente desde las solicitudes del usuario.

Para representar un componente a partir de una página o vista, usa el asistente de etiquetas de componente.

Representación de componentes interactivos con estado

Los componentes interactivos con estado se pueden agregar a una página de Razor o una vista.

Cuando se representa la página o la vista:

  • 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.

La siguiente página de Razor representa un componente Counter:

CSHTML 
<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obtener más información, consulta Asistente de etiquetas de componente en ASP.NET Core.

Representación de componentes no interactivos

En la siguiente página de Razor, el componente Counter se representa de forma estática con un valor inicial que se especifica mediante un formulario. Como el componente se representa de forma estática, no es interactivo:

CSHTML 
<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obtener más información, consulta Asistente de etiquetas de componente en ASP.NET Core.

Espacios de nombres de componentes

Si usas una carpeta personalizada para contener los componentes Razor del proyecto, agrega el espacio de nombres que representa la carpeta a la página o vista, o bien al archivo _ViewImports.cshtml. 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.
CSHTML 
@using {APP NAMESPACE}.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.

Tamaño de estado antes de la representación y límite de tamaño del mensaje SignalR

Un tamaño de estado preprotegendo grande puede superar Blazorel límite de tamaño del mensaje del SignalR circuito, lo que da como resultado lo siguiente:

  • El circuito SignalR no se puede inicializar con un error en el cliente: Circuit host not initialized.
  • La interfaz de usuario de reconexión del cliente aparece cuando se produce un error en el circuito. No es posible la recuperación.

Para resolver el problema, usa uno de los enfoques siguientes:

  • Reduce la cantidad de datos que se están colocando en el estado anterior a la representación.
  • Aumenta el límite de tamaño del mensajeSignalR. ADVERTENCIA: Aumentar el límite puede aumentar el riesgo de ataques por denegación de servicio (DoS).

Recursos de Blazor Server adicionales

Razor Los componentes se pueden integrar en Razor aplicaciones Pages o MVC. Cuando se representa la página o la vista, los componentes se pueden representar previamente al mismo tiempo.

La representación previa puede mejorar la optimización del motor de búsqueda (SEO) mediante la representación del contenido de la respuesta HTTP inicial que los motores de búsqueda pueden usar para calcular la clasificación de página.

Después de configurar el proyecto, use la guía que aparece en las secciones siguientes en función de los requisitos del proyecto:

Configuración

Una aplicación de Pages o MVC existente Razor puede integrar Razor componentes en páginas o vistas:

  1. En el archivo de diseño del proyecto:

    • Agregue la siguiente etiqueta <base> al elemento <head> en Pages/Shared/_Layout.cshtml (Razor Pages) o Views/Shared/_Layout.cshtml (MVC):

      diff 
      + <base href="~/" />

      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.

    • Agregue una etiqueta <script> para el script blazor.server.js inmediatamente antes de la sección de representación Scripts.

      Pages/Shared/_Layout.cshtml (Razor Pages) o Views/Shared/_Layout.cshtml (MVC):

      CSHTML 
          ...
    <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

      El marco agrega el script blazor.server.js a la aplicación. No es necesario agregar manualmente un archivo de script blazor.server.js a la aplicación.

  2. Agregue un archivo imports a la carpeta raíz del proyecto con el contenido siguiente. Cambia el marcador de posición {APP NAMESPACE} al espacio de nombres del proyecto.

    _Imports.razor:

    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 {APP NAMESPACE}

  3. Registre el servicio Blazor Server en Startup.ConfigureServices.

    Startup.cs:

    C# 
    services.AddServerSideBlazor();

  4. Agregue el punto de conexión Blazor Hub a los puntos de conexión (app.UseEndpoints) de Startup.Configure.

    Startup.cs:

    C# 
    endpoints.MapBlazorHub();

  5. Integre los componentes en cualquier página o vista. Por ejemplo, agrega un componente Counter a la carpeta Shared del proyecto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/Shared/Counter.razor (MVC):

    razor 
    <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++;
    }
}

    Razor Pages:

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

    Pages/Index.cshtml:

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

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

    En el ejemplo anterior, reemplace el marcador de posición {APP NAMESPACE} por el espacio de nombres de la aplicación.

    MVC:

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

    Views/Home/Index.cshtml:

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

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

Para obtener más información, consulta la sección Representación de componentes a partir de una página o vista.

Uso de componentes enrutables en una aplicación Razor Pages

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones Razor Pages:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Agregue una página _Host al proyecto con el contenido siguiente.

    Pages/_Host.cshtml:

    CSHTML 
    @page "/blazor"
@{
    Layout = "_Layout";
}

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

    Los componentes usan el archivo compartido _Layout.cshtml para su diseño.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, vea Asistente de etiquetas de componente en ASP.NET Core.

  4. En los puntos de conexión Startup.Configure de Startup.cs, agregue una ruta de prioridad baja para la página _Host como último punto de conexión:

    C# 
    endpoints.MapFallbackToPage("/_Host");

    En el ejemplo siguiente se muestra la línea agregada en la configuración del punto de conexión de una aplicación típica:

    C# 
    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

  5. Agregue componentes enrutables al proyecto.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<h1>Routable 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++;
    }
}

  6. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Uso de componentes enrutables en una aplicación MVC

Esta sección pertenece a la incorporación de componentes que se pueden enrutar directamente desde las solicitudes del usuario.

Para admitir componentes Razor enrutables en aplicaciones MVC, haga lo siguiente:

  1. Sigue las instrucciones de la sección Configuración.

  2. Agrega un componente App a la raíz del proyecto con el contenido siguiente.

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Agregue una vista _Host al proyecto con el contenido siguiente.

    Views/Home/_Host.cshtml:

    CSHTML 
    @{
    Layout = "_Layout";
}

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

    Los componentes usan el archivo compartido _Layout.cshtml para su diseño.

    RenderMode configura si el componente App:

    • Se representa previamente en la página.
    • Se representa como HTML estático en la página o si incluye la información necesaria para arrancar una aplicación Blazor desde el agente de usuario.

    Para obtener más información sobre el asistente de etiquetas de componentes, como pasar parámetros y configurar RenderMode, consulta Asistente de etiquetas de componente en ASP.NET Core.

  4. Agrega una acción al controlador Home.

    Controllers/HomeController.cs:

    C# 
    public IActionResult Blazor()
{
   return View("_Host");
}

  5. En los puntos de conexión Startup.Configure de Startup.cs, agregue una ruta de prioridad baja para la acción del controlador que devuelva la vista _Host:

    C# 
    endpoints.MapFallbackToController("Blazor", "Home");

    En el ejemplo siguiente se muestra la línea agregada en la configuración del punto de conexión de una aplicación típica:

    C# 
    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Agregue componentes enrutables al proyecto.

    Pages/RoutableCounter.razor:

    razor 
    @page "/routable-counter"

<h1>Routable 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++;
    }
}

  7. Ejecuta el proyecto y ve al componente RoutableCounter enrutable en /routable-counter.

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

Representación de componentes a partir de una página o vista

Esta sección pertenece a la adición de componentes a páginas o vistas, donde los componentes no son enrutables directamente desde las solicitudes del usuario.

Para representar un componente a partir de una página o vista, usa el asistente de etiquetas de componente.

Representación de componentes interactivos con estado

Los componentes interactivos con estado se pueden agregar a una página de Razor o una vista.

Cuando se representa la página o la vista:

  • 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.

La siguiente página de Razor representa un componente Counter:

CSHTML 
<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obtener más información, consulta Asistente de etiquetas de componente en ASP.NET Core.

Representación de componentes no interactivos

En la siguiente página de Razor, el componente Counter se representa de forma estática con un valor inicial que se especifica mediante un formulario. Como el componente se representa de forma estática, no es interactivo:

CSHTML 
<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obtener más información, consulta Asistente de etiquetas de componente en ASP.NET Core.

Espacios de nombres de componentes

Si usas una carpeta personalizada para contener los componentes Razor del proyecto, agrega el espacio de nombres que representa la carpeta a la página o vista, o bien al archivo _ViewImports.cshtml. 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.
CSHTML 
@using {APP NAMESPACE}.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.

Tamaño de estado antes de la representación y límite de tamaño del mensaje SignalR

Un tamaño de estado preprotegendo grande puede superar Blazorel límite de tamaño del mensaje del SignalR circuito, lo que da como resultado lo siguiente:

  • El circuito SignalR no se puede inicializar con un error en el cliente: Circuit host not initialized.
  • La interfaz de usuario de reconexión del cliente aparece cuando se produce un error en el circuito. No es posible la recuperación.

Para resolver el problema, usa uno de los enfoques siguientes:

  • Reduce la cantidad de datos que se están colocando en el estado anterior a la representación.
  • Aumenta el límite de tamaño del mensajeSignalR. ADVERTENCIA: Aumentar el límite puede aumentar el riesgo de ataques por denegación de servicio (DoS).

Recursos de Blazor Server adicionales