Obtener el valor de un dropdown con optgroup de Bootstrap en ASP.NET – html asp.net bootstrap

Pregunta:


¿Alguien sabe como obtener los valores de un dropdown de Bootstrap con optgroup en ASP.NET?
Adjunto una imagen de referencia
Si le pongo al dropdown el atributo: runat="server" , para poder tenerlo en el backend, me sale el error de la imagen.
Parece que el asp.net no acepta que un select de html tenga optgroup

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Preguntado por: Jeremy

No creo que tenga un mapeo directo de este tipo de control a uno de asp.net, por eso el runet="server" no aplica

Deberias evaluar usar jquery, por medio de $.ajax, podrias invocar WebMethod en la pagina aspx, en este caso los datos los tomarias con codigo cliente y los envias al servidor, no hay postback ni eventos.

Using jQuery to directly call ASP.NET AJAX page methods

Calling ASP.Net WebMethod using jQuery AJAX

A donde apunto es que si vas a usar boostrap deberias evaluar dejar de usar conceptos de asp.net, sobre todo eventos, no se llevan nada bien.

Cuando a un elemento <select> le pones el atributo runat="server" se covvierte en el WebControl HtmlSelect que no admite optgroup.

Para conseguir, desde servidor, acceder a la opción seleccionada tienes dos opciones

Opción 1: Elemento select HTML puro y al valor seleccionado acceder a través de Request.Form. El inconveniente de esta opción es que queda un código bastante feo (sobre todo para establecer el elemento seleccionado desde servidor)

Código HTML:

<select name="CarField">
<option value="">-Seleccione una opción-</option>
<optgroup label="Swedish Cars">
    <option value="volvo" <%=SelectedCar == "volvo" ? "selected" : ""%>>Volvo</option>
    <option value="saab" <%=SelectedCar == "saab" ? "selected" : ""%>>Saab</option>
</optgroup>
<optgroup label="German Cars">
    <option value="mercedes" <%=SelectedCar == "mercedes" ? "selected" : ""%>>Mercedes</option>
    <option value="audi" <%=SelectedCar == "audi" ? "selected" : ""%>>Audi</option>
</optgroup>

Código C#

public partial class _Default : Page 
{
   protected string SelectedCar { get; set; }

   protected void Page_Load(object sender, EventArgs e)
   {
       SelectedCar = Request.Form["CarField"];

       Label1.Text = $"El coche seleccionado es: {SelectedCar}";
   }
}

Opción 2: Implementar un WebControl. En este artículo (en inglés) “ADDING GROUPS TO THE ASP.NET DROPDOWNLIST CONTROL” tienes un ejemplo de implementación. Esta sería la opción recomendada, sobre todo para tener un código mas limpio y reutilizable.

Fuente

One Comment

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *