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.
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.
@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.
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.
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.
Grande Abraço e até o próximo!
Blaze of Code 
Um comentário em “code-behind no Blazor”