Páginas, roteamento e layouts

2025-06-17

Sugestão

Este conteúdo é um excerto do eBook, Blazor para ASP NET Web Forms Developers for Azure, disponível no .NET Docs ou como um PDF transferível gratuito que pode ser lido offline.

Descarregar PDF

ASP.NET aplicativos Web Forms são compostos por páginas definidas em arquivos .aspx . O endereço de cada página é baseado em seu caminho de arquivo físico no projeto. Quando um navegador faz uma solicitação para a página, o conteúdo da página é processado dinamicamente no servidor. O processo de renderização leva em consideração tanto a marcação HTML da página quanto os seus controlos de servidor.

No Blazor, cada página no aplicativo é um componente, normalmente definido em um arquivo .razor , com uma ou mais rotas especificadas. O roteamento acontece principalmente no lado do cliente sem envolver uma solicitação específica do servidor. O navegador primeiro faz uma solicitação para o endereço raiz do aplicativo. Em seguida, um componente raiz Router na Blazor app intercepta as solicitações de navegação e as encaminha para o componente correto.

Blazor também suporta deep linking. A vinculação profunda ocorre quando o navegador faz uma solicitação para uma rota específica diferente da raiz do aplicativo. As solicitações de links diretos enviadas ao servidor são encaminhadas para o aplicativo, que então encaminha a solicitação pelo lado do cliente para o componente correto.

Uma página simples em ASP.NET Web Forms pode conter a seguinte marcação:

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

A página equivalente em um Blazor aplicativo teria esta aparência:

Nome.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;
    }
}

Criar páginas

Para criar uma página em Blazor, crie um componente e adicione a diretiva Razor @page para especificar a rota para o componente. A @page diretiva usa um único parâmetro, que é o modelo de rota a ser adicionado a esse componente.

@page "/counter"

O parâmetro route template é obrigatório. Ao contrário de ASP.NET Web Forms, a rota para um Blazor componente não é inferida a partir de seu local de arquivo (embora isso possa ser um recurso adicionado no futuro).

A sintaxe do modelo de rota é a mesma sintaxe básica usada para roteamento em ASP.NET Web Forms. Os parâmetros de rota são especificados no modelo usando chaves. Blazor Associará valores de rota a parâmetros de componentes com o mesmo nome (sem distinção entre maiúsculas e minúsculas).

@page "/product/{id}"

<h1>Product @Id</h1>

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

Você também pode especificar restrições no valor do parâmetro route. Por exemplo, para restringir o ID do produto a ser um int:

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

<h1>Product @Id</h1>

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

Para obter uma lista completa das restrições de rota suportadas pelo Blazor, consulte Restrições de rota.

Componente do roteador

O roteamento em Blazor é gerido pelo componente Router. O Router componente é normalmente usado no componente raiz do aplicativo (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>

O componente Router descobre os componentes roteáveis no AppAssembly especificado e no AdditionalAssemblies opcionalmente especificado. Quando o navegador navega, o Router interceta a navegação e renderiza o conteúdo de seu Found parâmetro com o extraído RouteData se uma rota corresponde ao endereço, caso contrário, o Router renderiza seu NotFound parâmetro.

O componente RouteView manipula a renderização do componente correspondente especificado pelo RouteData, com seu layout, se tiver um. Se o componente correspondente não tiver um layout, o opcionalmente especificado DefaultLayout será usado.

O LayoutView componente renderiza seu conteúdo filho dentro do layout especificado. Veremos os layouts mais detalhadamente mais adiante neste capítulo.

Em ASP.NET Web Forms, você aciona a navegação para uma página diferente retornando uma resposta de redirecionamento para o navegador. Por exemplo:

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

Normalmente, não é possível retornar uma resposta de redirecionamento no Blazor. Blazor não usa um modelo de solicitação-resposta. No entanto, você pode acionar as navegações do navegador diretamente, como pode fazer com JavaScript.

Blazor fornece um NavigationManager serviço que pode ser usado para:

Obter o endereço atual do navegador
Obter o endereço base
Acionar navegações
Seja notificado quando o endereço for alterado

Para navegar para um endereço diferente, use o NavigateTo método:

@page "/"
@inject NavigationManager NavigationManager

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

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

Para obter uma descrição de todos os NavigationManager membros, consulte URI e auxiliares de estado de navegação.

Endereços base URL

Se a sua aplicação Blazor for implantada num caminho base, precisará especificar o URL base nos metadados da página usando a tag <base> para o encaminhamento funcionar corretamente. Se a página de host do aplicativo for renderizada pelo servidor usando o Razor, você poderá usar a ~/ sintaxe para especificar o endereço base do aplicativo. Se a página de host for HTML estático, você precisará especificar o URL base explicitamente.

<base href="~/" />

Layout da página

O layout de página em ASP.NET Web Forms é manipulado por Páginas Mestras. As Páginas Mestras definem um modelo com um ou mais espaços reservados para conteúdo que podem ser fornecidos por páginas individuais. As Páginas Mestras são definidas em arquivos .master e começam com a <%@ Master %> diretiva. O conteúdo dos arquivos .master é codificado como se fosse uma página .aspx , mas com a adição de <asp:ContentPlaceHolder> controles para marcar onde as páginas podem fornecer conteúdo.

Sítio.mestre

<%@ 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>

No Blazor, você manipula o layout de página usando componentes de layout. Os componentes de layout herdam de LayoutComponentBase, que define uma única Body propriedade do tipo RenderFragment, que pode ser usada para renderizar o conteúdo da página.

MainLayout.razor

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

Quando a página com um layout é renderizada, a página é renderizada dentro do conteúdo do layout especificado, no ponto onde o layout renderiza a sua propriedade Body.

Para aplicar um layout a uma página, use a @layout diretiva:

@layout MainLayout

Você pode especificar o layout para todos os componentes em uma pasta e subpastas usando um arquivo _Imports.razor . Você também pode especificar um layout padrão para todas as suas páginas usando o componente Roteador.

As Páginas Mestras podem definir vários espaços reservados para conteúdo, mas os layouts em Blazor possuem apenas uma única propriedade Body. Espera-se que esta limitação dos componentes de layout Blazor seja abordada numa versão futura.

As Páginas Mestras em ASP.NET Web Forms podem ser aninhadas. Ou seja, uma Página Mestra pode também utilizar outra Página Mestra. Os componentes de layout em Blazor também podem ser aninhados. Você pode aplicar um componente de layout a um componente de layout. O conteúdo do layout interno será renderizado dentro do layout externo.

ChildLayout.razor

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

Index.razor

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

A saída renderizada para a página seria, então:

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

Os layouts em Blazor normalmente não definem os elementos HTML raiz para uma página (<html>, <body>, <head>e assim por diante). Em vez disso, os elementos HTML raiz são definidos na página de host de um Blazor aplicativo, que é usada para renderizar o conteúdo HTML inicial do aplicativo (consulte Bootstrap Blazor). A página anfitriã pode renderizar vários componentes raiz para a aplicação com marcação envolvente.

Os componentes do Blazor, incluindo páginas, não podem renderizar <script> tags. Essa restrição de renderização existe porque <script> as tags são carregadas uma vez e, em seguida, não podem ser alteradas. Comportamento inesperado pode ocorrer se você tentar renderizar as tags dinamicamente usando a sintaxe Razor. Em vez disso, todas as <script> tags devem ser adicionadas à página de host do aplicativo.

Anterior Próximo

Partilhar via

Páginas, roteamento e layouts

Criar páginas

Componente do roteador

Navegação

Endereços base URL

Layout da página

Recursos adicionais