viernes, 9 de marzo de 2007

- Tabs simples en 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;
}
}
}

6 comentarios:

Anónimo dijo...
Este blog ha sido eliminado por un administrador de blog.
Anónimo dijo...

Excelente!!! Muchas Gracias.

Alan van Buuren dijo...

Rápido y conciso. Gracias

Anónimo dijo...

top [url=http://www.001casino.com/]free casino games[/url] coincide the latest [url=http://www.realcazinoz.com/]free casino bonus[/url] unshackled no set aside hand-out at the chief [url=http://www.baywatchcasino.com/]bay take note of casino
[/url].

Anónimo dijo...

Valuable info. Lucky me I found your web site by chance, and I'm shocked why this accident did not came about earlier! I bookmarked it.

Here is my page :: like

Anónimo dijo...

With havin so much content and articles do you ever run into any problems of plagorism or copyright violation?
My blog has a lot of unique content I've either created myself or outsourced but it looks like a lot of it is popping it up all over the web without my permission. Do you know any techniques to help prevent content from being ripped off? I'd genuinely appreciate it.


my blog; 64658