Blazor - Conceitos, dicas e truques valiosos - I

Hoje veremos obter uma instância específica de um componente usando @ref.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Como obter uma instância específica de um componente Blazor

As referências de componentes são usadas para invocar métodos de componentes subjacentes.

Para isso podemos usar o atributo ref para um componente e a seguir definir como preenchido com o mesmo nome e tipo de componente.

Exemplo:

@page "/"
<Counter IncrementValue="10" @ref="counter"></Counter>
  
 @code {
  
     private Counter counter;    
  
 }

Aqui  enquanto o componente Counter é renderizado, o contador de campo é preenchido junto com a instância do componente.

Assim podemos definir instâncias específicas para componentes personalizados usando @ref enquanto definimos o componente em um arquivo Razor.

No exemplo a seguir vamos criar um componente chamado Card que apenas exibe um texto em uma moldura.

A seguir vamos criar uma referência do componente para os componentes Card com nomes específicos. Usando esta referência, podemos acessar as propriedades dos componentes Card e modificá-los.

Aqui, alteramos a propriedade de exibição usando a referência do componente.

Vamos ver isso na prática...

Recursos usados:

Criando o projeto Blazor

Abra o VS 2019 Community (versão mínima 16.5) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto :  Blazor_Demo, a localização e clique em Create;

Selecione a opção - Blazor WebAssembly App e marque as opções conforme abaixo:

Clique no botão Create para criar o projeto.

Com o projeto criado vamos limpar o projeto excluindo os arquivos abaixo e suas referências:

Dentro da pasta Shared crie inclua um componente Razor chamado Card.razor e inclua o código abaixo neste arquivo:

<div class="card mb-3 @display" style="width: 18rem;">
    <div class="card-body">
        @ChildContent
    </div>
</div>
@code {
    string display = "";
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    public void setVisible(bool visible)
    {
        if (visible)
        {
            display = "";
        }
        else
        {
            display = "d-none";
        }
    }
}

Vamos usar este componente no componente Index.razor.

A seguir vamos alterar o código do arquivo Index.razor pelo código abaixo:

@page "/"
<Card @ref="CardControl1">Primeiro Card</Card>
<Card @ref="CardControl2">Segundo Card</Card>
<button class="btn btn-primary" @onclick="Ocultar">Ocultar card</button>
<button class="btn btn-primary" @onclick="Exibir">Exibir card</button>
<button class="btn btn-primary" @onclick="Ocultar2">Ocultar card2</button>
<button class="btn btn-primary" @onclick="Exibir2">Exibir card2</button>
@code {
    Card CardControl1;
    Card CardControl2;
    private void Ocultar()
    {
        CardControl1.setVisible(false);
    }
    private void Exibir()
    {
        CardControl1.setVisible(true);
    }
    private void Ocultar2()
    {
        CardControl2.setVisible(false);
    }
    private void Exibir2()
    {
        CardControl2.setVisible(true);
    }
}

Aqui estamos criando uma referência do componente para os componentes Card com nomes específicos: CardControl1 e CardControl2

E usando essas instâncias podemos definir a visibilidade do componente através de sua propriedade setVisible:

Executando o projeto veremos isso acontecendo:

Pegue o código do projeto aqui:  Blazor_Demo1.zip (sem as referências)

"Porque não nos pregamos a nós mesmos, mas a Cristo Jesus, o Senhor; e nós mesmos somos vossos servos por amor de Jesus.
Porque Deus, que disse que das trevas resplandecesse a luz, é quem resplandeceu em nossos corações, para iluminação do conhecimento da glória de Deus, na face de Jesus Cristo."
 2 Coríntios 4:5,6
 


Referências:

José Carlos Macoratti