Integrar componentes Razor do ASP.NET Core em aplicativos do ASP.NET Core

  • Artigo

Este artigo explica os cenários de integração de componentes do Razor em aplicativos do ASP.NET Core.

Integração de componentes Razor

Os componentes do Razor podem ser integrados a Razor Pages, MVC e outros tipos de aplicativos ASP.NET Core. Os componentes do Razor também podem ser integrados a qualquer aplicativo Web, incluindo aplicativos não baseados em ASP.NET Core, como elementos HTML personalizados.

Use as diretrizes nas seguintes seções, dependendo dos requisitos do projeto:

Adicionar o suporte para o Blazor a um aplicativo ASP.NET Core

Esta seção aborda a adição de suporte para o Blazor a um aplicativo ASP.NET Core:

Observação

Para os exemplos nesta seção, o nome e o namespace do aplicativo de exemplo são BlazorSample.

Adicionar renderização estática do lado do servidor (SSR estático)

Adicione uma pasta Components ao aplicativo.

Adicione o arquivo a seguir _Imports para namespaces usados por componentes Razor.

Components/_Imports.razor:

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

Altere o espaço reservado do namespace ({APP NAMESPACE}) para o namespace do aplicativo. Por exemplo:

@using BlazorSample
@using BlazorSample.Components

Adicione o roteador Blazor (<Router>, Router) ao aplicativo em um componente Routes, que é colocado na pasta do aplicativo Components.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Você pode fornecer um layout padrão com o parâmetro RouteView.DefaultLayout do componente RouteView:

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

Para obter mais informações, confira os layouts ASP.NET Core Blazor.

Adicione um componente App ao aplicativo, que serve como o componente raiz, que é o primeiro componente que o aplicativo carrega.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="BlazorSample.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Para o elemento <link> no exemplo anterior, altere BlazorSample o nome do arquivo da folha de estilos para corresponder ao nome do projeto do aplicativo. Por exemplo, um projeto nomeado ContosoApp usa o nome do ContosoApp.styles.css arquivo de folha de estilos:

<link rel="stylesheet" href="ContosoApp.styles.css" />

Adicione uma pasta Pages à pasta Components para manter componentes roteáveis Razor.

Adicione o seguinte componente Welcome para demonstrar o SSR estático.

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

No arquivo do projeto Program do ASP.NET Core:

  • Adicione uma instrução using à parte superior do arquivo para os componentes do projeto:

    using {APP NAMESPACE}.Components;

    Na linha anterior, altere o espaço reservado {APP NAMESPACE} para o namespace do aplicativo. Por exemplo:

    using BlazorSample.Components;

  • Adicione serviços de componente Razor (AddRazorComponents), que também adiciona automaticamente serviços antifalsificação (AddAntiforgery). Adicione a linha a seguir antes da linha que chama builder.Build()):

    builder.Services.AddRazorComponents();

  • Adicione o middleware antifalsificação ao pipeline de processamento de solicitação com UseAntiforgery. UseAntiforgery é chamado após a chamada para UseRouting. Se houver chamadas para UseRouting e UseEndpoints, a chamada para UseAntiforgery deve ser feita entre elas. Uma chamada para UseAntiforgery deve ser feita após chamadas para UseAuthenticatione UseAuthorization.

    app.UseAntiforgery();

  • Adicione MapRazorComponents ao pipeline de processamento de solicitação do aplicativo com o componente App (App.razor) especificado como o componente raiz padrão (o primeiro componente carregado). Coloque o seguinte código antes da linha que chama app.Run:

    app.MapRazorComponents<App>();

Quando o aplicativo é executado, o componente Welcome é acessado no ponto de extremidade /welcome.

Habilitar a renderização interativa do lado do servidor (SSR interativo)

Siga as diretrizes na seção Adicionar renderização estática do lado do servidor (SSR estático).

No arquivo do aplicativo Program, adicione uma chamada ao local AddInteractiveServerComponents em que os Razor serviços de componente são adicionados com AddRazorComponents:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Adicione uma chamada para AddInteractiveServerRenderMode em que os componentes Razor são mapeados com MapRazorComponents:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Adicione o seguinte componente Counter ao aplicativo que adota a renderização interativa do lado do servidor (SSR interativa).

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

Quando o aplicativo é executado, o componente Counter é acessado em /counter.

Habilitar a renderização automática interativa (automática) ou do lado do cliente (CSR)

Siga as diretrizes na seção Adicionar renderização estática do lado do servidor (SSR estático).

Os componentes que usam o modo de renderização automática interativa inicialmente usam SSR interativo. O runtime do .NET e o lote de aplicativos são baixados para o cliente em segundo plano e armazenados em cache para que possam ser utilizados em visitas futuras. Os componentes que usam o modo de renderização WebAssembly interativo só são renderizados interativamente no cliente depois que o pacote Blazor é baixado e o runtime Blazor é ativado. Tenha em mente que, ao usar os modos de renderização Interativa Automática ou Interativa webAssembly, o código do componente baixado para o cliente nãoé privado. Para obter mais informações, consulte ASP.NET Core Blazor modos de renderização.

Depois de decidir qual modo de renderização adotar:

Adicione uma referência de pacote para o Microsoft.AspNetCore.Components.WebAssembly.Server pacote NuGet ao aplicativo.

Observação

Para obter diretrizes sobre como adicionar pacotes a aplicativos .NET, consulte os artigos em Instalar e gerenciar pacotes no Fluxo de trabalho de consumo de pacotes (documentação do NuGet). Confirme as versões corretas de pacote em NuGet.org.

Crie um aplicativo Web doador Blazor para fornecer ativos ao aplicativo. Siga as diretrizes no artigo Ferramentas para ASP.NET Core Blazor, selecionando o suporte para os seguintes recursos de modelo ao gerar o Blazor Aplicativo Web.

Para o nome do aplicativo, use o mesmo nome do aplicativo ASP.NET Core, o que resulta na correspondência da marcação de nome do aplicativo em componentes e namespaces correspondentes no código. O uso do mesmo nome/namespace não é estritamente necessário, pois os namespaces podem ser ajustados depois que os ativos são movidos do aplicativo doador para o aplicativo ASP.NET Core. No entanto, o tempo é salvo correspondendo aos namespaces no início.

Visual Studio:

  • Para o modo de renderização interativo, selecione Automático (servidor e WebAssembly).
  • Defina o local de interatividade como por página/componente.
  • Desmarque a caixa de seleção para incluir páginas de exemplo.

.NET CLI:

  • Use a opção -int Auto.
  • Não use a opção -ai|--all-interactive.
  • Passe a opção -e|--empty.

No aplicativo Web do doador Blazor, copie todo o projeto .Client para a pasta de solução do aplicativo ASP.NET Core.

Importante

Não copie a pasta .Client para a pasta do projeto do ASP.NET Core. A melhor abordagem para organizar soluções .NET é colocar cada projeto da solução em sua própria pasta dentro de uma pasta de solução de nível superior. Se uma pasta de solução acima da pasta do projeto ASP.NET Core não existir, crie uma. Em seguida, copie a pasta do projeto .Client do aplicativo Web do doador Blazor para a pasta da solução. A estrutura final da pasta do projeto deve ter o seguinte layout:

  • BlazorSampleSolution (pasta de solução de nível superior)
    • BlazorSample (projeto original do ASP.NET Core)
    • BlazorSample.Client (.Client pasta do projeto do aplicativo Web do doador Blazor )

Para o arquivo de solução ASP.NET Core, você pode deixá-lo na pasta do projeto ASP.NET Core. Como alternativa, você pode mover o arquivo de solução ou criar um novo na pasta de solução de nível superior, desde que as referências do projeto apontem corretamente para os arquivos de projeto (.csproj) dos dois projetos na pasta da solução.

Se você nomeou o aplicativo Web doador Blazor quando criou o projeto do doador da mesma forma que o aplicativo ASP.NET Core, os namespaces usados pelos ativos doados correspondem aos do aplicativo ASP.NET Core. Você não deve precisar executar mais etapas para corresponder aos namespaces. Se você usou um namespace diferente ao criar o projeto do aplicativo Web doador Blazor, deverá ajustar os namespaces entre os ativos doados para corresponder se você pretende usar o restante dessas diretrizes exatamente como apresentado. Se os namespaces não corresponderem, ajuste os namespaces antes de prosseguirou ajuste os namespaces conforme você segue as orientações restantes nesta seção.

Exclua o aplicativo Web do doador Blazor, pois ele não tem mais uso nesse processo.

Adicione o projeto .Client à solução:

  • Visual Studio: clique com o botão direito do mouse na solução no Gerenciador de Soluções e selecione Adicionar>Projeto Existente. Navegue até a .Client pasta e selecione o arquivo de projeto (.csproj).

  • CLI do .NET: use o dotnet sln add comando para adicionar o projeto .Client à solução.

Adicione uma referência de projeto do projeto ASP.NET Core ao projeto cliente:

  • Visual Studio: clique com o botão direito do mouse no projeto ASP.NET Core e selecione Adicionar>Referência do Projeto. Selecione o projeto .Client e selecione OK.

  • CLI do .NET: na pasta do projeto do ASP.NET Core, use o seguinte comando:

    dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj

    O comando anterior pressupõe o seguinte:

    • O nome do arquivo do projeto é BlazorSample.Client.csproj.
    • O projeto .Client está em uma pasta BlazorSample.Client dentro da pasta da solução. A pasta .Client está lado a lado com a pasta do projeto ASP.NET Core.

    Para obter mais informações sobre o comando dotnet add reference, consulte dotnet add reference (documentação do .NET).

Faça as seguintes alterações no arquivo do Program aplicativo ASP.NET Core:

  • Adicione serviços de componentes do WebAssembly Interativo com AddInteractiveWebAssemblyComponents em que os serviços de componente Razor são adicionados com AddRazorComponents.

    Para renderização automática interativa:

    builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

    Somente para renderização do WebAssembly Interativo:

    builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

  • Adicione o modo de renderização WebAssembly Interativo (AddInteractiveWebAssemblyRenderMode) e assemblies adicionais ao projeto .Client, em que os componentes Razor são mapeados com MapRazorComponents.

    Para renderização automática interativa (automática):

    app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Somente para renderização do WebAssembly Interativo:

    app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Nos exemplos anteriores, altere BlazorSample.Client para corresponder ao namespace do projeto .Client.

Adicione uma pasta Pages ao projeto .Client.

Se o projeto ASP.NET Core tiver um componente existente Counter:

  • Mova o componente para a pasta Pages do projeto .Client.
  • Remova a diretiva @rendermode na parte superior do arquivo de componente.

Se o aplicativo ASP.NET Core não tiver um componente Counter, adicione o seguinte componente Counter (Pages/Counter.razor) ao projeto .Client:

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

Se o aplicativo estiver adotando apenas a renderização do WebAssembly Interativo, remova a diretiva e o valor @rendermode:

- @rendermode InteractiveAuto

Execute a solução no projeto de aplicativo do ASP.NET Core:

  • Visual Studio: confirme se o projeto ASP.NET Core está selecionado no Gerenciador de Soluções ao executar o aplicativo.

  • CLI do .NET: execute o projeto na pasta do projeto ASP.NET Core.

Para carregar o componente Counter, navegue até /counter.

Usar componentes não roteáveis em páginas ou exibições

Use as seguintes diretrizes para integrar componentes Razor em páginas e exibições de um aplicativo Razor Pages ou MVC existente com o Auxiliar de Marca do Componente.

Quando a pré-renderização do servidor é usada e a página ou exibição é renderizada:

  • O componente é pré-renderizado com a página ou exibição.
  • Perda do estado inicial do componente usado para pré-renderização.
  • O novo estado componente é criado quando a SignalR conexão é estabelecida.

Para obter mais informações sobre modos de renderização, incluindo a renderização de componente estático não interativo, consulte Auxiliar de Marca de Componente no ASP.NET Core. Para salvar o estado de componentes Razor pré-renderizados, consulte Auxiliar de Marcas do Estado do Componente Persistente no ASP.NET Core.

Adicione uma pasta Components à pasta raiz do projeto.

Adicione um arquivo de importações à pasta Components com o seguinte conteúdo. Alterar o {APP NAMESPACE} espaço reservado para o namespace do projeto.

Components/_Imports.razor:

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

No arquivo de layout do projeto (Pages/Shared/_Layout.cshtml em Razor aplicativos Pages ou em aplicativos MVC Views/Shared/_Layout.cshtml):

  • Adicione a seguinte marca <base> e Auxiliar de Marca de Componente para um componente HeadOutlet à marcação <head>:

    <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 o aplicativo for um subaplicação, siga as diretrizes na seção Caminho Base do aplicativo do artigo Hospedar e implantar ASP.NET CoreBlazor.

    O componente HeadOutlet é usado para renderizar o conteúdo de cabeçalho (<head>) para títulos de página (componente PageTitle) e outros elementos de cabeçalho (componente HeadContent) definidos por componentes Razor. Para mais informações, confira o Controle de conteúdo de cabeçalhoBlazor em aplicativos do ASP.NET Core.

  • Adicionar uma: <script> marca para o blazor.web.js script de imediato, antes da Scripts seção renderizar (@await RenderSectionAsync(...)):

    <script src="_framework/blazor.web.js"></script>

    Não há necessidade de adicionar manualmente um script blazor.web.js ao aplicativo porque a estrutura Blazor adiciona o script blazor.web.js ao aplicativo.

Observação

Normalmente, o layout é carregado por meio de um arquivo _ViewStart.cshtml.

Adicione um componente não operacional (no-op) App ao projeto.

Components/App.razor:

@* No-op App component *@

No local em que os serviços são registrados, adicione serviços para componentes Razor e serviços para dar suporte à renderização de componentes do Servidor Interativo.

Na parte superior do arquivo Program, adicione uma instrução using à parte superior do arquivo para os componentes do projeto:

using {APP NAMESPACE}.Components;

Na linha anterior, altere o espaço reservado {APP NAMESPACE} para o namespace do aplicativo. Por exemplo:

using BlazorSample.Components;

No arquivo Program antes da linha que cria o aplicativo (builder.Build()):

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Para obter mais informações sobre como adicionar suporte para componentes de Servidor Interativo e WebAssembly, consulte Modos de renderização do ASP.NET Core Blazor.

No arquivo Program, imediatamente após a chamada para mapear Razor Pages (MapRazorPages) em um aplicativo Razor Pages ou para mapear a rota do controlador padrão (MapControllerRoute) em um aplicativo MVC, chame MapRazorComponents para descobrir os componentes disponíveis e especifique o componente raiz do aplicativo (o primeiro componente carregado). Por padrão, o componente raiz do aplicativo é o componente App (App.razor). Encadear uma chamada para AddInteractiveInteractiveServerRenderMode para configurar a renderização interativa do lado do servidor (SSR interativa) para o aplicativo:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Observação

Se o aplicativo ainda não foi atualizado para incluir o Middleware Antiforgery, adicione a seguinte linha após UseAuthorization ser chamado:

app.UseAntiforgery();

Integrar componentes em qualquer página ou exibição. Por exemplo, adicione um componente EmbeddedCounter à pasta Components do projeto.

Components/EmbeddedCounter.razor:

<h1>Embedded 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 Pages :

Na página do Index projeto de um Razor aplicativo Pages, adicione oEmbeddedCounter namespace do componente e encorpore o componente na página. Ao carregar a Index página, o EmbeddedCounter componente é pré-renderizado. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Pages/Index.cshtml:

@page
@using {APP NAMESPACE}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

MVC:

Na exibição do Index projeto de um aplicativo MVC, adicione o EmbeddedCounter namespace do componente e encorpore o componente na exibição. Ao carregar a exibiçãoIndex, o EmbeddedCounter componente é pré-renderizado. No exemplo a seguir, substitua o espaço reservado {APP NAMESPACE} pelo namespace do projeto.

Views/Home/Index.cshtml:

@using {APP NAMESPACE}.Components
@{
    ViewData["Title"] = "Home Page";
}

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

Use componentes roteáveis

Use as diretrizes a seguir para integrar componentes Razor roteáveis em um aplicativo Razor Pages ou MVC existente.

As diretrizes nesta seção assumem:

  • O título do aplicativo é Blazor Sample.
  • O namespace do aplicativo é BlazorSample.

Para dar suporte a componentes Razor roteáveis:

Adicione uma pasta Components à pasta raiz do projeto.

Adicione um arquivo de importações à pasta Components com o seguinte conteúdo.

Components/_Imports.razor:

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

Alterar o {APP NAMESPACE} espaço reservado para o namespace do projeto. Por exemplo:

@using BlazorSample
@using BlazorSample.Components

Adicionar uma pasta Layout à pasta Components.

Adicionar um componente de rodapé e uma folha de estilos à pasta Layout.

Components/Layout/Footer.razor:

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
    </div>
</footer>

Na marcação anterior, defina o espaço reservado {APP TITLE} para o título do aplicativo. Por exemplo:

&copy; 2023 - Blazor Sample - <a href="/privacy">Privacy</a>

Components/Layout/Footer.razor.css:

.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

Adicionar um componente de menu de navegação à pasta Layout.

Components/Layout/NavMenu.razor:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
    <a class="navbar-brand" href="/">{APP TITLE}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/privacy">Privacy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/counter">Counter</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Na marcação anterior, defina o espaço reservado {APP TITLE} para o título do aplicativo. Por exemplo:

<a class="navbar-brand" href="/">Blazor Sample</a>

Components/Layout/NavMenu.razor.css:

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

Adicione um componente de layout principal e uma folha de estilos à pasta Layout.

Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<Footer />

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Components/Layout/MainLayout.razor.css:

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Adicionar um componente Routes à pasta Components com o seguinte conteúdo.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Adicionar um componente App à pasta Components com o seguinte conteúdo.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{APP TITLE}</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

No código anterior, atualize o título do aplicativo e o nome do arquivo de folha de estilos:

  • Para o espaço reservado {APP TITLE} no elemento <title>, defina o título do aplicativo. Por exemplo:

    <title>Blazor Sample</title>

  • Para o espaço reservado {APP NAMESPACE} no elemento de folha de estilos <link>, defina o namespace do aplicativo. Por exemplo:

    <link rel="stylesheet" href="/BlazorSample.styles.css" />

No local em que os serviços são registrados, adicione serviços para componentes Razor e serviços para dar suporte à renderização de componentes do Servidor Interativo.

Na parte superior do arquivo Program, adicione uma instrução using à parte superior do arquivo para os componentes do projeto:

using {APP NAMESPACE}.Components;

Na linha anterior, altere o espaço reservado {APP NAMESPACE} para o namespace do aplicativo. Por exemplo:

using BlazorSample.Components;

No arquivo Program antes da linha que cria o aplicativo (builder.Build()):

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Para obter mais informações sobre como adicionar suporte para componentes de Servidor Interativo e WebAssembly, consulte Modos de renderização do ASP.NET Core Blazor.

No arquivo Program imediatamente após a chamada para mapear Razor Páginas (MapRazorPages), chame MapRazorComponents para descobrir componentes disponíveis e especificar o componente raiz do aplicativo. Por padrão, o componente raiz do aplicativo é o componente App (App.razor). Encadear uma chamada para AddInteractiveServerRenderMode para configurar a renderização interativa do lado do servidor (SSR interativa) para o aplicativo:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Observação

Se o aplicativo ainda não foi atualizado para incluir o Middleware Antiforgery, adicione a seguinte linha após UseAuthorization ser chamado:

app.UseAntiforgery();

Criar uma pasta Pages dentro da pasta Components para componentes roteáveis. O exemplo a seguir é um Counter componente baseado no Counter componente nos Blazor modelos de projeto.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

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

Execute o projeto e navegue até o componente Counter roteável em /counter.

Para mais informações sobre namespaces, confira a seção Namespaces do Componente.

Retornar um RazorComponentResult de uma ação do controlador MVC

Uma ação do controlador MVC pode retornar um componente com RazorComponentResult<TComponent>.

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

Em um controlador:

public IResult GetWelcomeComponent()
{
    return new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });
}

Somente a marcação HTML para o componente renderizado é retornada. Os layouts e a marcação de página HTML não são renderizados automaticamente com o componente. Para produzir uma página HTML completa, o aplicativo pode manter um layout Blazor que fornece marcação HTML para <html>, <head>, <body> e outras marcas. O componente inclui o layout com a diretiva @layoutRazor no início do arquivo de definição de componente, Welcome.razor, por exemplo nesta seção. O seguinte exemplo pressupõe que o aplicativo tenha um layout chamado RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor):

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Você pode evitar colocar a instrução @using da pasta Layout em componentes individuais movendo-a para o arquivo _Imports.razor do aplicativo.

Para obter mais informações, confira os layouts ASP.NET Core Blazor.

Namespaces de componente

Ao usar uma pasta personalizada para manter os componentes Razor 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 pasta Components do projeto.
  • O espaço reservado {APP NAMESPACE} é o namespace do projeto. Components representa o nome da pasta.
@using {APP NAMESPACE}.Components

Por exemplo:

@using BlazorSample.Components

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

Para mais informações, confira osComponentes Razor do ASP.NET Core.

Recursos adicionais

Pré-renderização de componentes Razor do ASP.NET Core