RadioButtonList: Insertar llamada Javascript en ListItem

Ya sabemos utilizar facilmente el RadioButtonList pero como llamar a una funcion del lado del cliente (javascript) desde un LisItem, veamos un ejemplo

Tenemos un sencillo webcontrol RadioButtonList

<asp:RadioButtonList ID="RadioButtonList1" runat="server" >
<asp:ListItem Value="yoda">Yoda</asp:ListItem>
<asp:ListItem Value="luke">Luke Skywalker</asp:ListItem>
<asp:ListItem Value="r2d2">R2-D2</asp:ListItem>
<asp:ListItem Value="c3po">C-3PO</asp:ListItem>
</asp:RadioButtonList>
 
y un metodo a llamar en javascript
<script language="javascript" type="text/javascript">
       function mensaje(ctlOpcion){                
           alert("Opcion seleccionada: " + ctlOpcion.value);
       }        

</script>

Pero como agregamos llamada a un metodo del cliente? No tenemos a nuesta disposicion nada referente a lado del cliente
image

Entonces no nos queda mas remedio que ir al codigo…y agregarlo mediante el metodo Atributtes.Add (ya que es una coleccion)

Dim itemRadioBtn As ListItem
For Each itemRadioBtn In RadioButtonList1.Items
itemRadioBtn.Attributes.Add("onClick", "mensaje(this);")
Next
Vamos recorriendo los items de nuestro RadioButtonList y en el evento onClick (podria ser otro que necesitemos) vamos declarando la llamada a la funcion javascript.
 
Para verlo funcionar (aunque sea en imagen)
image

 

Tambien podriamos recorrer mediante javascript, una opcion seria sin conocer la cantidad de items

Veamos un script

<script language="javascript" type="text/javascript">
   1:  
   2:    function mensajeSeleccionado(ctrlOpcionesId){
   3:        alert("Opcion seleccionada:" + OpcionObtenerSeleccionada(ctrlOpcionesId))
   4:    }
   5:    
   6:    function OpcionObtenerSeleccionada(ctrlOpcionesId)
   7:        {
   8:            //Recorremos los items                   
   9:            var posicion = 0;
  10:            var item = document.getElementById(ctrlOpcionesId+"_"+posicion);    
  11:            alert(ctrlOpcionesId+"_"+posicion);                  
  12:            while(item != null){
  13:                  if(item.checked) {
  14:                    return item.value;
  15:                  } else{
  16:                    posicion += 1;
  17:                    item = document.getElementById(ctrlOpcionesId+"_"+(posicion));                                                                           
  18:                  }                        
  19:            }  
  20:        }    

</script>

 
Y lo llamamos con un enlace
<a href="javascript:mensajeSeleccionado('<%=RadioButtonList1.ClientId %>');">Ver Seleccion</a>

y enviamos el Id del lado del Cliente de nuestro webcontrol.

<a href="javascript:mensajeSeleccionado('<%=RadioButtonList1.ClientId %>', <%=RadioButtonList1.Items.Count %>);">Ver Seleccion</a>
(cabe aclarar que es mejro escribir esto desde el codigo y no inline como estamos utilizando <% %>)
Bueno y la firma de la funcion javascript seria
function mensajeSeleccionado(ctrlOpcionesId, cantidadItems){
alert("Opcion seleccionada:" + OpcionObtenerSeleccionada(ctrlOpcionesId, cantidadItems))
}

y recorrer mediante un bucle for… que te lo dejo para tarea del hogar 😉

 

Enlaces

  • RadioButtonList (Clase)
    Representa un control de lista que encapsula un grupo de controles de botón de opción.
  • ListItem.Attributes (Propiedad)
    Obtiene una colección de pares de nombre y valor de atributo para la clase ListItem que ésta no admite directamente.
  • AttributeCollection (Clase)
    Proporciona acceso de modelo de objetos a todos los atributos declarados en la etiqueta de apertura de un elemento de control de servidor ASP.NET. No se puede heredar esta clase.

3 comentarios sobre “RadioButtonList: Insertar llamada Javascript en ListItem”

  1. De este codigo cual seria su ejemplo en Visual web developer, ya que quiero desarrolar algo similar, es sobre un cuestionario, en una radiobuttonlist tengo 3 items que son las posibles respuestas y que al elegir una respuesta te genere un valor si la respuesta es correcta o incorrecta y al fin al del cuestionario nos muestre el promedio o calificacion que se obtuvo en el cuestionario.

    gracias por tu atencion

  2. Hola Alejandro
    Este ejemplo tambien te sirve para VWD (Visual Web Developer)
    Lo que si no creo que sea del todo recomendable para aplicaciones del tipo de preguntas/respuestas, tipo examen. Ya uqe si verificas en el cliente si la pregunta esta acerdada o no entonces tendras que escribir en algun lugar el «valor» y alli podran ser detectados… incluso si lo haces de manera asincrona, tipo AJAX tambien…
    Porque no lo haces simple… en las paginas vas mostrando las preguntas y en cada postback recuperas el valor lo verificas y lo guardas en alguna variable de session o en alguna tabla de tu DB si estas persistiendo…
    Que te parece? o como lo tienes planteado…

  3. hola jose, mi problema es el siguiente:

    tengo un try catch, y por el CATCH yo quiero un alert que de el mensaje de error. como puedo llamar al alert desde el code behind?
    ya probe todas las variantes de

    Response.Write(««)

    pero no me anda ninguna!

Deja un comentario

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