Marc Rubiño

ASP.NET, C#, AJAX.NET, JavaScript, etc.

November 2007 - Artículos

ASP.NET AJAX TabControl - Tabs Optimizados

Bueno el hecho de decir que vamos a optimizar la carga de datos con un updatePanel es un poco contradictorio pero si lo utilizamos con un poco de cabeza y no solo para no ver la carga de la página podemos optimizar la utilización de este control.


La idea sería solo cargar la información de cada TabPanel dentro de un TabControl cuando sea necesario y no todo el control al cargar la página.

Para hacer esto tenemos que tener dos cosas claras.

  • Utilizaremos un updatePanel para actualizar cada TabPanel
  • Utilizaremos los Triggers del upDatePanel para capturar el evento ActiveTabChanged del TabContainer.

Que es eso de la colección de Triggers?

  • Habilitan que los eventos de controles fuera del UpdatePanel puedan actualizar su contenido.

Empezaremos ya con nuestro ejemplo.

  1.  Primero crearemos un nuevo sitio web con Asp.Net Ajax.
  2. Arrastraremos al formulario un nuevo control TabControl y le crearemos tres nuevos TabPanels.
  3. Al TabControl le Habilitamos el AutoPostBack = true para que lance sus eventos al servidor.
  4. Definimos un evento ActiveTabChanged del TabControl para capturar cada vez que se cambia de Tab.
  5. Dentro de cada TabPanel le introduciremos un UpdatePanel y dentro de el un label para hacer las pruebas.
  6. A cada uno de los UpdatePanels le añadimos un trigger para que se actualice con el evento ActiveTabChanged del TabControl que hemos configurado.

Ahora Empezaremos con el código.


Al cargar la página inicializamos los controles y cargamos el tab principal.

protected void Page_Load(object sender, EventArgs e)     {        lblTab1.Text = string.Empty;        lblTab2.Text = string.Empty;        lblTab3.Text = string.Empty;         if (!IsPostBack)        {            CargarTab("TabPanel1");        } 

    } 

 En el evento ActiveTabChange controlamos el nuevo tab y cargamos su contenido.

 protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e){   CargarTab(((AjaxControlToolkit.TabContainer)sender).ActiveTab.ID); }

 

Finalmente tenemos un método que carga únicamente la información del tab que queremos mostrar.

private void CargarTab(string id)    {        switch (id)        {            default:                break;            case "TabPanel1":                System.Threading.Thread.Sleep(500);                lblTab1.Text = " Datos Tab1 Actualizados...";                break;            case "TabPanel2":                System.Threading.Thread.Sleep(500);                lblTab2.Text = " Datos Tab2 Actualizados...";                break;            case "TabPanel3":                System.Threading.Thread.Sleep(500);                lblTab3.Text = " Datos Tab3 Actualizados...";                break;        }    }

 

El resultado final sería que solo se cargaría la información del TabControl que estamos mostrando.