Compartilhar via

Páginas, roteamento e layouts

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

BlazorImagem em miniaturada da capa do livro eletrônico para-Desenvolvedores-do-ASP-NET-Web-Forms.

Aplicativos Web Forms ASP.NET 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 é renderizado dinamicamente no servidor. A renderização considera tanto a marcação HTML da página quanto os 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 manipula solicitações Blazor de navegação interceptadas 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 enviadas ao servidor são roteadas para o aplicativo Blazor, que então as direciona do lado do cliente para o componente correto.

Uma página simples no 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:

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

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 de modelo de rota é necessário. Ao contrário do ASP.NET Web Forms, a rota para um componente Blazornão é inferida de sua localização 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 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 com suporte por Blazor, consulte Restrições de Rota.

Componente do roteador

O roteamento em Blazor é tratado 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 especificado opcionalmente. Quando o navegador navega, o Router intercepta a navegação e renderiza o conteúdo de seu parâmetro Found com o valor extraído de RouteData se uma rota corresponde 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, incluindo seu layout, caso ele tenha um. Se o componente correspondente não tiver um layout, o opcionalmente 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.

No 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 em Blazor. Blazor não usa um modelo de solicitação-resposta. No entanto, você pode acionar diretamente as navegações do navegador, assim como pode fazer com JavaScript.

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

  • Obter o endereço do navegador atual
  • Obter o endereço base
  • Disparar navegações
  • Ser notificado quando o endereço for alterado

Para navegar até 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 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 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 hospedada for HTML estático, você precisará especificar a URL base explicitamente.

<base href="~/" />

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

In 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 @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 de conteúdo, mas os layouts em Blazor têm apenas uma única propriedade Body. Essa limitação dos componentes de Blazor layout 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 da página seria:

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

Normalmente, os layouts em Blazor 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 host pode renderizar vários componentes raiz para o aplicativo com marcação ao redor.

Componentes em Blazor, incluindo páginas, não conseguem renderizar <script> tags. Essa restrição de renderização existe porque <script> as marcas são carregadas uma vez e não podem ser alteradas. Um comportamento inesperado poderá 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 hospedagem do aplicativo.

AnteriorPróximo

  • Last updated on