Integre componentes do ASP.NET Core Razor com MVC ou Razor Pages

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 9 deste artigo.

Razor componentes podem ser integrados em aplicações Razor Pages ou MVC. Quando a página ou exibição é renderizada, os componentes podem ser pré-renderizados ao mesmo tempo.

Importante

As alterações de estrutura nas versões ASP.NET Core levaram a diferentes conjuntos de instruções neste artigo. Antes de usar as diretrizes deste artigo, confirme se o seletor de versão do documento na parte superior deste artigo corresponde à versão do ASP.NET Core que você pretende usar para seu aplicativo.

A pré-renderização pode melhorar a Otimização para Motores de Busca (SEO) ao renderizar conteúdo para a resposta HTTP inicial que os motores de busca podem usar para calcular o ranking da página.

Depois de configurar o projeto, use as orientações nas seguintes seções, dependendo dos requisitos do projeto:

Para componentes que são diretamente roteáveis a partir de solicitações do usuário. Siga estas orientações quando os visitantes devem ser capazes de fazer um pedido HTTP no seu navegador para um componente com uma diretiva @page.
- Usar componentes roteáveis numa Razor aplicação Páginas
- Usar componentes roteáveis em um aplicativo MVC
Para componentes que não são diretamente roteáveis a partir de pedidos do utilizador, consulte a secção Renderizar componentes de uma página ou exibição. Siga estas orientações quando a aplicação incorporar componentes em páginas ou vistas existentes usando o Component Tag Helper.

Configuração

Utilize as seguintes orientações para integrar os componentes Razor em páginas ou vistas de uma aplicação Pages ou MVC existente.

Adicione um arquivo de importação à pasta raiz do projeto com o seguinte conteúdo. Altere o placeholder {APP NAMESPACE} para o namespace do projeto.

_Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

No arquivo de layout do projeto (Pages/Shared/_Layout.cshtmlRazor em aplicativos Pages ou Views/Shared/_Layout.cshtml em aplicativos MVC):
- Adicione a seguinte <base> tag e HeadOutlet componente Tag Helper ao <head> elemento :
```
<base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />
```
  O href valor (o caminho base do aplicativo) no exemplo anterior pressupõe que o aplicativo reside no caminho da URL raiz (/). Se a aplicação for uma subaplicação, consulte caminho base da aplicação do ASP.NET CoreBlazor.
  
  O HeadOutlet componente é usado para renderizar o conteúdo do cabeçalho (<head>) para títulos de página (PageTitle componente) e outros elementos do cabeçalho (HeadContent componente) definidos pelos Razor componentes. Para obter mais informações, consulte Controlar o conteúdo do cabeçote em aplicativos ASP.NET CoreBlazor.
- Adicione uma <script> tag para o blazor.server.js script imediatamente antes da seção de Scripts renderização (@await RenderSectionAsync(...)):
```
<script src="_framework/blazor.server.js"></script>
```
  A estrutura adiciona o blazor.server.js script ao aplicativo. Não há necessidade de adicionar manualmente um blazor.server.js arquivo de script ao aplicativo.
Observação

Normalmente, o layout é carregado por meio de um _ViewStart.cshtml arquivo.
Registar os serviços em Blazor Server, onde os serviços estão registados em Program.cs.
```
builder.Services.AddServerSideBlazor();
```
Adicione o Blazor ponto de extremidade do Hub aos pontos de extremidade de Program.cs onde as rotas são mapeadas. Coloque a seguinte linha após a chamada para MapRazorPages (Razor Páginas) ou MapControllerRoute (MVC):
```
app.MapBlazorHub();
```
Integre componentes em qualquer página ou visualização. Por exemplo, adicione um componente Counter à pasta Shared do projeto.

Pages/Shared/Counter.razor (Razor Páginas) ou Views/Shared/Counter.razor (MVC):
```
<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
```
Razor Páginas:

Na página do Index numa aplicação Pages Razor, adicione o namespace do componente Counter e integre o componente na página. Quando a Index página é carregada, o componente Counter é pré-renderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Pages/Index.cshtml:
```
@page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />
```
MVC:

Na vista do Index projeto de uma aplicação MVC, adicione o namespace do componente Counter e incorpore o componente na vista. Quando a vista Index é carregada, o componente Counter é prerenderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Views/Home/Index.cshtml:
```
@using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />
```

Para obter mais informações, consulte a seção Renderizar componentes de uma página ou visualização.

Utilize componentes roteáveis numa aplicação de Páginas Razor

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicações de Páginas Razor:

Siga as orientações na seção Configuração .

Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Adicione uma _Host página ao projeto com o seguinte conteúdo. Substitua o marcador {APP NAMESPACE} pelo espaço de nomes da aplicação.

Pages/_Host.cshtml:
```
@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<component type="typeof(App)" render-mode="ServerPrerendered" />
```
Observação

O exemplo anterior pressupõe que o componente HeadOutlet e o script Blazor (_framework/blazor.server.js) são renderizados pelo layout da aplicação. Para obter mais informações, consulte a seção Configuração .

No .NET 10 ou posterior, o Blazor script é incluído pelo framework se o projeto contiver pelo menos um Razor ficheiro componente (.razor). Se a sua aplicação exigir o Blazor script mas não contiver pelo menos um componente, adicione a seguinte propriedade MSBuild ao ficheiro de projeto da aplicação para forçar a inclusão incondicional do script:
```
<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>
```
RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Nos Program.cs endpoints, adicione uma rota de baixa prioridade para a página _Host como o último endpoint.
```
app.MapFallbackToPage("/_Host");
```

Adicione componentes roteáveis ao projeto. O exemplo a seguir é um componente RoutableCounter baseado no componente Counter nos modelos de projeto Blazor.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Usar componentes roteáveis em um aplicativo MVC

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicativos MVC:

Siga as orientações na seção Configuração .

Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Adicione uma _Host vista ao projeto com o seguinte conteúdo. Substitua o marcador {APP NAMESPACE} pelo espaço de nomes da aplicação.

Views/Home/_Host.cshtml:
```
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<component type="typeof(App)" render-mode="ServerPrerendered" />
```
Observação

O exemplo anterior pressupõe que o componente HeadOutlet e o script Blazor (_framework/blazor.server.js) são renderizados pelo layout da aplicação. Para obter mais informações, consulte a seção Configuração .

No .NET 10 ou posterior, o Blazor script é incluído pelo framework se o projeto contiver pelo menos um Razor ficheiro componente (.razor). Se a sua aplicação exigir o Blazor script mas não contiver pelo menos um componente, adicione a seguinte propriedade MSBuild ao ficheiro de projeto da aplicação para forçar a inclusão incondicional do script:
```
<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>
```
RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Adicione uma ação ao Home controlador.

Controllers/HomeController.cs:
```
public IActionResult Blazor()
{
   return View("_Host");
}
```
Nos endpoints Program.cs, adicione uma rota de baixa prioridade para a ação do controlador que retorna a vista _Host.
```
app.MapFallbackToController("Blazor", "Home");
```

Crie uma Pages pasta no aplicativo MVC e adicione componentes roteáveis. O exemplo a seguir é um componente RoutableCounter baseado no componente Counter nos modelos de projeto Blazor.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Renderizar componentes de uma página ou vista

Esta seção diz respeito à adição de componentes a páginas ou exibições, onde os componentes não são diretamente roteáveis a partir de solicitações do usuário.

Para renderizar um componente de uma página ou vista, use o Auxiliar de Tags de Componente.

Renderizar componentes interativos com estado

Componentes interativos com estado podem ser adicionados a uma Razor página ou vista.

Quando a página ou exibição é renderizada:

O componente é pré-renderizado com a página ou vista.
O estado inicial do componente usado para pré-renderização é perdido.
Novo estado do componente é criado quando a SignalR conexão é estabelecida.

A seguinte página Razor renderiza o componente Counter.

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Renderizar componentes não interativos

Na página seguinte Razor , o Counter componente é renderizado estaticamente com um valor inicial especificado usando um formulário. Como o componente é renderizado estaticamente, o componente não é interativo:

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Namespaces de componentes

Ao usar uma pasta personalizada para armazenar os Razor componentes do projeto, adicione o namespace que representa a pasta à página/exibição ou ao _ViewImports.cshtml arquivo. No exemplo a seguir:

Os componentes são armazenados na Components pasta do projeto.
O espaço reservado {APP NAMESPACE} é o namespace do projeto. Components representa o nome da pasta.

@using {APP NAMESPACE}.Components

O _ViewImports.cshtml arquivo está localizado na Pages pasta de um Razor aplicativo Pages ou na Views pasta de um aplicativo MVC.

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

Persistir estado pré-renderizado

Sem guardar o estado pré-renderizado, o estado utilizado durante a pré-renderização é perdido e precisa ser recriado quando a aplicação estiver totalmente carregada. Se qualquer estado for configurado de forma assíncrona, a interface do utilizador pode cintilar à medida que a interface pré-renderizada é substituída por espaços reservados temporários e depois inteiramente renderizada novamente.

Para persistir o estado de componentes pré-renderizados, utilize o Assistente de Marca de Persistência de Estado de Componentes (fonte de referência). Adicione a tag do Auxiliar de Etiquetas, <persist-component-state />, dentro da tag de fechamento </body> da página _Host em um aplicativo que pré-renderiza componentes.

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 a lista suspensa Alternar entre 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).

Em Pages/_Host.cshtml de Blazor aplicações que estão ServerPrerendered numa Blazor Server aplicação:

<body>
    ...

    <persist-component-state />
</body>

Decida qual estado deve persistir usando o serviço PersistentComponentState. O [PersistentState] atributo aplicado a uma propriedade registra um retorno de chamada para persistir o estado durante a pré-renderização e o carrega quando o componente é renderizado interativamente ou o serviço é instanciado.

No exemplo a seguir, o {TYPE} espaço reservado representa o tipo de dados a serem persistidos (por exemplo, WeatherForecast[]).

@code {
    [PersistentState]
    public {TYPE} Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Data ??= await ...;
    }
}

No exemplo a seguir, o componente WeatherForecastPreserveState persiste o estado de previsão do tempo durante a pré-renderização e, em seguida, recupera o estado para inicializar o componente. O Persist Component State Tag Helper mantém o estado do componente após todas as invocações do componente.

WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (Forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in Forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    [PersistentState]
    public WeatherForecast[]? Forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await WeatherForecastService.GetForecastAsync(
            DateOnly.FromDateTime(DateTime.Now));
    }
}

Decida qual estado deve persistir usando o serviço PersistentComponentState. PersistentComponentState.RegisterOnPersisting regista um callback para persistir o estado do componente antes que a aplicação seja pausada. O estado é recuperado quando o aplicativo é retomado. Faça a chamada no final do código de inicialização para evitar uma possível condição de concorrência durante o desligamento da aplicação.

No exemplo a seguir:

O {TYPE} espaço reservado representa o tipo de dados a serem persistidos (por exemplo, WeatherForecast[]).
O marcador de posição {TOKEN} é uma cadeia identificadora de estado (por exemplo, fetchdata).

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(
                    DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Ao inicializar componentes com o mesmo estado usado durante a pré-renderização, todas as etapas de inicialização dispendiosas são executadas apenas uma vez. A interface do usuário renderizada também corresponde à interface do usuário pré-renderizada, portanto, nenhuma cintilação ocorre no navegador.

O estado pré-renderizado persistente é transferido para o cliente, onde é usado para restaurar o estado do componente. ASP.NET Core Data Protection garante que os dados sejam transferidos de forma segura em Blazor Server aplicativos.

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Um estado pré-renderizado de tamanho grande pode exceder o limite de tamanho da mensagem do circuito Blazor do SignalR, resultando no seguinte:

O circuito SignalR falha ao inicializar com um erro no cliente: Circuit host not initialized.
A interface de reconexão no cliente aparece quando o circuito falha. A recuperação não é possível.

Para resolver o problema, use uma das seguintes abordagens:

Reduza a quantidade de dados que você está colocando no estado pré-renderizado.
Aumente o limite de tamanho da mensagem SignalR. AVISO: Aumentar o limite pode aumentar o risco de ataques de negação de serviço (DoS).

Recursos adicionais Blazor Server

Gerenciamento de estado: Armazenamento protegido do navegador: Manipule a pré-renderização
Razor assuntos do ciclo de vida dos componentes que dizem respeito à pré-renderização
Autenticação e autorização: aspetos gerais
Manipular erros: Pré-renderização
Hospede e implante aplicativos Blazor do lado do servidor ASP.NET Core
Mitigação de Ameaças: Scripting entre Sites (XSS)
OnNavigateAsync é executado duas vezes ao pré-renderizar: Manipular eventos de navegação assíncrona com OnNavigateAsync

Depois de configurar o projeto, use as orientações nas seguintes seções, dependendo dos requisitos do projeto:

Componentes roteáveis: para componentes que são diretamente roteáveis a partir de solicitações do usuário. Siga estas orientações quando os visitantes devem ser capazes de fazer um pedido HTTP no seu navegador para um componente com uma diretiva @page.
- Usar componentes roteáveis numa Razor aplicação Páginas
- Usar componentes roteáveis em um aplicativo MVC
Render components from a page or view: Para componentes que não são diretamente roteáveis a partir de pedidos do utilizador. Siga estas orientações quando a aplicação incorporar componentes em páginas ou vistas existentes usando o Component Tag Helper.

Configuração

Utilize as seguintes orientações para integrar os componentes Razor em páginas ou vistas de uma aplicação Pages ou MVC existente.

Importante

O uso de uma página de layout (_Layout.cshtml) com um Auxiliar de Tag de Componente para um HeadOutlet componente é necessário para controlar o <head> conteúdo, como o título da página (PageTitle componente) e outros elementos de cabeçalho (HeadContent componente). Para obter mais informações, consulte Controlar o conteúdo do cabeçote em aplicativos ASP.NET CoreBlazor.

No arquivo de layout do projeto:
- Adicionar a seguinte <base> tag e o componente Tag Helper HeadOutlet ao elemento <head> em Pages/Shared/_Layout.cshtml (Razor Pages) ou Views/Shared/_Layout.cshtml (MVC):
```
<base href="~/" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
```
  O href valor (o caminho base do aplicativo) no exemplo anterior pressupõe que o aplicativo reside no caminho da URL raiz (/). Se a aplicação for uma subaplicação, consulte caminho base da aplicação do ASP.NET CoreBlazor.
  
  O HeadOutlet componente é usado para renderizar o conteúdo do cabeçalho (<head>) para títulos de página (PageTitle componente) e outros elementos do cabeçalho (HeadContent componente) definidos pelos Razor componentes. Para obter mais informações, consulte Controlar o conteúdo do cabeçote em aplicativos ASP.NET CoreBlazor.
- Adicione uma <script> tag para o blazor.server.js script imediatamente antes da Scripts seção de renderização (@await RenderSectionAsync(...)) no layout do aplicativo.
  
  Pages/Shared/_Layout.cshtml (Razor Páginas) ou Views/Shared/_Layout.cshtml (MVC):
```
<script src="_framework/blazor.server.js"></script>
```
  A estrutura adiciona o blazor.server.js script ao aplicativo. Não há necessidade de adicionar manualmente um blazor.server.js arquivo de script ao aplicativo.

Adicione um arquivo de importação à pasta raiz do projeto com o seguinte conteúdo. Altere o placeholder {APP NAMESPACE} para o namespace do projeto.

_Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

Registar os serviços em Blazor Server, onde os serviços estão registados em Program.cs.
```
builder.Services.AddServerSideBlazor();
```
Adicione o Blazor ponto de extremidade do Hub aos pontos de extremidade de Program.cs onde as rotas são mapeadas.

Coloque a seguinte linha após a chamada para MapRazorPages (Razor Páginas) ou MapControllerRoute (MVC):
```
app.MapBlazorHub();
```
Integre componentes em qualquer página ou visualização. Por exemplo, adicione um componente Counter à pasta Shared do projeto.

Pages/Shared/Counter.razor (Razor Páginas) ou Views/Shared/Counter.razor (MVC):
```
<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
```
Razor Páginas:

Na página do Index numa aplicação Pages Razor, adicione o namespace do componente Counter e integre o componente na página. Quando a Index página é carregada, o componente Counter é pré-renderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Pages/Index.cshtml:
```
@page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />
```
MVC:

Na vista do Index projeto de uma aplicação MVC, adicione o namespace do componente Counter e incorpore o componente na vista. Quando a vista Index é carregada, o componente Counter é prerenderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Views/Home/Index.cshtml:
```
@using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />
```

Para obter mais informações, consulte a seção Renderizar componentes de uma página ou visualização.

Utilize componentes roteáveis numa aplicação de Páginas Razor

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicações de Páginas Razor:

Siga as orientações na seção Configuração .

Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Adicione uma _Host página ao projeto com o seguinte conteúdo.

Pages/_Host.cshtml:
```
@page "/blazor"
@namespace {APP NAMESPACE}.Pages.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />
```
Nesse cenário, os componentes usam o arquivo compartilhado _Layout.cshtml para seu layout.

Importante

O uso de uma página de layout (_Layout.cshtml) com um Auxiliar de Tag de Componente para um HeadOutlet componente é necessário para controlar o <head> conteúdo, como o título da página (PageTitle componente) e outros elementos de cabeçalho (HeadContent componente). Para obter mais informações, consulte Controlar o conteúdo do cabeçote em aplicativos ASP.NET CoreBlazor.

RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Nos Program.cs endpoints, adicione uma rota de baixa prioridade para a página _Host como o último endpoint.
```
app.MapFallbackToPage("/_Host");
```

Adicione componentes roteáveis ao projeto. O exemplo a seguir é um componente RoutableCounter baseado no componente Counter nos modelos de projeto Blazor.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Usar componentes roteáveis em um aplicativo MVC

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicativos MVC:

Siga as orientações na seção Configuração .

Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Adicione uma _Host vista ao projeto com o seguinte conteúdo.

Views/Home/_Host.cshtml:
```
@namespace {APP NAMESPACE}.Views.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />
```
Os componentes usam o arquivo compartilhado _Layout.cshtml para seu layout.

Importante

O uso de uma página de layout (_Layout.cshtml) com um Auxiliar de Tag de Componente para um HeadOutlet componente é necessário para controlar o <head> conteúdo, como o título da página (PageTitle componente) e outros elementos de cabeçalho (HeadContent componente). Para obter mais informações, consulte Controlar o conteúdo do cabeçote em aplicativos ASP.NET CoreBlazor.

RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Adicione uma ação ao Home controlador.

Controllers/HomeController.cs:
```
public IActionResult Blazor()
{
   return View("_Host");
}
```
Nos endpoints Program.cs, adicione uma rota de baixa prioridade para a ação do controlador que retorna a vista _Host.
```
app.MapFallbackToController("Blazor", "Home");
```

Crie uma Pages pasta no aplicativo MVC e adicione componentes roteáveis. O exemplo a seguir é um componente RoutableCounter baseado no componente Counter nos modelos de projeto Blazor.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Renderizar componentes de uma página ou vista

Esta seção diz respeito à adição de componentes a páginas ou exibições, onde os componentes não são diretamente roteáveis a partir de solicitações do usuário.

Para renderizar um componente de uma página ou vista, use o Auxiliar de Tags de Componente.

Renderizar componentes interativos com estado

Componentes interativos com estado podem ser adicionados a uma Razor página ou vista.

Quando a página ou exibição é renderizada:

O componente é pré-renderizado com a página ou vista.
O estado inicial do componente usado para pré-renderização é perdido.
Novo estado do componente é criado quando a SignalR conexão é estabelecida.

A seguinte página Razor renderiza o componente Counter.

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Importante

Renderizar componentes não interativos

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Importante

Namespaces de componentes

Os componentes são armazenados na Components pasta do projeto.
O espaço reservado {APP NAMESPACE} é o namespace do projeto. Components representa o nome da pasta.

@using {APP NAMESPACE}.Components

O _ViewImports.cshtml arquivo está localizado na Pages pasta de um Razor aplicativo Pages ou na Views pasta de um aplicativo MVC.

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

Persistir estado pré-renderizado

Para resolver esses problemas, Blazor suporta a persistência de estado numa página pré-renderizada usando o Persist Component State Tag Helper. Adicione a tag do Tag Helper, <persist-component-state />, dentro da tag de fechamento </body>.

Pages/_Layout.cshtml:

<body>
    ...

    <persist-component-state />
</body>

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Um estado pré-renderizado de tamanho grande pode exceder o limite de tamanho da mensagem do circuito Blazor do SignalR, resultando no seguinte:

O circuito SignalR falha ao inicializar com um erro no cliente: Circuit host not initialized.
A interface de reconexão no cliente aparece quando o circuito falha. A recuperação não é possível.

Para resolver o problema, use uma das seguintes abordagens:

Reduza a quantidade de dados que você está colocando no estado pré-renderizado.
Aumente o limite de tamanho da mensagem SignalR. AVISO: Aumentar o limite pode aumentar o risco de ataques de negação de serviço (DoS).

Recursos adicionais Blazor Server

Gerenciamento de estado: Armazenamento protegido do navegador: Manipule a pré-renderização
Razor assuntos do ciclo de vida dos componentes que dizem respeito à pré-renderização
Autenticação e autorização: aspetos gerais
Manipular erros: Pré-renderização
Hospede e implante aplicativos Blazor do lado do servidor ASP.NET Core
Mitigação de Ameaças: Scripting entre Sites (XSS)

Depois de configurar o projeto, use as orientações nas seguintes seções, dependendo dos requisitos do projeto:

Componentes roteáveis: para componentes que são diretamente roteáveis a partir de solicitações do usuário. Siga estas orientações quando os visitantes devem ser capazes de fazer um pedido HTTP no seu navegador para um componente com uma diretiva @page.
- Usar componentes roteáveis numa Razor aplicação Páginas
- Usar componentes roteáveis em um aplicativo MVC
Render components from a page or view: Para componentes que não são diretamente roteáveis a partir de pedidos do utilizador. Siga estas orientações quando a aplicação incorporar componentes em páginas ou vistas existentes usando o Component Tag Helper.

Configuração

Um aplicativo existente de Pages ou MVC Razor pode integrar componentes Razor em páginas ou vistas:

No arquivo de layout do projeto:
- Adicione a tag <base> seguinte ao elemento <head> em Pages/Shared/_Layout.cshtml (Razor Páginas) ou Views/Shared/_Layout.cshtml (MVC):
```
<base href="~/" />
```
  O href valor (o caminho base do aplicativo) no exemplo anterior pressupõe que o aplicativo reside no caminho da URL raiz (/). Se a aplicação for uma subaplicação, consulte caminho base da aplicação do ASP.NET CoreBlazor.
- Adicione uma <script> tag para o blazor.server.js script imediatamente antes da Scripts seção de renderização.
  
  Pages/Shared/_Layout.cshtml (Razor Páginas) ou Views/Shared/_Layout.cshtml (MVC):
```
    ...
    <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
```
  A estrutura adiciona o blazor.server.js script ao aplicativo. Não há necessidade de adicionar manualmente um blazor.server.js arquivo de script ao aplicativo.

Adicione um arquivo de importação à pasta raiz do projeto com o seguinte conteúdo. Altere o placeholder {APP NAMESPACE} para o namespace do projeto.

_Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

Registe o serviço Blazor Server em Startup.ConfigureServices.

Em Startup.cs:
```
services.AddServerSideBlazor();
```
Adicione o ponto final Hub Blazor aos pontos finais app.UseEndpoints de Startup.Configure.

Startup.cs:
```
endpoints.MapBlazorHub();
```
Integre componentes em qualquer página ou visualização. Por exemplo, adicione um componente Counter à pasta Shared do projeto.

Pages/Shared/Counter.razor (Razor Páginas) ou Views/Shared/Counter.razor (MVC):
```
<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
```
Razor Páginas:

Na página do Index numa aplicação Pages Razor, adicione o namespace do componente Counter e integre o componente na página. Quando a Index página é carregada, o componente Counter é pré-renderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Pages/Index.cshtml:
```
@page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>
```
No exemplo anterior, substitua o espaço reservado {APP NAMESPACE} pelo namespace do aplicativo.

MVC:

Na vista do Index projeto de uma aplicação MVC, adicione o namespace do componente Counter e incorpore o componente na vista. Quando a vista Index é carregada, o componente Counter é prerenderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Views/Home/Index.cshtml:
```
@using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>
```

Para obter mais informações, consulte a seção Renderizar componentes de uma página ou visualização.

Utilize componentes roteáveis numa aplicação de Páginas Razor

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicações de Páginas Razor:

Siga as orientações na seção Configuração .
Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:
```
@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>
```
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.
Adicione uma _Host página ao projeto com o seguinte conteúdo.

Pages/_Host.cshtml:
```
@page "/blazor"
@{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
```
Os componentes usam o arquivo compartilhado _Layout.cshtml para seu layout.

RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Nos pontos de extremidade de Startup.Configure, adicione uma rota de baixa prioridade para a página Startup.cs como o último ponto de extremidade.
```
endpoints.MapFallbackToPage("/_Host");
```
O exemplo a seguir mostra a linha adicionada na configuração de ponto de extremidade de um aplicativo típico:
```
app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});
```

Adicione componentes roteáveis ao projeto.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Usar componentes roteáveis em um aplicativo MVC

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicativos MVC:

Siga as orientações na seção Configuração .
Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:
```
@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>
```
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.
Adicione uma _Host vista ao projeto com o seguinte conteúdo.

Views/Home/_Host.cshtml:
```
@{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
```
Os componentes usam o arquivo compartilhado _Layout.cshtml para seu layout.

RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Adicione uma ação ao Home controlador.

Controllers/HomeController.cs:
```
public IActionResult Blazor()
{
   return View("_Host");
}
```

Nos Startup.Configure pontos de extremidade de Startup.cs, adicione uma rota de baixa prioridade para a ação do controlador que retorna a vista _Host.

endpoints.MapFallbackToController("Blazor", "Home");

O exemplo a seguir mostra a linha adicionada na configuração de ponto de extremidade de um aplicativo típico:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

Adicione componentes roteáveis ao projeto.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Renderizar componentes de uma página ou vista

Esta seção diz respeito à adição de componentes a páginas ou exibições, onde os componentes não são diretamente roteáveis a partir de solicitações do usuário.

Para renderizar um componente de uma página ou vista, use o Auxiliar de Tags de Componente.

Renderizar componentes interativos com estado

Componentes interativos com estado podem ser adicionados a uma Razor página ou vista.

Quando a página ou exibição é renderizada:

O componente é pré-renderizado com a página ou vista.
O estado inicial do componente usado para pré-renderização é perdido.
Novo estado do componente é criado quando a SignalR conexão é estabelecida.

A seguinte página Razor renderiza o componente Counter.

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Renderizar componentes não interativos

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Namespaces de componentes

Os componentes são armazenados na Components pasta do projeto.
O espaço reservado {APP NAMESPACE} é o namespace do projeto. Components representa o nome da pasta.

@using {APP NAMESPACE}.Components

O _ViewImports.cshtml arquivo está localizado na Pages pasta de um Razor aplicativo Pages ou na Views pasta de um aplicativo MVC.

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

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Um estado pré-renderizado de tamanho grande pode exceder o limite de tamanho da mensagem do circuito Blazor do SignalR, resultando no seguinte:

O circuito SignalR falha ao inicializar com um erro no cliente: Circuit host not initialized.
A interface de reconexão no cliente aparece quando o circuito falha. A recuperação não é possível.

Para resolver o problema, use uma das seguintes abordagens:

Reduza a quantidade de dados que você está colocando no estado pré-renderizado.
Aumente o limite de tamanho da mensagem SignalR. AVISO: Aumentar o limite pode aumentar o risco de ataques de negação de serviço (DoS).

Recursos adicionais Blazor Server

Gerenciamento de estado: Armazenamento protegido do navegador: Manipule a pré-renderização
Razor assuntos do ciclo de vida dos componentes que dizem respeito à pré-renderização
Autenticação e autorização: aspetos gerais
Manipular erros: Pré-renderização
Hospede e implante aplicativos Blazor do lado do servidor ASP.NET Core
Mitigação de Ameaças: Scripting entre Sites (XSS)

Razor componentes podem ser integrados em aplicações Razor Pages ou MVC. Quando a página ou exibição é renderizada, os componentes podem ser pré-renderizados ao mesmo tempo.

Depois de configurar o projeto, use as orientações nas seguintes seções, dependendo dos requisitos do projeto:

Componentes roteáveis: para componentes que são diretamente roteáveis a partir de solicitações do usuário. Siga estas orientações quando os visitantes devem ser capazes de fazer um pedido HTTP no seu navegador para um componente com uma diretiva @page.
- Usar componentes roteáveis numa Razor aplicação Páginas
- Usar componentes roteáveis em um aplicativo MVC
Render components from a page or view: Para componentes que não são diretamente roteáveis a partir de pedidos do utilizador. Siga estas orientações quando a aplicação incorporar componentes em páginas ou vistas existentes usando o Component Tag Helper.

Configuração

Um aplicativo existente de Pages ou MVC Razor pode integrar componentes Razor em páginas ou vistas:

No arquivo de layout do projeto:
- Adicione a tag <base> seguinte ao elemento <head> em Pages/Shared/_Layout.cshtml (Razor Páginas) ou Views/Shared/_Layout.cshtml (MVC):
```
+ <base href="~/" />
```
  O href valor (o caminho base do aplicativo) no exemplo anterior pressupõe que o aplicativo reside no caminho da URL raiz (/). Se a aplicação for uma subaplicação, consulte caminho base da aplicação do ASP.NET CoreBlazor.
- Adicione uma <script> tag para o blazor.server.js script imediatamente antes da Scripts seção de renderização.
  
  Pages/Shared/_Layout.cshtml (Razor Páginas) ou Views/Shared/_Layout.cshtml (MVC):
```
    ...
    <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
```
  A estrutura adiciona o blazor.server.js script ao aplicativo. Não há necessidade de adicionar manualmente um blazor.server.js arquivo de script ao aplicativo.

Adicione um arquivo de importação à pasta raiz do projeto com o seguinte conteúdo. Altere o placeholder {APP NAMESPACE} para o namespace do projeto.

_Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

Registe o serviço Blazor Server em Startup.ConfigureServices.

Startup.cs:
```
services.AddServerSideBlazor();
```
Adicione o ponto final Hub Blazor aos pontos finais app.UseEndpoints de Startup.Configure.

Startup.cs:
```
endpoints.MapBlazorHub();
```
Integre componentes em qualquer página ou visualização. Por exemplo, adicione um componente Counter à pasta Shared do projeto.

Pages/Shared/Counter.razor (Razor Páginas) ou Views/Shared/Counter.razor (MVC):
```
<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
```
Razor Páginas:

Na página do Index numa aplicação Pages Razor, adicione o namespace do componente Counter e integre o componente na página. Quando a Index página é carregada, o componente Counter é pré-renderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Pages/Index.cshtml:
```
@page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>
```
No exemplo anterior, substitua o espaço reservado {APP NAMESPACE} pelo namespace do aplicativo.

MVC:

Na vista do Index projeto de uma aplicação MVC, adicione o namespace do componente Counter e incorpore o componente na vista. Quando a vista Index é carregada, o componente Counter é prerenderizado na página. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Views/Home/Index.cshtml:
```
@using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>
```

Para obter mais informações, consulte a seção Renderizar componentes de uma página ou visualização.

Utilize componentes roteáveis numa aplicação de Páginas Razor

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicações de Páginas Razor:

Siga as orientações na seção Configuração .

Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

Adicione uma _Host página ao projeto com o seguinte conteúdo.

Pages/_Host.cshtml:
```
@page "/blazor"
@{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
```
Os componentes usam o arquivo compartilhado _Layout.cshtml para seu layout.

RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Nos pontos de extremidade de Startup.Configure, adicione uma rota de baixa prioridade para a página Startup.cs como o último ponto de extremidade.
```
endpoints.MapFallbackToPage("/_Host");
```
O exemplo a seguir mostra a linha adicionada na configuração de ponto de extremidade de um aplicativo típico:
```
app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});
```

Adicione componentes roteáveis ao projeto.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Usar componentes roteáveis em um aplicativo MVC

Esta seção diz respeito à adição de componentes que são diretamente roteáveis a partir de solicitações do usuário.

Para suportar componentes roteáveis Razor em aplicativos MVC:

Siga as orientações na seção Configuração .

Adicione um App componente à raiz do projeto com o seguinte conteúdo.

App.razor:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

Adicione uma _Host vista ao projeto com o seguinte conteúdo.

Views/Home/_Host.cshtml:
```
@{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
```
Os componentes usam o arquivo compartilhado _Layout.cshtml para seu layout.

RenderMode Configura se o componente App:
- É pré-renderizado na página.
- É renderizado como HTML estático na página ou se inclui as informações necessárias para inicializar uma aplicação Blazor a partir do agente do usuário.
Para obter mais informações sobre o Auxiliar de Tag de Componente, incluindo parâmetros de passagem e RenderMode configuração, consulte Auxiliar de Tag de Componente no ASP.NET Core.
Adicione uma ação ao Home controlador.

Controllers/HomeController.cs:
```
public IActionResult Blazor()
{
   return View("_Host");
}
```

Nos Startup.Configure pontos de extremidade de Startup.cs, adicione uma rota de baixa prioridade para a ação do controlador que retorna a vista _Host.

endpoints.MapFallbackToController("Blazor", "Home");

O exemplo a seguir mostra a linha adicionada na configuração de ponto de extremidade de um aplicativo típico:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

Adicione componentes roteáveis ao projeto.

Pages/RoutableCounter.razor:

@page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Execute o projeto e navegue até o componente roteável RoutableCounter em /routable-counter.

Para obter mais informações sobre namespaces, consulte a seção Namespaces de componentes .

Renderizar componentes de uma página ou vista

Esta seção diz respeito à adição de componentes a páginas ou exibições, onde os componentes não são diretamente roteáveis a partir de solicitações do usuário.

Para renderizar um componente de uma página ou vista, use o Auxiliar de Tags de Componente.

Renderizar componentes interativos com estado

Componentes interativos com estado podem ser adicionados a uma Razor página ou vista.

Quando a página ou exibição é renderizada:

O componente é pré-renderizado com a página ou vista.
O estado inicial do componente usado para pré-renderização é perdido.
Novo estado do componente é criado quando a SignalR conexão é estabelecida.

A seguinte página Razor renderiza o componente Counter.

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Renderizar componentes não interativos

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Para obter mais informações, consulte Component Tag Helper no ASP.NET Core.

Namespaces de componentes

Os componentes são armazenados na Components pasta do projeto.
O espaço reservado {APP NAMESPACE} é o namespace do projeto. Components representa o nome da pasta.

@using {APP NAMESPACE}.Components

O _ViewImports.cshtml arquivo está localizado na Pages pasta de um Razor aplicativo Pages ou na Views pasta de um aplicativo MVC.

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

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Um estado pré-renderizado de tamanho grande pode exceder o limite de tamanho da mensagem do circuito Blazor do SignalR, resultando no seguinte:

O circuito SignalR falha ao inicializar com um erro no cliente: Circuit host not initialized.
A interface de reconexão no cliente aparece quando o circuito falha. A recuperação não é possível.

Para resolver o problema, use uma das seguintes abordagens:

Reduza a quantidade de dados que você está colocando no estado pré-renderizado.
Aumente o limite de tamanho da mensagem SignalR. AVISO: Aumentar o limite pode aumentar o risco de ataques de negação de serviço (DoS).

Recursos adicionais Blazor Server

Gerenciamento de estado: Armazenamento protegido do navegador: Manipule a pré-renderização
Razor assuntos do ciclo de vida dos componentes que dizem respeito à pré-renderização
Autenticação e autorização: aspetos gerais
Manipular erros: Pré-renderização
Hospede e implante aplicativos Blazor do lado do servidor ASP.NET Core
Mitigação de Ameaças: Scripting entre Sites (XSS)

Comentários

Esta página foi útil?

Last updated on 2025-11-11

Partilhar via

Integre componentes do ASP.NET Core Razor com MVC ou Razor Pages

Configuração

Utilize componentes roteáveis numa aplicação de Páginas Razor

Usar componentes roteáveis em um aplicativo MVC

Renderizar componentes de uma página ou vista

Renderizar componentes interativos com estado

Renderizar componentes não interativos

Namespaces de componentes

Persistir estado pré-renderizado

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Recursos adicionais Blazor Server

Configuração

Utilize componentes roteáveis numa aplicação de Páginas Razor

Usar componentes roteáveis em um aplicativo MVC

Renderizar componentes de uma página ou vista

Renderizar componentes interativos com estado

Renderizar componentes não interativos

Namespaces de componentes

Persistir estado pré-renderizado

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Recursos adicionais Blazor Server

Configuração

Utilize componentes roteáveis numa aplicação de Páginas Razor

Usar componentes roteáveis em um aplicativo MVC

Renderizar componentes de uma página ou vista

Renderizar componentes interativos com estado

Renderizar componentes não interativos

Namespaces de componentes

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Recursos adicionais Blazor Server

Configuração

Utilize componentes roteáveis numa aplicação de Páginas Razor

Usar componentes roteáveis em um aplicativo MVC

Renderizar componentes de uma página ou vista

Renderizar componentes interativos com estado

Renderizar componentes não interativos

Namespaces de componentes

Tamanho do estado pré-renderizado e limite de tamanho da mensagem SignalR

Recursos adicionais Blazor Server

Comentários

Recursos adicionais