• Ir al contenido principal
  • Ir a la barra lateral primaria

aCernuda.com

Textos, libros, artículos periodísticos

Selector múltiple en Blazor

Por Alejandro Cernuda Categoría Código”, Suplemento

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.

Código en GitHub

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.

Código en GitHub

Tal vez le interese leer:

  • SqlClientCoreTool

    SqlClientCoreTool es una pequeña biblioteca de clases, tal vez con un nombre demasiado grande. Pero es eso, una herramienta para interactuar con facilidad entre Sql y .Net Core. Ligera, para…

  • Iglesia de Palmira. Cienfuegos
    Toby, el código moral y Winnie Mandela

    Un perro salchicha llamado Toby y hechos de la vida de Winnie y Nelson Mandela, la pareja más famosa del continente africano, nos sirven de ejemplo para hablar del código…

Barra lateral primaria

Últimas entradas

  • Visita a Porgy en Bess en Terneuzen y paso por Gante
  • El fin del mundo, según Isaac Newton
  • Los negocios de Voltaire y Federico II de Prusia
  • Gertrudis Gómez de Avellaneda. Lo bueno y lo bello
  • Cuerpo y alma. Retratos de mujer famosos en la pintura.

Enlaces de interés

  • Libros de Alejandro Cernuda
  • Contacto

Copyright © 2021 Alejandro Cernuda