¿Cómo Simular un TabControl para WebForms con MultiView y View?

Otra Consulta de mi amigo Christian (ya se está haciendo costumbre): ¿Hay un componente TabControl para Web?, la respuesta corta NO.

Una mejor respuesta, no, pero se puede hacer, existen muchas formas de hacerlo, pero yo opté por la mas fácil y rápida de todas, para esto tenemos que utilizar dos nuevos controles de ASP .Net 2.0, MultiView y View, estos dos componentes trabajan justos para lograr la funcionalidad que necesitamos.

View.- Sirve como contenedor de otros elementos, es decir actúa como un panel, donde podemos colocar todos los controles que necesitemos.

MultiView.- Como su nombre lo indica es un contenedor que sirve para poner dentro de él uno o más controles View, adicionalmente se encarga de que en un momento dado se visualice sólo uno de los controles View que contiene, para indicarle cual de los controles View queremos visualizar tenemos que utilizar la propiedad ActiveViewIndex.

Ya se habrán dado cuenta que el control MultiView tiene funciones similares al TabControl, en realidad lo único que le hace falta es la parte superior donde se puede seleccionar las páginas, no tiene esta representación gráfica, y que vamos a hacer al respecto, simplemente agregarlo nosotros, la manera más fácil es utilizar un control Menu, lo configuramos para que tenga orientación horizontal ponemos los ítems que queremos y listo. Solo falta interceptar el evento MenuItemClick y ponerle el siguiente código:

void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
      MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
}

Para hacer esto, es necesario poner en la propiedad value de cada item el índice del control View que le corresponde.

Simulación de TabControl

Esta solución es bastante simple, si quieren hacer algo más elaborado pueden utilizar imágenes para los tabs, el siguiente artículo contiene un ejemplo que utiliza imágenes: A Simple ASP.NET Tab Control Using the MultiView control.

1 comment so far

  1. lili on

    hola gracias por el ejemplo lo prove y funciona bien
    pero tengo un problemilla cuando relleno los datos en un uno de los campo de texto de que tengo dentro del tabcontrol1 y me paso al tabcontrol2 se me borran los datos que llene en el anterior no se porque si es me puedes ayuadar te lo agradeceria.
    BYE🙂


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: