code-behind no Blazor

Code-behind é um conceito muito comum em alguns tipos de projetos dotnet. A ideia é criar um nível de separação do código da interface, com o código de comportamento. Nesse artigo vamos ver como é possível trabalhar no modelo code-behind no Blazor.

Para isso, vamos utilizar uma aplicação de exemplo criada com o Template do Blazor. Se você não sabe como criar uma aplicação Blazor, dê uma olhada nesse artigo aqui para criar um projeto com o Visual Studio 2019, ou nesse outro aqui com o VSCode.

code-behind

Projetos .NET do tipo Windows Forms, WPF, Xamarin.Forms e ASP.NET WebForms, oferecem uma experiência ao desenvolvedor chamada code-behind.

A ideia é separar em arquivos diferentes, o código da interface do código do comportamento do componente.

No caso do Blazor, esse estilo code-behind não é oferecido como padrão pelo template do Visual Studio. Mas nós podemos simular essa experiência facilmente.

Componente Tradicional

Como você sabe, e pode ver na Figura 1, um Componente no Blazor é originalmente escrito em um único arquivo.

Figura 1: Componente Counter.razor escrito em um único arquivo

Na parte de cima do arquivo temos o código HTML que desenha a interface, e na parte de baixo (dentro do bloco @functions) temos o código C#, que define o comportamento do componente.

No exemplo que criaremos nesse artigo, vamos quebrar o componente Counter.razor para mostrar como é possível aplicar a ideia do code-behind no Blazor.

ComponentBase

Para simular a experiência de code-behind, temos que criar uma classe para o nosso componente. Essa classe precisa herdar de uma classe do Blazor chamada ComponentBase.

Além disso, essa classe não pode ter o mesmo nome do componente, e por isso vamos chamá-la de CounterBase.cs, como você pode ver na Figura 2.

Figura 2: Criando a Classe CounterBase

@inherits

Em outros projetos dotnet, o code-behind é implementado utilizando o recurso de partial classes do c#, que permite separar uma classe em diferentes arquivos.

No blazor, para alcançar esse objetivo temos que utilizar o recurso de Herança. Basicamente, o que precisamos fazer é indicar que o componente Counter.razor herda da classe recém criada CounterBase.

Veja como isso é declarado no componente, através da diretiva @inherits. Figura 3.

Figura 3: Herdando do CounterBase

Passando o código para o code-behind

Para fechar o exemplo, só falta passar todo o código que temos no bloco @functions para a classe CounterBase. A ideia é eliminarmos o bloco @functions, e implementar todo o código C# na classe base.

Veja na Figura 4, como deve ficar o CounterBase.cs.

Figura 4: Passando o código do @functions para CounterBase.cs

Note que para esse modelo funcionar, os elementos da classe base não podem ser privados, como foram originalmente criados no componente Counter.razor.

Sempre que você for utilizar esse modelo de code-behind, todos os elementos que você quiser expor para o componente, devem ser protected ou public.

Testando

Remova o bloco @functions do componente Counter.razor e teste a sua aplicação. Como você pode conferir aqui na Figura 5, ele continuará funcionando da mesma forma.

Figura 5: Testando componente feito com code-behind

Grande Abraço e até o próximo!

Um comentário em “code-behind no Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s