Selector múltiple en Blazor

La selección múltiple en ocasiones es un requisito imprescindible y a su vez tortuoso de conseguir. Mostramos a continuación una manera sencilla de hacer un selector múltiple en Blazor. Este componente le permitirá seleccionar varios elementos sin la necesidad de una complicada estructura código en CSS y JavaScript. En el ejemplo que ilustramos se pueden seleccionar distintas ciudades.

El componente a crear debe ser más o menos similar al mostrado a continuación. Hemos incluido en la segunda línea la inyección de la clase JSRuntime que nos facilitará la utilización de un par de funciones de JavaScript.

Deberá añadir una carpeta de nombre scripts a WWWRoot y dentro de ella un archivo .js de nombre AuxFunctions.js. Dentro de éste el siguiente código.

window.ResetValue =
{
    GetSelectedElement: function (id) {
        var e = document.getElementById(id);
        var aux = e.options[e.selectedIndex].text;      
        return aux;
    },

    SelectElement: function (element) {      
        element.selectedIndex = 0;
    }
};

No debe olvidar ahora crear una referencia a este archivo en _Host.html, de la siguiente manera

<script src="~/scripts/AuxFuctions.js"></script>

Dentro de la carpeta Data hemos creado la clase OptionElement, la cual nos servirá para probar nuestro componente.

public class OptionElement
 {
   public int Value { get; set; }
   public string Name { get; set; }
   public bool Active { get; set; }

   public static List<OptionElement> GetElements()
   {
     List<OptionElement> optionElements = new List<OptionElement>();
     optionElements.Add(new OptionElement() { Value = 1, Name = "Madrid", Active = true });
     optionElements.Add(new OptionElement() { Value = 2, Name = "Paris", Active = true });
     optionElements.Add(new OptionElement() { Value = 3, Name = "Berlin", Active = true });
     optionElements.Add(new OptionElement() { Value = 4, Name = "London", Active = true });
     optionElements.Add(new OptionElement() { Value = 5, Name = "Rome", Active = true });

    return optionElements.OrderBy(x => x.Name).ToList();
        }
}

No hay mucho más, el código final del componente debe quedar más o menos como se muestra a continuación.

@page "/"
@inject IJSRuntime JSRuntime;
@using BlazorAppSelectMultiple.Data


<h1>Select Multiple Example</h1>


<div class="col-md-5">
    <label>Cities</label>
    <select @ref="MySelect" class="form-control" id="slt" 
    @onchange="OnChangeCitiesSelected">

    <option value="0" style="display:none">@CitiesSelected</option>

      @foreach (OptionElement optionElement in OptionElements)
      {
          <option value="@optionElement.Value" 
           class="@((optionElement.Active? "unselected" : "selected"))">
               @optionElement.Name
          </option>
      }

    </select>
</div>

<style>
    .selected{
        color: lightgray;
    }
    .unselected{
        color:black
     }
</style>

@code{

  private List<OptionElement> OptionElements = OptionElement.GetElements();
  private string CitiesSelected = "Select cities";

  private List<string> SelectCityList = new List<string>();



  private ElementReference MySelect { get; set; }

  private async Task OnChangeCitiesSelected()
  {
     string elementSelected = 
    (await JSRuntime.InvokeAsync<object>("ResetValue.GetSelectedElement", "slt"))
    .ToString();

     await Task.Run(() => CreateMultipleValue(elementSelected));

     await JSRuntime.InvokeAsync<object>("ResetValue.SelectElement", MySelect);
  }


  private void CreateMultipleValue(string elementSelected)
  {
     OptionElement optionElement = OptionElements
           .FirstOrDefault(x => x.Name == elementSelected);

     if (optionElement != null)
     {
        optionElement.Active = !optionElement.Active;

     }
     CitiesSelected = OptionElements.Any(x => !x.Active) 
         ? string.Join(" , ", OptionElements.Where(x => !x.Active)
         .Select(n=>n.Name)) 
         : "Select cities";

    OptionElements = OptionElements.OrderByDescending(x => x.Active)
                    .ThenBy(x => x.Name).ToList();
    }
}

Puede encontrar un ejemplo completo del código para construir este componente en el siguiente enlace.