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>
<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
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 items9: 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>
<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>
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.