Layouts principais do ASP.NET Core Blazor

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e .NET Core. Para a versão atual, consulte a versão .NET 10 deste artigo.

Este artigo explica como criar componentes de layout reutilizáveis para aplicativos Blazor.

Utilidade dos layouts Blazor

Alguns elementos do aplicativo, como menus, mensagens de direitos autorais e logotipos da empresa, geralmente fazem parte da apresentação geral do aplicativo. Colocar uma cópia da marcação desses elementos em todos os componentes de um aplicativo não é eficiente. Sempre que um desses elementos é atualizado, todos os componentes que usam o elemento devem ser atualizados. Essa abordagem é cara de manter e pode levar a conteúdo inconsistente se uma atualização for perdida. Layouts resolvem esses problemas.

Um layout Blazor é um componente Razor que compartilha marcação com componentes que fazem referência a ele. Os layouts podem utilizar vinculação de dados , injeção de dependência e outros recursos dos componentes.

Criar um componente de layout

Para criar um componente de layout:

Crie um componente Razor definido por um modelo Razor ou código C#. Os componentes de layout baseados em um modelo de Razor usam a extensão de arquivo .razor como os componentes Razor comuns. Como os componentes de layout são compartilhados entre os componentes de um aplicativo, eles geralmente são colocados na pasta Shared ou Layout do aplicativo. No entanto, os layouts podem ser colocados em qualquer local acessível aos componentes que o utilizam. Por exemplo, um layout pode ser colocado na mesma pasta que os componentes que o usam.
Herdar o componente a partir de LayoutComponentBase. O LayoutComponentBase define uma propriedade Body (tipoRenderFragment) para o conteúdo renderizado dentro do layout.
Use a sintaxe Razor@Body para especificar o local na marcação de layout onde o conteúdo é renderizado.

Observação

Para obter mais informações sobre RenderFragment, consulte componentes do ASP.NET Core Razor.

O componente DoctorWhoLayout a seguir mostra o modelo Razor de um componente de layout. O layout herda LayoutComponentBase e define a @Body entre a barra de navegação (<nav>...</nav>) e o rodapé (<footer>...</footer>).

DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<PageTitle>Doctor Who® Database</PageTitle>

<header>
    <h1>Doctor Who® Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

@inherits LayoutComponentBase

<PageTitle>Doctor Who® Database</PageTitle>

<header>
    <h1>Doctor Who® Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ Episode Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ Episode Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ Episode Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ Episode Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

componente `MainLayout`

Em um aplicativo criado a partir de um modelo de projeto Blazor, o componente MainLayout é o layout padrão do aplicativo. Blazorlayout adota o Flexbox layout model (W3C especificação).

O recurso de isolamento CSS do Blazor. Por convenção, os estilos são fornecidos pela folha de estilo de mesmo nome, MainLayout.razor.css. A implementação do framework ASP.NET Core da folha de estilos está disponível para inspeção no repositório de referência ASP.NET Core (dotnet/aspnetcore repositório GitHub):

Blazor Web App: Localize MainLayout.razor.css na Components/Layout pasta do projeto de servidor no modelo de projeto.
Blazor WebAssembly MainLayout.razor.css.

Observação

Os links de documentação para a fonte de referência do .NET geralmente carregam a ramificação padrão do repositório, que representa o desenvolvimento atual para a próxima versão do .NET. Para selecionar uma tag para uma versão específica, use o menu suspenso de seleção de ramificações ou tags. Para obter mais informações, consulte Como selecionar uma marca de versão do código-fonte do ASP.NET Core (dotnet/AspNetCore.Docs #26205).

O recurso de isolamento CSS do Blazor. Por convenção, os estilos são fornecidos pela folha de estilo de mesmo nome, MainLayout.razor.css.

Componentes de layout renderizados estaticamente

Quando um Blazor Web App adota a renderização por página/componente (o Routes componente não especifica um modo de renderização interativo), os componentes de layout são renderizados estaticamente no servidor. A aplicação de um modo de renderização interativo diretamente a um layout não é suportada porque Blazor não suporta a serialização de um RenderFragment (@Body neste caso) como um parâmetro de componente raiz. Por exemplo, colocar @rendermode InteractiveServer na parte superior do MainLayout componente resulta na seguinte exceção de tempo de execução:

System.InvalidOperationException: Não é possível passar o parâmetro 'Body' para o componente 'MainLayout' com rendermode 'InteractiveServerRenderMode'. Isso ocorre porque o parâmetro é do tipo delegado 'Microsoft.AspNetCore.Components.RenderFragment', que é um código arbitrário e não pode ser serializado.

Isso se aplica a qualquer componente de layout herdado de LayoutComponentBase um aplicativo que adote renderização por página/componente.

Esse cenário pode ser abordado em uma versão futura do Blazor. Para obter mais informações, consulte [Blazor] Suporte à serialização de fragmentos de renderização do SSR (dotnet/aspnetcore #52768). Enquanto isso, você pode adotar a seguinte abordagem em um Blazor Web App que adota a renderização por página/componente.

Crie um componente wrapper que seja capaz de interatividade. No exemplo a seguir, um componente envolvente contém uma Blazor seção que pode receber conteúdo de um componente filho.

No arquivo _Imports.razor, adicione uma instrução @using para as seções (Microsoft.AspNetCore.Components.Sections):

@using Microsoft.AspNetCore.Components.Sections

Crie o seguinte componente de wrapper interativo na Pages pasta.

Pages/InteractiveWrapper.razor:

@rendermode InteractiveServer

<div>
    <SectionOutlet SectionName="top-bar" />
</div>

@ChildContent

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

O Counter componente pode usar o componente wrapper e definir o conteúdo da seção interativa. No exemplo a seguir, um botão de contador é colocado na seção.

Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<InteractiveWrapper>

    <SectionContent SectionName="top-bar">
        <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    </SectionContent>

    <PageTitle>Counter</PageTitle>

    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

</InteractiveWrapper>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Outros componentes ao redor do aplicativo também podem encapsular o conteúdo no componente e definir o conteúdo da InteractiveWrapper seção interativa.

Aplicar um layout

Disponibilizar o namespace de layout

Os locais de arquivos de layout e namespaces mudaram com o passar do tempo para o framework Blazor. Dependendo da versão do Blazor e do tipo de aplicativo Blazor que você está criando, talvez seja necessário indicar o namespace do layout ao usá-lo. Ao fazer referência a uma implementação de layout e o layout não for encontrado sem indicar o namespace do layout, adote uma das seguintes abordagens:

Adicione uma diretiva @using ao arquivo _Imports.razor para o local dos layouts. No exemplo a seguir, uma pasta de layouts com o nome Layout está dentro de uma pasta Components e o namespace do aplicativo é BlazorSample:
```
@using BlazorSample.Components.Layout
```
Adicione uma diretiva @using na parte superior da definição do componente onde o layout é usado:
```
@using BlazorSample.Components.Layout
@layout DoctorWhoLayout
```
Qualifique completamente o namespace do layout onde ele é usado.
```
@layout BlazorSample.Components.Layout.DoctorWhoLayout
```

Aplicar um layout a um componente

Use a diretiva @layoutRazor para aplicar um layout a um componente de Razor roteável que tenha uma diretiva @page. O compilador converte @layout em um LayoutAttribute e aplica o atributo à classe componente.

O conteúdo do seguinte componente Episodes é inserido no DoctorWhoLayout na posição de @Body.

Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>Doctor Who® Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sunmakers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

@page "/episodes"
@layout DoctorWhoLayout

<h2>Doctor Who® Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sunmakers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

@page "/episodes"
@layout DoctorWhoLayout

<h2>Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

@page "/episodes"
@layout DoctorWhoLayout

<h2>Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

@page "/episodes"
@layout DoctorWhoLayout

<h2>Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

A marcação HTML renderizada a seguir é produzida pelo componente DoctorWhoLayout e Episodes anterior. As marcações supérfluas não aparecem a fim de se concentrar no conteúdo fornecido pelos dois componentes envolvidos.

O título H1 "base de dados" (<h1>...</h1>) no cabeçalho (<header>...</header>), barra de navegação (<nav>...</nav>) e informações de marca registada no rodapé (<footer>...</footer>) provêm do componente DoctorWhoLayout.
O título "episódios" H2 (<h2>...</h2>) e a lista de episódios (<ul>...</ul>) vêm do componente Episodes.

<header>
    <h1 ...>...</h1>
</header>

<nav>
    ...
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<footer>
    ...
</footer>

Especificar o layout diretamente em um componente substitui um layout padrão :

Definido por uma diretiva @layout importada de um arquivo _Imports.razor, conforme descrito na seção a seguir: Aplicar um layout a uma pasta de componentes .
Defina como o layout padrão do aplicativo, conforme descrito na seção Aplicar um layout padrão a um aplicativo mais adiante neste artigo.

Aplicar um layout a uma pasta de componentes

Cada pasta de um aplicativo pode, opcionalmente, conter um arquivo de modelo chamado _Imports.razor. O compilador inclui as diretivas especificadas no arquivo de importação em todos os modelos de Razor na mesma pasta e recursivamente em todas as suas subpastas. Portanto, um arquivo de _Imports.razor contendo @layout DoctorWhoLayout garante que todos os componentes em uma pasta usem o componente DoctorWhoLayout. Não há necessidade de adicionar repetidamente @layout DoctorWhoLayout a todos os componentes Razor (.razor) dentro da pasta e subpastas.

_Imports.razor:

@layout DoctorWhoLayout
...

O arquivo _Imports.razor é semelhante ao arquivo _ViewImports.cshtml para exibições de Razor e páginas, mas especificamente aplicado a arquivos de componentes de Razor.

A especificação de um layout no _Imports.razor substitui um layout especificado como o layout de aplicativo padrão do roteador, que é descrito na seção a seguir.

Advertência

Não adicionar uma diretiva Razor@layout ao arquivo _Imports.razor raiz, o que resulta em um loop infinito de layouts. Para controlar o layout padrão do aplicativo, especifique o layout no componente Router. Para obter mais informações, consulte a seção Aplicar um layout padrão a um aplicativo a seguir.

A mesma condição resulta ao usar um arquivo _Imports.razor para aplicar um layout a uma pasta de componentes com a diretiva @layout e o próprio componente de layout está na mesma pasta ou hierarquia de pastas do arquivo _Imports.razor. Um loop infinito de aplicação do layout ocorre porque a diretiva @layout também é aplicada ao componente de layout. Para evitar problemas de recursão, recomendamos armazenar componentes de layout em sua própria pasta (por exemplo, Layouts), longe de onde _Imports.razor arquivos estão aplicando-os.

Observação

A diretiva @layoutRazor aplica apenas um layout a componentes Razor enrutáveis com uma diretiva @page.

Aplicar um layout padrão a um aplicativo

Especifique o layout padrão do aplicativo no componente Router do componente RouteView. Use o parâmetro DefaultLayout para definir o tipo de layout:

<RouteView RouteData="routeData" DefaultLayout="typeof({LAYOUT})" />

No exemplo anterior, o espaço reservado {LAYOUT} é o layout (por exemplo, DoctorWhoLayout se o nome do ficheiro do layout é DoctorWhoLayout.razor). Talvez seja necessário identificar o namespace do layout, dependendo da versão do .NET e do tipo de Blazor aplicativo. Para obter mais informações, consulte a seção Disponibilizar o namespace de layout.

Especificar o layout como padrão no Router do componente RouteView é uma prática útil, pois é possível substituí-lo em cada componente ou pasta, conforme descrito nas secções anteriores deste artigo. Recomendamos usar o componente Router para definir o layout padrão do aplicativo, pois é a abordagem mais geral e flexível para o uso de layouts.

Aplicar um layout a conteúdo arbitrário (componente`LayoutView`)

Para definir um layout para um conteúdo arbitrário de modelo Razor, especifique o layout com um componente LayoutView. Você pode usar um LayoutView em qualquer componente Razor. O exemplo a seguir define um componente de layout nomeado ErrorLayout para o componente que inclui a marcação a seguir Razor .

<LayoutView Layout="typeof(ErrorLayout)">
    <h1>Page not found</h1>
    <p>Sorry, there's nothing at this address.</p>
</LayoutView>

Talvez seja necessário identificar o namespace do layout, dependendo da versão do .NET e do tipo de aplicativo Blazor. Para obter mais informações, consulte a seção Disponibilizar o namespace de layout.

Observação

Com o lançamento do .NET 5.0.1 e para quaisquer versões adicionais do 5.x, o Router componente inclui o PreferExactMatches parâmetro definido como @true. Para obter mais informações, consulte Migrar do ASP.NET Core 3.1 para o .NET 5.

Layouts aninhados

Um componente pode fazer referência a um layout que, por sua vez, faz referência a outro layout. Por exemplo, layouts aninhados são usados para criar estruturas de menu de vários níveis.

O exemplo seguinte mostra como utilizar layouts aninhados. O componente Episodes mostrado na seção Aplicar um layout a um componente é o componente a ser exibido. O componente faz referência ao componente DoctorWhoLayout.

O componente DoctorWhoLayout a seguir é uma versão modificada do exemplo mostrado anteriormente neste artigo. Os elementos de cabeçalho e rodapé são removidos e o layout faz referência a outro layout, ProductionsLayout. O componente Episodes é renderizado onde @Body aparece no DoctorWhoLayout.

DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<PageTitle>Doctor Who® Database</PageTitle>

<h1>Doctor Who® Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<PageTitle>Doctor Who® Database</PageTitle>

<h1>Doctor Who® Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

O componente ProductionsLayout contém os elementos de layout de nível superior, onde os elementos de cabeçalho (<header>...</header>) e rodapé (<footer>...</footer>) agora residem. O DoctorWhoLayout com o componente Episodes é renderizado onde @Body aparece.

ProductionsLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

A seguinte marcação HTML renderizada é produzida pelo layout aninhado anterior. A marcação supérflua não aparece de forma a focar no conteúdo aninhado fornecido pelos três componentes envolvidos.

Os elementos cabeçalho (<header>...</header>), barra de navegação de produção (<nav>...</nav>) e rodapé (<footer>...</footer>) e seu conteúdo vêm do componente ProductionsLayout.
O cabeçalho H1 "base de dados" (<h1>...</h1>), a barra de navegação do episódio (<nav>...</nav>) e as informações de marca registada (<div>...</div>) vêm do componente DoctorWhoLayout.
O título "episódios" H2 (<h2>...</h2>) e a lista de episódios (<ul>...</ul>) vêm do componente Episodes.

<header>
    ...
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

<h1>...</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<div>
    ...
</div>

<footer>
    ...
</footer>

Quando os componentes roteáveis são integrados em um aplicativo Razor Pages, o layout compartilhado do aplicativo pode ser usado com os componentes. Para obter mais informações, consulte Razor.

Secções

Para controlar o conteúdo de um layout a partir de um componente Razor filho, consulte as seções do ASP.NET Core Blazor.

Recursos adicionais

Feedback

Esta página foi útil?

Last updated on 2025-11-11

Partilhar via

Layouts principais do ASP.NET Core Blazor

Utilidade dos layouts Blazor

Criar um componente de layout

componente MainLayout

Componentes de layout renderizados estaticamente

Aplicar um layout

Disponibilizar o namespace de layout

Aplicar um layout a um componente

Aplicar um layout a uma pasta de componentes

Aplicar um layout padrão a um aplicativo

Aplicar um layout a conteúdo arbitrário (componenteLayoutView)

Layouts aninhados

Compartilhar um layout do Razor Pages com componentes integrados

Secções

Recursos adicionais

Feedback

Recursos adicionais

componente `MainLayout`

Aplicar um layout a conteúdo arbitrário (componente`LayoutView`)