Páginas, roteamento e layouts
Gorjeta
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.
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. A renderização conta tanto para a marcação HTML da página quanto para seus controles 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 no aplicativo lida com a Blazor intercetação de 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 roteadas para o aplicativo, que então roteia Blazor a solicitação do 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 no Blazor, crie um componente e adicione a @page diretiva Razor 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 é Blazor manipulado Router pelo componente. 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 Router componente descobre os componentes roteáveis no especificado AppAssembly e no opcionalmente especificado.AdditionalAssemblies 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 RouteView componente manipula a renderização do componente correspondente especificado pelo com seu layout, RouteData 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.
Navegação
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.
Base URLs
Se seu Blazor aplicativo for implantado em um caminho base, você precisará especificar a URL base nos metadados da página usando a <base> propriedade tag for routing to work. 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="~/" />
Esquema de 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>© <%: 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 local onde o layout renderiza sua Body propriedade.
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 têm Blazor apenas uma única Body propriedade. Espera-se que essa limitação de componentes de layout seja abordada Blazor em uma versão futura.
As 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 também Blazor 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 de host pode renderizar vários componentes raiz para o aplicativo com marcação ao redor.
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.
