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

Related Posts:

Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Usar variable en otra función con javascript – javascript html app
Pregunta: Primero que todo voy a dejar un enlace donde pueden ver el ejemplo funcionando de manera completa. Enlace a la pagina AQUI El valor elegido en ...
Ocultar y Mostrar con Mapa de Google – javascript c# asp.net
Pregunta: Tengo un div en mi página ASP.NET que contiene un Mapa de Google, y necesito mostrarlo y ocultarlo pero no me funciona. Este es el ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
Seleccion desde varias tablas – asp.net sql-server entity-framework
Pregunta: Tengo esta consulta que funciona bien var rest = (from de in se.DeliveryConfiguration ...
¿Código html antes del anchor text? ¿Tendrían problemas los motores de búsqueda? – html seo
Pregunta: ¿Es posible incluír código html antes del anchor text y si perjudicaría que los pueda leer el crawler del buscador? Es que necesito que ...
Como podría crear un documento txt y añadirle texto con saltos de línea? – javascript html
Pregunta: Por ejemplo: Hola que tal y lo que quiero que escriba en el documento txt: Hola que tal /* Corregido */ var data = "Hola, rn ¿qué rn ...
insertar automáticamente un caracter mientras escribo en un input – jquery html
Pregunta: Necesito insertar el caracter ":" mientras estoy escribiendo números en un input tipo texto, el ":" debe insertarse automáticamente cuando haya escrito dos números, ...
Estilar un pseudoelemento ::after con jQuery – javascript jquery html
Pregunta: ¿Cómo seleccionar desde jQuery un elemento de este estilo? .page-container .single-page:nth-of-type(2)::after { } La idea es poder modificar ciertas reglas CSS desde JavaScript. ...
La consulta espera el parametro @Nombre que no se ha proporcionado – c# asp.net asp.net-mvc
Pregunta: public bool IngresarUsuario(Prueba objeto) { using (SqlConnection cn = Conexion.Conectar("cadenaCon")) { try ...
¿Cómo obtener el valor de una celda de una tabla con Javascript? – javascript html
Pregunta: Estoy haciendo una parte de ventas y pues, lleno la tabla con datos y lo que quiero es, que al hacer clic sobre una ...
TCPDF ERROR: Some data has already been output, can’t send PDF file – php html
Pregunta: Estoy tratando de generar un reporte PDF utilizando TCPDF, pero al ejecutar mi código salta el siguiente error: TCPDF ERROR: Some data has ...
¿Como obtener la pagina de una fila de una tabla, usando paginacion? – c# jquery asp.net
Pregunta: Supongamos que tengo una tabla que muestro de forma fija 5 filas o registros, con un total fijo de 12 registros, eso hace que ...

One Comment

Add a Comment

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