Insertando scripts traidos desde el servidor: creación de un banner simple

Introducción.

Hola a todos! En este artículo vamos a crear un ejemplo de una página web que agrega un pequeño javascript creado del lado del servidor para que se corra en el cliente cuando este entra a la página.

La idea es sencilla. Hay que crear un pequeño banner para una página. Este banner debería mostrar fotos aleatoriamente, las cuales se tienen que cambiar cada un período de tiempo aleatorio entre 0 y n segundos. Ahora bien, los nombres de las fotos pueden variar. Los nombres de estas fotos están almacenados en una base de datos (podrían darse el caso de que sean fotos de productos y estar asociadas al mismo).

Para simplificar, el siguiente ejemplo está hecho con una sola foto, pero lo he usado para varias fotos y anda a la perfección.

¿Cuál es el secreto para poder registrar este código y cómo podemos hacerlo? Fácil: el método RegisterClientScriptBlock de la clase Page.

¿Cómo funciona esta clase? Sencillo. Recibe dos parámetros: una key (para identificar el script) y el script en sí. Esta clase registra el script inmediatamente después del tag <form runat="server"...>

Pero bueno, vamos al ejemplo, que es lo más lindo :-)

---

Creación del ejemplo

Para empezar, vale aclarar que para hacer este ejemplo más sencillo, se lo acotó a generar un banner de una sóla imagen. Sin embargo, no se descuidó el hecho de incluir en función de la página que renueva la imagen algún método para mantener las proporciones de las mismas.

Para empezar, creé un proyecto web en C#, al cual llamé: 'banner'

Dentro de ese proyecto cree un webform al que llamé banner. Al mismo le incluí un script que genera tiempos aleatorios (getTiempo) y otro para obtener las medidas proporcionadas de una imagen (getDimension). También incluí un script que es el que hace el trabajo de cambiar la imagen y generar otro tiempo aleatorio en el cual se volverá a cambiar (mostrarBanner1).

El código de la página lo puedes ver si bajas el ejemplo desde el link que está debajo del todo de la página.

En el codebehind es donde ocurre la magia :-P. Allí lo que se hace es generar un script que declara dos arreglos (uno para las url de las fotos y otro para sus descripciones) y luego los va cargando con la información obtenida desde una base de datos Access (podría haber sido cualquier proveedor, pero nuevamente para simplificar...) La base tiene una tabla 'fotos' con dos campos: foto y descripcion.

Se crea una conexión y un comando para recuperar todas las fotos, se crea un DataReader y se lo recorre agregando elementos al script.

Finalmente, se registra el script mediante nuestro recientemente descubierto: RegisterClientBlockScript.

De más está decir que si se quiere hacer el banner para varias imágenes, con este sólo script ya nos alcanza. Lo que hay que modificar son los scripts que en la página se encargan de refrescar.

A continuación el código del codebehind

banner.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace Banner
{
	 public class Banner : System.Web.UI.Page
    {
		 private void Page_Load(object sender, System.EventArgs e)
        {
            string script;
            OleDbConnection cn;
            OleDbCommand cmdSelVariantes;
            OleDbDataReader rdrVariantes;
            int i;
            string auxiliar, desc;

            script = "<script>";
            script += "function inicializar()\n";
            script += "{\n";
            script += "banner_img = new Array();\n";
            script += "banner_dsc = new Array();\n";
            script += "\n";

            // Armo la conexión y la consulta de donde voy a obtener las imágenes
            cn = new OleDbConnection();
            cn.ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Password="""";User ID=Admin;Data Source=C:\banner\banner.mdb;Mode=Read;Extended Properties="""";Jet OLEDB:System database="""";Jet OLEDB:Registry Path="""";Jet OLEDB:Database Password="""";Jet OLEDB:Engine Type=5;Jet OLEDB:Database Locking Mode=0;Jet OLEDB:Global Partial Bulk Ops=2;Jet OLEDB:Global Bulk Transactions=1;Jet OLEDB:New Database Password="""";Jet OLEDB:Create System Database=False;Jet OLEDB:Encrypt Database=False;Jet OLEDB:Don't Copy Locale on Compact=False;Jet OLEDB:Compact Without Replica Repair=False;Jet OLEDB:SFP=False";
            cmdSelVariantes = new System.Data.OleDb.OleDbCommand();
            cmdSelVariantes.Connection = cn;
            cmdSelVariantes.CommandType = CommandType.Text;
            cmdSelVariantes.CommandText = "SELECT foto, descripcion";
            cmdSelVariantes.CommandText += " FROM fotos ";
            cn.Open();
            rdrVariantes = cmdSelVariantes.ExecuteReader();
            i = 0;
            while (rdrVariantes.Read())
            {
                desc = "Producto: " + rdrVariantes.GetValue(1).ToString();
                auxiliar = rdrVariantes.GetValue(0).ToString();
                if (!auxiliar.Equals(string.Empty))
                {
                    i++;
                    script += "banner_img[" + i.ToString() + "] = '" + "imagenes/" + auxiliar + "';\n";
                    script += "banner_dsc[" + i.ToString() + "] = '" + desc + "';\n";
                }
            }
            cn.Close();

            script += "cantidad = " + i.ToString() + ";\n";
            script += "}\n";
            script += "</script>";
            this.RegisterClientScriptBlock("inicializar", script);
        }

        #region Código generado por el Diseñador de Web Forms
        override protected void OnInit(EventArgs e)
        {
            InitializeComponent();
            base.OnInit(e);
        }

		 private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);
        }
        #endregion
    }
}

---

Conclusión

El método RegisterClientBlockScript es un método muy potente ya que permite añadir funcionalidad del lado del cliente que sólo puede ser accedida del lado del servidor.

De esta manera posibilita realizar validaciones o simplemente añadir comportamiento deseable (como en este ejemplo) que de otra manera no sería posible.

Recordar que existe es muy útil y bien manejada, brinda a los desarrollos mucha potencia.

Saludos para todos!

Andrés

Fichero con el código de ejemplo: asfaya_InsertandoScriptDesdeelServidor.zip - Tamaño 67.4KB