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.

 

33 comentarios en “ASP.NET AJAX TabControl – Tabs Optimizados”

  1. Mañana mismo lo pruebo. Mi problema viene que en cada tab tengo un grid con su objectdatasource y no se cómo evitar que haga el enlace a datos en cada pageload.

    Un saludo

  2. Hola,

    he estado haciendo pruebas y me ha funcionado relativamente bien.

    Básicamente si no es postback le pongo el DataSourceID del grid a string.Empty y en el case de “CargarTab” es donde se lo asigno si no está asignado ya.

    Comentarte que inicialmente lo que hacía era pasarle el sqlDataSource directamente a la propiedad DataSource del Gridview, pero perdía todo el tema de paginación del grid y de los eventos de inserción y modificación.

    Luego he ido comprobando que sólo hacía la carga de datos de la pestaña que elegía y luego conforme iba necesitando otras pestañas u opciones.

    Muchas gracias y un saludo

  3. Hola Diana,

    Tal y como lo planteas solo veo dos posibilidades.

    1. Lees el contenido de la página con un HttpWebRequest y luego lo puedes ir pintando según te convenga.

    2. Pones un Iframe para ver el contenido de las otras páginas.

    Espero que te sirva.

    Saludos.

  4. Muy Buena tu idea Marc, pero inclusive controlando el postback en mi Page Load la aplicación se vuelve muy pesada, y me parece q realicé los cambios a como tu dijiste. Creo que si bien ASP .net brinda muchas bondades en conjunto con AJAX, en terminos de rendimiento no se puede transformar la libertad a libertinaje. Espero pronto esté equivocado. Saludos.

  5. Hola William,
    La idea es optimizar un poquito los tabs panels, evitando la carga de toda la información en la primera llamada a la página y tan solo se realice cuando quieras abrir el Tab.

    Pero todos ya sabemos que trabajar con updatePanels no es precisamente lo más recomendado, solo si no te quieres complicar la vida haciéndote tu propio control.

    Yo considero que la filosofía que nos aporta AJAX es una revolución para la web tradicional, pero hay que meditar muy bien como utilizar las herramientas con las que contamos.

    Un Saludo.

  6. Marc. Excelente artículo, recien empiezo con ASP net,
    pero trabajo con Visual, asi que tu instruccion:
    protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e){ CargarTab(((AjaxControlToolkit.TabContainer)sender).ActiveTab.ID); }

    No se como manejarla en Visual. Agradezco tu colaboracion

    rocyvan@hotmail.com

  7. El TabControl no me deja seleccionarlo en un proyecto ASP.net, es decir, en el toolbox me aparece desactivado supongo pq es un control específico para windowform no para webform.

    ¿Tú cómo lo haces?

  8. me gustaria saber como hago para arrastrar el tab control en ajax por q en mi visual estudio solo tengo las herramientas de ajax normales entonces no se de a donde sacar el tabcontrol

  9. Saludos, me has ayudado mucho con este material, tengo un pequeño problema, tengo 2 Tabs, en el primero varios controles y el segundo es un listado de los datos, cuando cargo los datos del tab1 y los borro con un botón Limpiar lo hace sin problemas, me paso al tab2 y todo bien, pero al volver al tab1 se me cargan los datos que estaban marcados antes de limpiarlos, el problema se me presenta con los DropDownList, se me está quedando en memoria la información, probé con el dispose pero no logro solucionarlo, hay algo en especial para poder descargar la información del Tab1? Agradezco tu ayuda.

  10. Hola

    Sergio:
    En el cuadro de herramientas, botón derecho elegir elementos, seleccionas el asembly del AjaxControlToolkit y aparecerán en la barra.

    Erick:
    Se te mantiene los datos por el viewState, tienes dos opciones o desactivas el viewstate del control, que es una propiedad “EnableViewState = false” o cuando vayas a recargar la lista limpias los datos “DropDownList1.Items.Clear()”.

    Saludos

  11. Gracias por la respuesta Marc, logré encontrar el error, era un descuido mio, en el Case que lleva al procedimiento del TabPanel1, al ingresar estaba ejecutando el metodo para recargar la pagina y por eso perdía los datos, lo que hice fue incluirle una validación para que no entre, algo sencillo pero no lo había visto…

    Éxitos!

  12. Mi problema viene que en cada tab tengo un grid con su objectdatasource y no se cómo evitar que haga el enlace a datos en cada pageload.

    el mismo problema de sentoki ..
    me pueden enviar copiar ese codigo please
    Un saludo

  13. Hola Marc, agradezco el material, pero noté que en el evento _ActiveTabChanged, que se lanza al cambiar de pestaña, el sistema me ejecuta dos veces el código, es decir, llama dos veces el evento LoadTab, en la primera ocasion lo hace bien, pero para la segunda me pierde muchos valores porque pierde las referencias originales… Intenté que al ejecutar el primer LoadTab el metodo del ActiveTabChanged ejecutara un return, pero a pesar de ello apenas termina vuelve a entrar y se ejecuta, tenés alguna idea de qué podría estarme saliendo mal?

    Agradezco la ayuda posible.

  14. hola, podrian dar un ejemplo similar aplicado a el tratamiento de un IFRAME, mi problema es que en cada postback de mi página principal, la pagina cargada dentro del iframe se recarga y pierde los valores ingresados en la misma, espero puedan ayudarme. gracias

  15. Hola Marc, disculpa la molestia y más considerando que el post ya es un poco antiguo… he seguido tus aportes y me han ayudado mucho, incluso en este momento estoy utilizando tus consejos para los TabContainers en una aplicación… mi consulta, si es que aún tienes recuerdos de este aporte es, si conoces alguna manera de que manipular por medio de código, el tab que se le muestra al usuario?… me explico mejor…

    En un ambiente donde exista un TabContainer con 3 pestañas, en tiempo de ejecución, si el usuario presiona un botón en el Tab1, éste lo redirija al Tab2… eso es posible con esta “herramienta”?… te agradezco la atención, y si no hay respuesta no hay problema puesto que como indiqué, el post lleva ya ratillo de haberse posteado… Saludos!

  16. Hola al realizar el postback de mi tabcontainer desaparece la informacion y el tab se coloca en blanco, despues de varias pruebas me he dado cuenta que es por el tabindex, cuando lo inicializo en el primer tab este no se queda en blanco pero los demas tabs todavian continuan con el problema

  17. Hola, estoy utilizando los TabPanel, del toolkit control de ajax, para la versión 3.5 con VS2008.
    Tengo varias pestañas, y sólo quiero q esté habilitada por ejemplo la primera, y el resto deshabilitadas PERO VISIBLES. Si hago que alguna de ellas le pongo el enabled= false, directamente hace invisible la pestaña, y de hecho hace lo mismo que si le pongo el visible=false.
    Alguien sabe cómo hacer que salgan todas las pestañas deshabilitadas, (pero visible) menos la inicial?
    Muchas gracias.

  18. Primero que todo quiero darte las gracias por tu aporte me alegre mucho al encontrarlo
    Como siempre hay un pero me gustaría hacerte una pregunta
    Hay alguna forma de poder enviar solo el updatepanel del tab que es activado
    Por ejemplo si activo el tab 1 enviar solo el updatepanel1

    Gracias

  19. Primero que todo quiero darte las gracias por tu aporte me alegre mucho al encontrarlo
    Como siempre hay un pero me gustaría hacerte una pregunta
    Hay alguna forma de poder enviar solo el updatepanel del tab que es activado
    Por ejemplo si activo el tab 1 enviar solo el updatepanel1

    Gracias

  20. No entiendo exactamente a que te refieres con enviar solo el updatepanel que esta activado.

    Cuando se lanza el updatepanel solo se lanza la petición de ese updatepanel, lo que si es cierto es que se envía todo el estado de la página, eso es uno de los inconvenientes de los updatepanels y asp.net.

    Si realmente quieres controlar los tabs y la carga independiente sin estados, tendría que pensar en utilizar directamente AJAX.

    Saludos.

  21. Hola, tengo un problema:

    Estoy manejando un tabcontainer y en cada tabpanel una tabla, cad tabla tiene controles como dropdowlist, textbox, y manejo sqldatasource, mi problema q es coloque cada tabla dentro de un update panel y al seleccionar uno de mis dropdowlist se carga con info de la bd (sql) y se la pagina se tarda mucho, que me recomiendas?
    Tambien lo he intentado con multiview y me pasa lo mismo.

    Gracias.

  22. HOla qisiera hacerte una pregunta
    x ejemplo tengo yo na lista de usuarios que al seleccionar uno cargo sus datos y ahi recien tengo q habilitar los tabs y cada tab debe tener distinta funcionalidad x ejmplo actualizacion , pagos, etc.
    No se si hay alguna manera de que me puedas ayudar.
    Saludos

  23. Arrastro el tabcontainer al formulario(previamente arraste el scriptmanager)

    y al ejecutar el asp .. el tab no aparece en la pagina

    ¿como puedo hacer que se vea?

    Nota: VS 2008 aspx net 2.0 y ajaxt control tools para net 2

    desde ya, muchas gracias

  24. mi problema es el siguiente: tengo un DropDownList con numeros del 1 al 9 y dependiendo del numero seleccionado es el numero de tabs que se agregaran, la primera vez que selecciono lo hace sin ningun problema pero al momento de seleccionar por segunda ocasion otro numero del DropDownList me arroja el siguiente error: “El argumento especificado está fuera del intervalo de valores válidos.
    Nombre del parámetro: index” cabe mencionar que al momento de seleccionar un numero del DropDownList lo primero que se hace es limpiar el tabcontainer para no duplicar los tabs espero su valiosa ayuda gracias!!

Deja un comentario

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