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.
- Primero crearemos un nuevo sitio web con Asp.Net Ajax.
- Arrastraremos al formulario un nuevo control TabControl y le crearemos tres nuevos TabPanels.
- Al TabControl le Habilitamos el AutoPostBack = true para que lance sus eventos al servidor.
- Definimos un evento ActiveTabChanged del TabControl para capturar cada vez que se cambia de Tab.
- Dentro de cada TabPanel le introduciremos un UpdatePanel y dentro de el un label para hacer las pruebas.
- 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.
[sourcecode language=»csharp»]
protected void Page_Load(object sender, EventArgs e)
{
lblTab1.Text = string.Empty;
lblTab2.Text = string.Empty;
lblTab3.Text = string.Empty;
if (!IsPostBack)
{
CargarTab("TabPanel1");
}
}
[/sourcecode]
En el evento ActiveTabChange controlamos el nuevo tab y cargamos su contenido.
[sourcecode language=»csharp»]
protected void TabContainer1_ActiveTabChanged(object sender,
EventArgs e)
{
CargarTab(((AjaxControlToolkit.TabContainer)sender).ActiveTab.ID);
}
[/sourcecode]
Finalmente tenemos un método que carga únicamente la información del tab que queremos mostrar.
[sourcecode language=»csharp»]
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;
}
}
[/sourcecode]
El resultado final sería que solo se cargaría la información del TabControl que estamos mostrando.
hola, estoy aprendiendo visual studio 2010 con c# y paginas asp.net, y en esta version no encuentro los tab controls,y quiero hacer algo similiar ..,hay algun otro control que tenga dicha funcionalidad ? o donde lo podria conseguir…felicidades por tu blog muy didactico.
Si no recuerdo mal este control se era se los AJAX ControlToolkit donde encontraras una buena lista de controles para utilizar con tus webForms.
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/
Saludos
hola, gracias por tu respuesta, he probado el codigo pero no me funciona la parte del evento ActiveTabChange, al cambiar de tab panel y a pesar de tener definidos los triggers para cada updatepanel, no se ejecuta el ActiveTabChange, y cuando vuelvo al tab1 ya no aparece el mensaje. el evento lo tengo definido en el webForm.cs, una sola vez y se compila sin problemas. no se si puedas orientarme que me falta…otra duda que tengo es que si el scriptmanager no se escribe nada. gracias de todas formas por la ayuda que me puedas prestar.