Páginas, roteamento e layouts

Artigo
06/08/2023

Dica

Esse conteúdo é um trecho do livro eletrônico, Blazor para Desenvolvedores do ASP NET Web Forms para o Azure, disponível no .NET Docs ou como um PDF para download gratuito que pode ser lido offline.

Baixar PDF

Os aplicativos do ASP.NET Web Forms são compostos de 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 é renderizado dinamicamente no servidor. As contas de renderização para a marcação HTML da página e seus controles de servidor.

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

Blazor também dá suporte à vinculação profunda. 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 profundos enviados ao servidor são roteados para o aplicativo Blazor, o que roteia o lado do cliente da solicitação para o componente correto.

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

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

Nome.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 aplicativo Blazor seria semelhante a esta:

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 Blazor, crie um componente e adicione a diretiva Razor @page para especificar a rota do componente. A diretiva @page usa um único parâmetro, que é o modelo de rota a ser adicionado a esse componente.

@page "/counter"

O parâmetro de modelo de rota é necessário. Ao contrário do ASP.NET Web Forms, a rota para um componenteBlazornão é inferida 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 componente com o mesmo nome (não diferencia maiúsculas de 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 de rota. Por exemplo, para restringir a ID do produto para 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 com suporte Blazor, consulte restrições de rota.

Componente roteador

O roteamento Blazor é tratado pelo componente Router. O componente Router normalmente é usado no componente raiz do aplicativo (Aplicativo.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 especificado AppAssembly e no opcionalmente especificado AdditionalAssemblies. Quando o navegador navega, o Router intercepta a navegação e renderiza o conteúdo de seu parâmetro Found com o extraído RouteData se uma rota corresponder ao endereço, caso contrário, o Router renderiza seu parâmetro NotFound.

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

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

Em ASP.NET Web Forms, você dispara 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.Blazor Blazor não usa um modelo de solicitação de resposta. No entanto, você pode disparar navegações do navegador diretamente, como você pode com o JavaScript.

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

Obter o endereço do navegador atual
Obter o endereço básico
Disparar navegações
Ser notificado quando o endereço for alterado

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

@page "/"
@inject NavigationManager NavigationManager

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

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

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

URLs base

Se o aplicativo Blazor for implantado em um caminho base, você precisará especificar o URL base nos metadados da página usando a marca <base> para roteamento para a propriedade de trabalho. Se a página do 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 do host for HTML estático, você precisará especificar explicitamente o URL base.

<base href="~/" />

Layout de página

O layout da 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 de 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 diretiva <%@ Master %>. O conteúdo dos arquivos .master é codificado como você faria com uma página .aspx, mas com a adição de controles <asp:ContentPlaceHolder> para marcar onde as páginas podem fornecer conteúdo.

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>

Em Blazor, você manipula o layout da 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 local em que o layout renderiza sua propriedade Body.

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

@layout MainLayout

Especifique 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 de conteúdo, mas os layouts em Blazor têm apenas uma única propriedade Body. Essa limitação de componentes de layout Blazor será resolvida em uma versão futura.

Páginas Mestras em ASP.NET Web Forms podem ser aninhadas. Ou seja, uma Página Mestra também pode usar uma Página Mestra. Os componentes de layout em Blazor também podem estar 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:

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

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

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

Anterior Avançar

Compartilhar via

Páginas, roteamento e layouts

Criar páginas

Componente roteador

Navegação

URLs base

Layout de página

Recursos adicionais