Usando Enum como DropDownList no Blazor

Nesse artigo veremos como aproveitar a estrutura de um Enum para renderizar um elemento HTML <select> no Blazor.

Enum

Na linguagem C# temos uma estrutura chamada Enum. Um Enum serve para criar uma lista fixa de “opções”, e é muito útil para enriquecer o modelo de um aplicativo.

Nós podemos aproveitar um Enum para preencher os itens de um DropList ou ComboBox. Isso é corriqueiramente feito em algumas tecnologias de FrontEnd dotnet, como WPF, WindowsForms, ASP.NET MVC ou Xamarin.

Veja um exemplo clássico da implementação de um Enum na Figura 1.

Figura 1: Enum de Tipo de Pessoa

Esse Enum define os possíveis tipos de pessoas que podemos ter num modelo, a pessoa Física e a pessoa Jurídica.

O interessante nessa implementação é que foi utilizado um recurso do DataAnnotations, chamado Description.

O Description serve para definir uma descrição para o elemento do Enum. Isso é útil quando aproveitamos o Enum para renderizar essas opções na interface do usuário.

SelectOption

Para aproveitar o Enum na renderização das opções de um HTML select, vamos precisar de uma classe para representar cada option desse select. Essa classe se chamará SelectOption.

E assim como no option do select, o SelectOption precisa ter uma propriedade para o Value, e outra para a Description. Veja a implementação dessa classe na Figura 2.

Figura 2: Classe SelectOption que representa um option de um select HTML

Observe que a propriedade Value é do tipo object. Isso é necessário pois, como veremos adiante, esse Value será usado para guardar a referência do item do Enum.

EnumService

Agora o nosso objetivo é criar uma Lista de objetos do tipo SelectOption, baseado nos itens de um Enum qualquer.

Para isso vamos criar uma classe de serviço chamada EnumService. Veja na Figura 3, essa classe já com a implementação do método GetOptions.

Figura 3: Método GetOptions da classe EnumService

Note que o método GetOptions é genérico. A ideia é passar para esse tipo genérico T, o Enum que será transformado em um IList<SelectOption>.

Usamos então o typeof(T) para pegar o tipo do Enum, e com esse tipo usamos o método GetNames da classe Enum. Esse método retorna uma array de strings, com os nomes de todos os itens do Enum em questão.

Com o uso do método Select do namespace System.Linq, transformamos a array numa lista de objetos da classe SelectOption.

Para alimentar a propriedade Value, veja que usamos o método Parse da classe Enum. Esse método recebe o tipo do enum, e a string que representa uma opção desse enum.

Já para alimentar a propriedade Description, usamos o método GetDescription que deve ser implementado nessa mesma classe EnumService. Veja sua implementação aqui na Figura 4.

Figura 4: Método GetDescription da classe EnumService

Nesse código estamos usando os métodos GetField e GetCustomAttributes do System.Reflection. Com isso podemos pegar o valor definido no atributo Description, onde temos a descrição amigável do item do enum.

E caso essa Description não tenha sido definida, o método retorna a string original do item do enum.

Implementando o select com o Enum

Agora vamos usar essa estrutura e ver se funciona corretamente. Nesse exemplo vou usar o componente Index.razor, para implementar esse select.

Veja na Figura 5, o código do bloco @functions. Note que temos uma propriedade do tipo TipoPessoa chamada Tipo, e outra propriedade chamada Options, que é uma lista da classe SelectOption.

Figura 5: Transformando um Enum em uma lista de opções para o select

Observe que no método OnInit estamos chamando o método GetOptions do EnumService. Essa chamada vai gerar a lista de opções que representam os itens do Enum TipoPessoa.

Para fechar, implemente o seu select com a ajuda de um @foreach, como você pode ver na Figura 6.

Figura 6: Implementado select com options gerados pelo Enum

Veja que estamos fazendo um bind com a propriedade Tipo e exibindo-a mais abaixo, para comprovar que o select funciona para a seleção de itens do enum.

Execute o seu exemplo e veja como ele funciona perfeitamente, como mostra a Figura 7.

Figura 7: Testando select baseado no Enum

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

Um comentário em “Usando Enum como DropDownList 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