Como criar abas em ASP.NET - Usando Menu, MultiView e View com CSS
Introdução
Neste artigo estarei mostrando como criar duas abas usando os componentes Menu, MultiView e View do ASP.NET, para formatar a interface do usuário, vamos usar CSS.
Mais pensando bem, para que usar esses três componentes do ASP.NET junto ao CSS para criar as abas, se temos disponível os controles TabContainer e TabPanel do AJAX Control Toolkit que resolve isso facilmente, é que os controles do AJAX Control Toolkit TabContainer e TabPanel não funciona corretamenta no navegador FireFox, por exemplo, o FreeTextBox dentro do TabPanel não funciona, conseguimos até criar o FreeTextBox normalmente, mais não é possível escrever nada nele.
E é por essa necessidade de pricisar funcionar no FireFox que vamos usar os controles Menu, MultiView e View do ASP.NET para criar as abas.
Criar página Default.aspx
Levando em consideração que já tenha criado o projeto, o código em negrito exibido na Listagem 01 apresenta os componentes asp:Menu, asp:MultiView e dois asp:View com sua configurações.
<form id="form1" runat="server">
<asp:Menu ID="tabMenu" runat="server" Orientation="Horizontal" OnMenuItemClick="tabMenu_MenuItemClick">
<Items>
<asp:MenuItem Text="Tab_1" Value="t1" />
<asp:MenuItem Text="Tab_2" Value="t2" />
</Items>
<StaticMenuStyle CssClass="tab" />
<StaticMenuItemStyle CssClass="item" />
<StaticSelectedStyle CssClass="selectedTab" />
</asp:Menu>
<div class="conteudo">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
VALOR TAB 1
</asp:View>
<asp:View ID="View2" runat="server">
VALOR TAB 2
</asp:View>
</asp:MultiView>
</div>
</form>
Listagem 01. Componentes Menu, MultiView e View configurados.
Sobre o código da Listagem 01 vamos falar de alguns pontos importante. Observe no Menu a propriedade Orientation defininda como horizontal e as propriedades StaticMenuStyle, StaticMenuItemStyle, StaticSelectedStyle, StaticHoverStyle todas usando o atributo CssClass para identificar qual é o bloco de código CSS(Arquivo css será criado) usado para formatar as abas. E no MultiView tem que deixar o atributo ActiveViewIndex definido como 0(Zero).
Agora faça o código em negrito da Listagem 02 para definir as ações da página Default.aspx, para isso abra o arquivo Default.aspx.cs.
protected void Page_Load(object sender, EventArgs e)
{
tabMenu.Items[MultiView1.ActiveViewIndex].Selected = true;
}
protected void tabMenu_MenuItemClick(object sender, MenuEventArgs e)
{
switch (e.Item.Value)
{
case "t1":
MultiView1.ActiveViewIndex = 0;
break;
case "t2":
MultiView1.ActiveViewIndex = 1;
break;
}
}
Listagem 02. Eventos(Acões) da página Default.aspx.
No Page_Load definimos que o menu selecionará o item através do index atual do MultiView1. Já no evendo quando um item do menu é clicado, definimos que, quando o item 1 for clicado, ou seja, a aba 1, vamos possicionar o MultiView no View1, pelo atributo ActiveViewIndex definido como 0(Zero). E quando o item 2 do menu for clicado, o MultiView vai possicionar no View 2, através do ActiveViewIndex definido como 1(um).
Criar arquivo CSS
Para finalizar vamos precisando criar um arquivo do tipo StyleSheet colocando o nome do arquivo como formatTab.css, e fazer o código da Listagem 03 usado para formatar as abas.
.tab {
margin-left : 15px;
}
.item
{
background: #316271;
color: white;
text-transform: capitalize;
padding-left:5px;
padding-right:5px;
padding-bottom: 5px;
padding-top: 5px;
}
.selectedTab
{
font-style: italic;
font-weight: bold;
background: black;
}
.tab a:hover
{
text-decoration: underline;
}
.conteudo
{
border-top : 1px solid black;
border-bottom : 1px solid black;
border-left : 1px solid black;
border-right : 1px solid black;
margin-bottom:10px;
}
Listagem 03. Código usando para formatar a página Default.aspx.
Observe que os nomes tab, item e selectedTab são os mesmos que foram definidos nos atributos CssClass das propriedades do menu. Muito importante também é o nome conteudo, usado para formatar a <div class="conteudo"> definida na página.
E para que o arquivo css tenha resultado na página Default.aspx faça o código em negrito da Listagem 04 dentro da tag HTML <head></head>.
<head runat="server">
<link href="formatTab.css" rel="stylesheet" type="text/css" />
</head>
Listagem 04. Link entre a página Default.aspx e arquivo css.
Com isso finalizamos o artigo.
Conclusão
Percebemos no decorrer do artigo, que não é tão dificil criar abas utilizando os componentes memu, multiview e view junto ao css. Precisando somente de algumas configurações nos componentes e algumas ações do mesmo, e finalizando com o css para dar uma melhor aparência.
Lembrando que essa é uma das soluções para criar abas em ASP.NET 2.0, existem outras formas de se fazer o mesmo.
