- Tabs simples en ASP.NET
Categorías:
ASP.NET
Algunas de nuestras aplicaciones necesitan mostrar tabs o elementos superpuestos. Vamos a ver como se logra este efecto utilizando dos elementos de ASP.NET; estos son el elemento asp:Menu y el elemento asp:MultiView. El código es realmente muy sencillo y nos ayudamos con un set de 4 imágenes. Dos imágenes para el primer y segundo tab (con sus estados activado y desactivado).
-SimpleTabulation.aspx (nuestra página aspx)
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="MenuTab" Width="120px" runat="server"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
OnMenuItemClick="MenuTab_MenuItemClick">
<Items>
<asp:MenuItem ImageUrl="~/images/TabOneOn.jpg" Value="0"/>
<asp:MenuItem ImageUrl="~/images/TabTwoOff.jpg" Value="1"/>
</Items>
</asp:Menu>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
Contenido del Tab 1!
</asp:View>
<asp:View ID="View2" runat="server">
Contenido del Tab 2!
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
-SimpleTabulation.aspx.cs (nuestro archivo de code behind)
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class SimpleTabulation : Page {
protected void MenuTab_MenuItemClick(object sender, MenuEventArgs e) {
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
int selectedTab = Int32.Parse(e.Item.Value);
switch (selectedTab) {
case 0:
MenuTab.Items[0].ImageUrl = "~/images/TabOneOn.jpg";
MenuTab.Items[1].ImageUrl = "~/images/TabTwoOff.jpg";
break;
case 1:
MenuTab.Items[0].ImageUrl = "~/images/TabOneOff.jpg";
MenuTab.Items[1].ImageUrl = "~/images/TabTwoOn.jpg";
break;
}
}
}
2 comentarios:
la verdad, bien simple y util
Comparto el comentario de Chara..
simple y util,, ya lo implemente en mi project
1 pregunta x fa como hago para llamar 1 pagina web distinta en cada tab
grax d antemano x la respuesta
salu2
Publicar un comentario en la entrada