C# Academy · Aula

Modelo de componentes do Blazor

Crie componentes Razor, entenda o ciclo de vida dos componentes e use parâmetros e valores em cascata.

Modelo de componentes do Blazor é uma aula grátis de C# Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de C# Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de C# Academy inclui 4 aulas no total.

O que é Blazor

O Blazor permite criar interfaces web interativas usando C# em vez de JavaScript. Os componentes são definidos em arquivos .razor que combinam marcação HTML e lógica C#. O Blazor é executado no servidor (Blazor Server) ou no navegador por meio de WebAssembly (Blazor WASM).

Seu primeiro componente

Um componente Razor é um arquivo .razor com marcação HTML e um bloco @code para C#. O nome do componente torna-se o nome da tag HTML.

@* Greeting.razor *@
<h2>Hello, @Name!</h2>
<p>You have @Count messages.</p>

@code {
    [Parameter] public string Name { get; set; } = "World";
    private int Count = 5;
}

Ciclo de vida dos componentes

Os componentes Blazor têm um ciclo de vida com pontos de extensão que você pode substituir. Os mais comuns são OnInitializedAsync (carregamento de dados) e OnParametersSetAsync (reação a mudanças de parâmetros).

@code {
    private List<Product> Products = new();

    protected override async Task OnInitializedAsync()
    {
        // Called once on first render
        Products = await Http.GetFromJsonAsync<List<Product>>("/api/products")
                   ?? new();
    }

    protected override async Task OnParametersSetAsync()
    {
        // Called whenever parameters change
        await LoadDataAsync();
    }
}

Parâmetros: passando dados para componentes

Decore as propriedades com [Parameter] para aceitar dados dos componentes pai. Os parâmetros são definidos antes da renderização e podem disparar uma nova renderização quando mudam.

@* ProductCard.razor *@
<div class="card">
    <h4>@Product.Name</h4>
    <p>Price: @Product.Price.ToString("C")</p>
    <button @onclick="AddToCart">Add to Cart</button>
</div>

@code {
    [Parameter, EditorRequired]
    public Product Product { get; set; } = default!;

    [Parameter]
    public EventCallback<Product> OnAddToCart { get; set; }

    private async Task AddToCart() =>
        await OnAddToCart.InvokeAsync(Product);
}

Parâmetros em cascata

Os parâmetros em cascata percorrem a árvore de componentes sem a necessidade de serem transmitidos explicitamente por cada nível intermediário — ideais para temas, informações do usuário ou estado compartilhado.

@* App.razor — wraps the whole app *@
<CascadingValue Value="CurrentUser">
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
    </Router>
</CascadingValue>

@* Anywhere in the tree: *@
@code {
    [CascadingParameter]
    public UserInfo CurrentUser { get; set; } = default!;
}

Renderizando listas e condicionais

Use as diretivas Razor @if, @foreach e @for para renderizar conteúdo dinâmico. Sempre forneça @key nos itens da lista para uma comparação eficiente.

@if (Products.Count == 0)
{
    <p>No products found.</p>
}
else
{
    <ul>
        @foreach (var product in Products)
        {
            <li @key="product.Id">
                <ProductCard Product="product" OnAddToCart="HandleAdd" />
            </li>
        }
    </ul>
}

RenderFragment e ChildContent

Use RenderFragment para passar marcação como parâmetro — como slots no Vue ou filhos no React. O nome convencional do parâmetro é ChildContent.

@* Panel.razor *@
<div class="panel">
    <div class="panel-header">@Title</div>
    <div class="panel-body">@ChildContent</div>
</div>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

@* Usage: *@
<Panel Title="Order Details">
    <p>Order #42 — Shipped</p>
</Panel>

Referências a componentes com @ref

Capture uma referência a um componente filho com @ref para chamar seus métodos públicos ou ler suas propriedades a partir do componente pai.

@* Parent.razor *@
<ConfirmDialog @ref="_dialog" OnConfirm="DeleteOrder" />
<button @onclick="() => _dialog!.Show()">Delete Order</button>

@code {
    private ConfirmDialog? _dialog;

    private async Task DeleteOrder()
    {
        await OrderService.DeleteAsync(CurrentOrderId);
        // Refresh UI...
    }
}

StateHasChanged e nova renderização manual

O Blazor renderiza novamente de forma automática após os manipuladores de eventos. Para alterações assíncronas de estado fora dos manipuladores de eventos (por exemplo, causadas por um temporizador em segundo plano), chame StateHasChanged() manualmente.

@implements IDisposable

<p>Time: @CurrentTime</p>

@code {
    private string CurrentTime = "";
    private Timer? _timer;

    protected override void OnInitialized()
    {
        _timer = new Timer(_ =>
        {
            CurrentTime = DateTime.Now.ToString("HH:mm:ss");
            InvokeAsync(StateHasChanged); // thread-safe re-render
        }, null, 0, 1000);
    }

    public void Dispose() => _timer?.Dispose();
}

ShouldRender para desempenho

Substitua ShouldRender() para ignorar novas renderizações desnecessárias. Retorne false quando a saída do componente não mudar, reduzindo o custo da comparação.

@code {
    private string _lastRenderedStatus = "";

    [Parameter] public string Status { get; set; } = "";

    protected override bool ShouldRender()
    {
        // Only re-render if Status actually changed
        if (Status == _lastRenderedStatus) return false;
        _lastRenderedStatus = Status;
        return true;
    }
}

Na prática: componente de listagem de produtos

Um componente completo de listagem de produtos que carrega dados na inicialização, gerencia o estado de carregamento e encaminha eventos ao componente pai.

@inject HttpClient Http

@if (_loading)
{
    <p>Loading products...</p>
}
else
{
    @foreach (var p in _products)
    {
        <ProductCard Product="p" OnAddToCart="AddToCart" />
    }
}

@code {
    private List<Product> _products = new();
    private bool _loading = true;

    [Parameter] public EventCallback<Product> OnCartUpdated { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _products = await Http.GetFromJsonAsync<List<Product>>("/api/products")
                   ?? new();
        _loading = false;
    }

    private async Task AddToCart(Product p) => await OnCartUpdated.InvokeAsync(p);
}

Verificação rápida

Qual método do ciclo de vida é o melhor local para carregar dados de uma API quando um componente Blazor é inicializado?

Recapitulação: modelo de componentes do Blazor

Principais conclusões:

Arquivos .razor combinam marcação HTML com C# em um bloco @code
[Parameter] aceita dados do componente pai; EventCallback propaga eventos para cima
CascadingParameter transmite dados para baixo sem a propagação manual de propriedades
RenderFragment/ChildContent cria componentes composíveis baseados em slots
OnInitializedAsync é usado para o carregamento inicial de dados; StateHasChanged, para a nova renderização manual
ShouldRender() ignora comparações desnecessárias para melhorar o desempenho

Perguntas Frequentes

A aula “Modelo de componentes do Blazor” é grátis?

Sim — o texto completo de “Modelo de componentes do Blazor” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de C# Academy, atualize para CoddyKit PRO. O curso de C# Academy inclui 4 aulas no total.

O que vou aprender em “Modelo de componentes do Blazor”?

Crie componentes Razor, entenda o ciclo de vida dos componentes e use parâmetros e valores em cascata. Você pratica C# Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar C# Academy?

Nenhuma experiência prévia é necessária. C# Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Modelo de componentes do Blazor”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de C# Academy?

Sim. Cada aula de C# Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Modelo de componentes do Blazor
Vinculação de dados e tratamento de eventos
Comunicação entre componentes e DI
Gerenciamento de estado no Blazor

← Voltar para C# Academy