Registrar arreglo de ASP.NET en el cliente para utilizarlo con Javascript

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

image

 

 

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)
      image
      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
      image
      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:
      image

    • 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 Sub

      En 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:
      image

       

       


    • 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:

      image

      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 Sub

      Aquí 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:
      image

       

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 :
image

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 Sub

Para 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:
image
 
 
 

Descargar demo

(es una pagina con codebehind)
 
 
 

Enlaces:

7 comentarios en “Registrar arreglo de ASP.NET en el cliente para utilizarlo con Javascript”

  1. Felicitaciones, un lindo post, pero si el gridview se le configura paginación, se pierde los registros seleccionados del pageindex anterior, alguna idea de como solucionar ésto?

    de antemano mis agradecimientos por su tiempo.

  2. Sinceramente quiero agradecerte por proveer esta información, ya que llevaba bastante tiempo tratando de solucionar esta situación de registrar el arreglo en una grilla que se encontraba en un UpdatePanel, gracias de nuevo y exitos.

  3. Hola @Jorge Mario Valencia H.
    Me alegro que te sirva, y muchas gracias por tu comentario. Ya que uno escribi lo que “cree que le puede servir a otros”…y es importante el feedback, incluso para otras alternativas
    Saludos

  4. Hola gracias por el post, realmente esta muy bueno y me sirve para varias cosillas..
    Solo que he intentado hacerlo para un arreglo bidimencional y nomas no lo puedo leer en sl JavaScript, si veo todo el contenido, pero como un arreglo de 1 dimencion..
    Algun comentario de como hacerlo??
    saludos

Deja un comentario

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