Esto vas mas allá de un estructura de matriz/arreglo de .NET sino que la idea es como registrar en el cliente una variable que corresponda a un arreglo para poder utilizarlo desde funciones Javascript.
Es decir, tener en el cliente algo así:
<script type="text/javascript">
//<![CDATA[
var miArreglo = new Array('Item1', ' Item2', ' Item3');
//]]>
</script>Las opciones:
Que si lo vemos así diremos" y para "que nos puede servir??"...
Un ejemplo podría ser cuando necesitamos todos los controles de checkbox de una grilla dentro de un arreglo para manipularlo por Javascript
Soluciones
Veamos las opciones que tenemos para registrar un arreglo desde el codebehind de .NET hacia la pagina para manipularlo con JavaScript
-
OPCION 1: Registrar el arreglo manualmente... como siempre digo "artesanalmente"
Aquí estamos nuevamente con escritura directa en la pagina, no con ResponseWrite (como lo hacíamos hace un par de años con ASP clásico) sino con métodos especiales que nos ayuden a "controlar" esta escritura de script.
En esta oportunidad como utilizaremos RegisterClientScriptBlock de la clase ClientScriptManager, debemos también escribir el tag <script..>, o utilizar una sobrecarga del método que escribe por nosotros el tag
Ejemplo:
(mas abajo esta el enlace para descargar el ejemplo completo)
Para registrar el arreglo, que en este ejemplo lo tomamos de una cadena separada por comas (mas adelante veremos el ejemplo con los checkbox)
Protected Sub btnArregloBasicoRegistrar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnArregloBasicoRegistrar.Click
Dim cadena() As String = txtArregloBasico.Text.ToString.Split(",")
Dim arregloScript As New StringBuilder
For i As Integer = 0 To cadena.Length - 1
arregloScript.Append("'")
arregloScript.Append(cadena(i))
arregloScript.Append("'")
If i <> (cadena.Length - 1) Then
arregloScript.Append(", ")
End If
Next
'Armar Script
Dim script As New StringBuilder
script.Append("<script type=""text/javascript"">")
script.Append(vbCrLf)
script.Append("var ArregloBasico = new Array(")
script.Append(arregloScript.ToString)
script.Append(");")
script.Append(vbCrLf)
script.Append("</script>")
'Registrar Script
Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "ARREGLOBASICO", script.ToString)
End Sub
Aquí como vemos primeramente obtengo el arreglo a partir de la cadena (con el famoso método split), luego genero el script para registra el arreglo.
El resultado en la pagina es:
<script type="text/javascript">
var ArregloBasico = new Array('C-3PO', ' R2-D2');
</script>Si utilizáramos la sobrecarga con el método RegisterClientScriptBlock que contiene el booleano para que escriba directamente el TAG <script>
Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "ARREGLOBASICO", script.ToString, True)
La salida es:
<script type="text/javascript">
//<![CDATA[
var ArregloBasico = new Array('C-3PO', ' R2-D2');
//]]>
</script> Para verificar/utilizarlo en el cliente llamo a la funcion VerificarArreglo que me imprime el contenido
Lo llamo desde un simple enlace:
<a href="#" onclick="VerificarArreglo(ArregloBasico);">Verificar Arreglo Basico en el cliente</a>
La función es:
<script type="text/javascript">
function VerificarArreglo(arregloId){
var cantidadItems = arregloId.length;
var mensaje = '';
for(i=0; i<cantidadItems; i++) {
mensaje = mensaje+"Item: "+arregloId[i]+'\n';
}
alert(mensaje);
}
</script>
-
OPCION 2: Utilizando el método ClientScript.RegisterArrayDeclaration
Para automatizar la creación de array del lado del cliente, tenemos el método RegisterArrayDeclaration tambien de la clase ClientScriptManager
Ejemplo:
Código para registrar el arreglo...
Protected Sub btnArregloRegistrar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnArregloRegistrar.Click
Dim cadena() As String = txtArregloEjemplo.Text.ToString.Split(",")
For i As Integer = 0 To cadena.Length - 1
Page.ClientScript.RegisterArrayDeclaration("ArregloEjemplo", String.Concat("'", cadena(i), "'"))
Next
End SubEn el cliente nos queda registrado:
<script type="text/javascript">
//<![CDATA[
var ArregloEjemplo = new Array('Yoda', ' Luke', ' Obi-Wan', ' R2-D2', ' C-3PO');
//]]>
</script>Para utilizarlo desde Javascript, en el ejemplo llamo a la función que veníamos utilizando en la opción 1, pero aquí tengo que enviar como parámetro el nuevo arreglo.
<a href="#" onclick="VerificarArreglo(ArregloEjemplo);">Verificar Arreglo en el cliente</a>
Resultado:
-
OPCION 3: y cuando tenemos dentro de un UpdatePanel? Utilizamos ScriptManager.RegisterArrayDeclaration
Cambia un poco cuando necesitamos registrar elementos de script del cliente en un ambiente asíncrono, o mejor dicho cuando el contenido no se setea en la carga la pagina sino cuando se actualiza parte de ella... el típico caso del UpdatePanel, alli nuestra ayuda viene por parte del ScriptManager con el Método análogo al anterior RegisterArrayDeclaration
Ejemplo:
La registración, con un poco de efecto para visualizar la actualización del UP ;)
Protected Sub btnArregloRegistrarEnUpdatePanel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnArregloRegistrarEnUpdatePanel.Click
System.Threading.Thread.Sleep(2000)
Dim cadena() As String = txtArregloEnUpdatePanel.Text.ToString.Split(",")
For i As Integer = 0 To cadena.Length - 1
ScriptManager.RegisterArrayDeclaration(Me, "ArregloEnUpdatePanel", String.Concat("'", cadena(i), "'"))
Next
End SubAquí la registración es "on-tle-fly" o como lo quieras llamar, la idea es que no podremos visualizarlo en el código del renderizado de la pagina. Pero si consultamos luego (con el mismo método que veníamos utilizando) llamando a una funcion javascript desde un enlace "fuera" del update panel:
<a href="#" onclick="VerificarArreglo(ArregloEnUpdatePanel);">Verificar Arreglo En Update Panel en el cliente</a>
Resultado:
Ejemplo con Gridview y Checkbox
Vamos a utilizar la registración para tener en el cliente los ID de los checkbox de un Gridview, y poder manipularlos. La version "light" de este ejemplo solo contaremos las filas seleccionadas. Pero puedes agregar mas funcionalidad...
Tenemos un Gridview :
El checkbox lo hacemos en una columna template
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>Y lo cargamos en el load de la pagina, de una manera simple:
Private Sub CargarGrilla()
Dim dt As New Data.DataTable
dt.Columns.Add("Nombre")
dt.Rows.Add("Yoda")
dt.Rows.Add("Luke")
dt.Rows.Add("Obi-Wan")
dt.Rows.Add("R2-D2")
dt.Rows.Add("C-3PO")
GridView1.DataSource = dt
GridView1.DataBind()
End Sub
En el evento Databound de la grilla, registramos nuestro arreglo de checkbox, llamado "aGrillaCheck"
Protected Sub GridView1_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.DataBound
For Each fila As GridViewRow In GridView1.Rows
'Recuperando el checkbox
Dim chk As CheckBox = CType(fila.FindControl("chk"), CheckBox)
Page.ClientScript.RegisterArrayDeclaration("aGrillaCheck", String.Concat("'", chk.ClientID, "'"))
Next
End SubPara verificar la cantidad de checkbox seleccionamos, lo recorremos a todos
<a href="#" onclick="VerificarGrillaCheck(aGrillaCheck);">Verificar Check de la grilla en el cliente</a>
La función Javascript que realiza esto:
<script type="text/javascript">
function VerificarGrillaCheck(arregloCheck){
var cantidadCheck = arregloCheck.length;
var cantidadSeleccionados = 0;
var mensaje = '';
for(i=0; i<cantidadCheck; i++) {
var chk = document.getElementById(arregloCheck[i]);
if (chk.checked==true){
cantidadSeleccionados = cantidadSeleccionados+1;
}
}
mensaje = "Seleccionados: "+cantidadSeleccionados;
alert(mensaje);
}
</script>
Entonces el resultado podemos:
Descargar demo
(es una pagina con codebehind)
Enlaces:
Comparte este post: