Como criar abas em ASP.NET - Usando Menu, MultiView e View com CSS

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.