Cómo crear un select de un enum en Blazor

Si alguna vez has trabajado con Blazor y has tenido que hacer un select (una lista desplegable) basado en un enum, sabes que puede parecer un poco complicado al principio. Pero no te preocupes, en realidad es bastante sencillo, y te lo voy a explicar de una manera fácil, como si se lo estuviera contando a alguien que acaba de empezar con la programación.

¿Qué es un enum?

Antes de meternos en el código, vamos a aclarar qué es un enum. Un enum (abreviatura de "enumeración") es un tipo especial en C# que te permite definir un conjunto de valores con nombre. Por ejemplo, imagina que tienes un enum que representa los días de la semana:

public enum DayOfWeek
{
    Monday,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday,
    Sunday
}

Aquí hemos definido un enum llamado DayOfWeek, con valores como Monday, Tuesday, etc. Es una forma muy ordenada de manejar conjuntos de opciones predefinidas.

¿Cómo hacemos un select con un enum en Blazor?

Vamos al grano. Supongamos que quieres crear un select en Blazor que permita a los usuarios elegir un día de la semana. Lo primero que necesitas hacer es mostrar todos los valores del enum en la lista desplegable.

1. Obtén los valores del enum: Blazor nos permite obtener todos los valores de un enum y usarlos en un select. Así es como se hace:

   @code {
       private DayOfWeek selectedDay = DayOfWeek.Monday;
   
       private IEnumerable<DayOfWeek> GetDaysOfWeek()
       {
           return Enum.GetValues(typeof(DayOfWeek)).Cast();
       }
   }
   

   Aquí, GetDaysOfWeek es un método que devuelve todos los valores de nuestro enum DayOfWeek.

2. Crea el select en la vista: Ahora que ya tenemos los valores del enum, vamos a crear el select en la parte de la interfaz de usuario:

   < select @bind="selectedDay" >
       @foreach (var day in GetDaysOfWeek())
       {
           @day
       }
   < /select >
   
   < p>Has seleccionado: @selectedDay< /p>
   

   Aquí, estamos usando un bucle foreach para recorrer todos los valores del enum y crear una opción en el select para cada uno de ellos. La variable selectedDay se actualizará automáticamente cada vez que el usuario seleccione un nuevo día.

Creando un Componente Genérico de Selección

Ahora, vamos a hacer las cosas aún más interesantes creando un componente de selección genérico que pueda manejar cualquier tipo de enum. Este componente permitirá seleccionar un valor de un enum y devolver el valor seleccionado, lo que es ideal para usar dentro de un EditForm.

1. Define el componente genérico: Crea un nuevo archivo Razor para el componente, por ejemplo EnumSelect.razor. Aquí está el código del componente:

   @typeparam TEnum
   
   @if (Enum.IsDefined(typeof(TEnum), default(TEnum)))
   {
       < select @bind="SelectedValue">
           @foreach (var item in Enum.GetValues(typeof(TEnum)).Cast())
           {
               < option value="@item">@item< /option>
           }
       < /select>
   }
   
   @code {
       [Parameter]
       public TEnum SelectedValue { get; set; }
   
       [Parameter]
       public EventCallback< TEnum > SelectedValueChanged { get; set; }
   
       private async Task OnValueChanged(ChangeEventArgs e)
       {
           if (Enum.TryParse(typeof(TEnum), e.Value.ToString(), out var value))
           {
               SelectedValue = (TEnum)value;
               await SelectedValueChanged.InvokeAsync((TEnum)value);
           }
       }
   }
   

   Explicación:

   • @typeparam TEnum: Define un tipo genérico para el componente.
   • SelectedValue: Propiedad para el valor seleccionado.
   • SelectedValueChanged: Evento para notificar cuando el valor seleccionado cambia.
   • OnValueChanged: Método para manejar el cambio en el select y actualizar el valor.

2. Usa el componente en tu página: Ahora puedes usar este componente genérico en cualquier lugar de tu aplicación Blazor. Aquí te muestro cómo integrarlo en una página y vincularlo con un EditForm:

   @page "/example"
   @using System.ComponentModel.DataAnnotations
   
   < EditForm Model="@model">
       < DataAnnotationsValidator />
       < ValidationSummary />
   
       < EnumSelect TEnum="DayOfWeek" @bind-SelectedValue="model.SelectedDay" />
   
       < p>Has seleccionado: @model.SelectedDay< /p>
   
       < button type="submit">Submit< /button>
   
   
   @code {
       private ExampleModel model = new ExampleModel();
   
       public class ExampleModel
       {
           [Required]
           public DayOfWeek SelectedDay { get; set; }
       }
   }
   

   Explicación:

   • EnumSelect: El componente genérico que acabamos de crear.
   • @bind-SelectedValue: Vincula el valor seleccionado del componente con la propiedad SelectedDay en el modelo.

Conclusión

Crear un select basado en un enum en Blazor es bastante sencillo, y cuando haces un componente genérico, las cosas se vuelven aún más flexibles y reutilizables. Puedes usar este enfoque para manejar cualquier tipo de enum en tu aplicación, lo que hace que tus formularios y componentes sean más dinámicos y fáciles de mantener. Así que la próxima vez que necesites una lista desplegable para un enum, ya sabes cómo hacerlo.