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
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)
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="BLOCKED SCRIPTmensajeSeleccionado('<%=RadioButtonList1.ClientId %>');">Ver Seleccion</a>y enviamos el Id del lado del Cliente de nuestro webcontrol.
<a href="BLOCKED SCRIPTmensajeSeleccionado('<%=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.
Comparte este post: