Páginas, enrutamiento y diseños

2025-06-18

Sugerencia

Este contenido es un extracto del libro electrónico "Blazor for ASP.NET Web Forms Developers for Azure" (Blazor para desarrolladores de ASP.NET Web Forms), disponible en Documentación de .NET o como un PDF descargable y gratuito que se puede leer sin conexión.

Descargar PDF

ASP.NET aplicaciones de Web Forms se componen de páginas definidas en archivos .aspx . La dirección de cada página se basa en su ruta de acceso de archivo física en el proyecto. Cuando un explorador realiza una solicitud a la página, el contenido de la página se representa dinámicamente en el servidor. La representación considera tanto el marcado HTML de la página como los controles del servidor.

En Blazor, cada página de la aplicación es un componente, normalmente definido en un archivo .razor , con una o varias rutas especificadas. El enrutamiento se produce principalmente en el lado cliente sin implicar una solicitud de servidor específica. El explorador realiza primero una solicitud a la dirección raíz de la aplicación. A continuación, un componente raíz Router de la Blazor aplicación controla la interceptación de solicitudes de navegación y los reenvía al componente correcto.

Blazor también admite enlaces profundos. La vinculación profunda se produce cuando el explorador realiza una solicitud a una ruta específica distinta de la raíz de la aplicación. Las solicitudes de enlaces profundos enviadas al servidor se enrutan a la aplicación Blazor, que luego enruta la solicitud del lado del cliente al componente correcto.

Una página sencilla de ASP.NET Web Forms puede contener el marcado siguiente:

Name.aspx

<%@ Page Title="Name" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Name.aspx.cs" Inherits="WebApplication1.Name" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        What is your name?<br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
    </div>
    <div>
        <asp:Literal ID="Literal1" runat="server" />
    </div>
</asp:Content>

Name.aspx.cs

public partial class Name : System.Web.UI.Page
{
    protected void Button1_Click1(object sender, EventArgs e)
    {
        Literal1.Text = "Hello " + TextBox1.Text;
    }
}

La página equivalente de una Blazor aplicación tendría este aspecto:

Name.razor

@page "/Name"
@layout MainLayout

<div>
    What is your name?<br />
    <input @bind="text" />
    <button @onclick="OnClick">Submit</button>
</div>
<div>
    @if (name != null)
    {
        @:Hello @name
    }
</div>

@code {
    string text;
    string name;

    void OnClick() {
        name = text;
    }
}

Crear páginas

Para crear una página en Blazor, cree un componente y agregue la @page directiva Razor para especificar la ruta del componente. La @page directiva toma un único parámetro, que es la plantilla de ruta que se va a agregar a ese componente.

@page "/counter"

El parámetro de la plantilla de ruta es obligatorio. A diferencia de ASP.NET Web Forms, la ruta a un Blazor componente no se deduce de su ubicación en el archivo (aunque esa funcionalidad podría añadirse en el futuro).

La sintaxis de la plantilla de ruta es la misma sintaxis básica que se usa para el enrutamiento en ASP.NET Web Forms. Los parámetros de ruta se especifican en la plantilla mediante corchetes. Blazor enlazará los valores de ruta a los parámetros de componente con el mismo nombre (sin distinción de mayúsculas y minúsculas).

@page "/product/{id}"

<h1>Product @Id</h1>

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

También puede especificar restricciones en el valor del parámetro route. Por ejemplo, para restringir el identificador de producto para que sea un int:

@page "/product/{id:int}"

<h1>Product @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

Para obtener una lista completa de las restricciones de ruta admitidas por Blazor, consulte Restricciones de ruta.

Componente de enrutador

El enrutamiento en Blazor está gestionado por el componente Router. El Router componente se usa normalmente en el componente raíz de la aplicación (App.razor).

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

El Router componente descubre los componentes enrutables en el AppAssembly especificado y, opcionalmente, en el AdditionalAssemblies especificado. Cuando el explorador navega, Router intercepta la navegación y representa el contenido de su Found parámetro con el extraído RouteData si una ruta coincide con la dirección; de lo contrario Router , representa su NotFound parámetro.

El RouteView componente controla la representación del componente coincidente especificado por RouteData con su diseño si tiene uno. Si el componente coincidente no tiene un diseño, entonces se utiliza el DefaultLayout especificado opcionalmente.

El componente LayoutView representa su contenido secundario dentro del diseño especificado. Veremos los diseños con más detalle más adelante en este capítulo.

En los formularios de ASP.NET Web Forms, se desencadena la navegación a otra página devolviendo una respuesta de redirección al explorador. Por ejemplo:

protected void NavigateButton_Click(object sender, EventArgs e)
{
    Response.Redirect("Counter");
}

La devolución de una respuesta de redirección no suele ser posible en Blazor. Blazor no usa un modelo de solicitud-respuesta. Sin embargo, puede iniciar navegaciones en el navegador web directamente, como lo hace con JavaScript.

Blazor proporciona un NavigationManager servicio que se puede usar para:

Obtención de la dirección actual del explorador
Obtención de la dirección base
Desencadenar navegaciones
Recibir una notificación cuando cambie la dirección

Para navegar a otra dirección, use el NavigateTo método :

@page "/"
@inject NavigationManager NavigationManager

<button @onclick="Navigate">Navigate</button>

@code {
    void Navigate() {
        NavigationManager.NavigateTo("counter");
    }
}

Para obtener una descripción de todos los miembros de NavigationManager, vea Aplicaciones auxiliares de URI y estado de navegación.

Direcciones URL base

Si su aplicación Blazor se implementa en una ruta base, debe especificar la URL base en los metadatos de la página mediante la etiqueta <base> para que el enrutamiento funcione correctamente. Si la página anfitriona de la aplicación se renderiza en el servidor usando Razor, entonces puedes usar la sintaxis ~/ para especificar la dirección base de la aplicación. Si la página host es HTML estática, debe especificar explícitamente la dirección URL base.

<base href="~/" />

Diseño de página

El diseño de página en ASP.NET Web Forms se controla mediante páginas maestras. Las páginas maestras definen una plantilla con uno o varios marcadores de posición de contenido que luego pueden ser completados por páginas individuales. Las páginas maestras se definen en archivos .master y comienzan con la <%@ Master %> directiva . El contenido de los archivos .master se codifica como una página .aspx, pero con la adición de <asp:ContentPlaceHolder> controles para marcar donde las páginas pueden proporcionar contenido.

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>
    </form>
</body>
</html>

En Blazor, se controla el diseño de página mediante componentes de diseño. Los componentes de diseño heredan de LayoutComponentBase, que define una sola Body propiedad de tipo RenderFragment, que se puede usar para representar el contenido de la página.

MainLayout.razor

@inherits LayoutComponentBase
<h1>Main layout</h1>
<div>
    @Body
</div>

Cuando se representa la página con un diseño, la página se representa dentro del contenido del diseño especificado en la ubicación donde el diseño representa su Body propiedad.

Para aplicar un diseño a una página, use la @layout directiva :

@layout MainLayout

Puede especificar el diseño de todos los componentes de una carpeta y subcarpeta mediante un archivo _Imports.razor . También puede especificar un diseño predeterminado para todas las páginas mediante el componente Enrutador.

Las páginas maestras pueden definir varios marcadores de posición de contenido, pero los diseños de Blazor solo tienen una propiedad Body. Esperamos que esta limitación de componentes de diseño de Blazor se aborde en una versión futura.

Las páginas maestras en ASP.NET Web Forms se pueden anidar. Es decir, una página maestra también puede usar una página maestra. Los componentes de diseño de Blazor también se pueden anidar. Puede aplicar un componente de diseño a un componente de diseño. El contenido del diseño interno se representará dentro del diseño exterior.

ChildLayout.razor

@layout MainLayout
<h2>Child layout</h2>
<div>
    @Body
</div>

Index.razor

@page "/"
@layout ChildLayout
<p>I'm in a nested layout!</p>

La salida representada para la página sería:

<h1>Main layout</h1>
<div>
    <h2>Child layout</h2>
    <div>
        <p>I'm in a nested layout!</p>
    </div>
</div>

Los diseños de Blazor no suelen definir los elementos HTML raíz de una página (<html>, <body>, <head>, etc.). Los elementos HTML raíz se definen en su lugar en la página host de una Blazor aplicación, que se usa para representar el contenido HTML inicial de la aplicación (consulte Bootstrap Blazor). La página host puede representar varios componentes raíz para la aplicación con marcado circundante.

Los componentes de Blazor, incluidas las páginas, no pueden representar <script> etiquetas. Esta restricción de representación existe porque <script> las etiquetas se cargan una vez y, a continuación, no se pueden cambiar. Puede producirse un comportamiento inesperado si intenta representar las etiquetas dinámicamente mediante la sintaxis de Razor. En su lugar, se deben agregar todas las <script> etiquetas a la página host de la aplicación.

Siguiente anterior

Compartir a través de

Páginas, enrutamiento y diseños

Crear páginas

Componente de enrutador

Navegación

Direcciones URL base

Diseño de página

Recursos adicionales