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

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (7)  (1)

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.

 

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.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?