Compartilhar via


Renderizar componentes Razor fora do ASP.NET Core

Componentes Razor podem ser renderizados fora do contexto de uma solicitação HTTP. Você pode renderizar componentes Razor como HTML diretamente em uma cadeia de caracteres ou transmitir independentemente do ambiente de hospedagem do ASP.NET Core. Isso é conveniente para cenários em que você deseja gerar fragmentos HTML, como para gerar conteúdo de email, gerar conteúdo de site estático ou para criar um mecanismo de modelagem de conteúdo.

No exemplo a seguir, um componenteRazor é renderizado em uma cadeia de caracteres HTML de um aplicativo de console:

Em um shell de comando, crie um novo projeto de aplicativo de console:

dotnet new console -o ConsoleApp1
cd ConsoleApp1

Em um shell de comando na pasta ConsoleApp1, adicione referências de pacote para Microsoft.AspNetCore.Components.Web e Microsoft.Extensions.Logging ao aplicativo de console:

dotnet add package Microsoft.AspNetCore.Components.Web
dotnet add package Microsoft.Extensions.Logging

No arquivo de projeto do aplicativo de console (ConsoleApp1.csproj), atualize o projeto do aplicativo de console para usar o SDK Razor:

- <Project Sdk="Microsoft.NET.Sdk">
+ <Project Sdk="Microsoft.NET.Sdk.Razor">

Adicione o componente RenderMessage a seguir à RCL.

RenderMessage.razor:

<h1>Render Message</h1>

<p>@Message</p>

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

Atualize o arquivo Program:

Todas as chamadas para RenderComponentAsync devem ser feitas no contexto de chamada de InvokeAsync em um dispatcher de componente. Um dispatcher de componente está disponível na propriedade HtmlRenderer.Dispatcher.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using ConsoleApp1;

IServiceCollection services = new ServiceCollection();
services.AddLogging();

IServiceProvider serviceProvider = services.BuildServiceProvider();
ILoggerFactory loggerFactory = serviceProvider.GetRequiredService<ILoggerFactory>();

await using var htmlRenderer = new HtmlRenderer(serviceProvider, loggerFactory);

var html = await htmlRenderer.Dispatcher.InvokeAsync(async () =>
{
    var dictionary = new Dictionary<string, object?>
    {
        { "Message", "Hello from the Render Message component!" }
    };

    var parameters = ParameterView.FromDictionary(dictionary);
    var output = await htmlRenderer.RenderComponentAsync<RenderMessage>(parameters);

    return output.ToHtmlString();
});

Console.WriteLine(html);

Observação

Passe ParameterView.Empty para RenderComponentAsync ao renderizar o componente sem passar parâmetros.

Como alternativa, você pode gravar o HTML em um TextWriter chamando output.WriteHtmlTo(textWriter).

A tarefa retornada por RenderComponentAsync conclui quando o componente é totalmente renderizado, incluindo a conclusão de qualquer método de ciclo de vida assíncrono. Se você quiser observar o HTML renderizado anteriormente, chame BeginRenderingComponent em vez disso. Em seguida, aguarde a conclusão da renderização do componente aguardando HtmlRootComponent.QuiescenceTask na instância retornada HtmlRootComponent .