Menu Tab Multi Row .Net

Este es un ejemplo de cómo se podría construir un menú en el que se necesite tener más de una fila de Tabs usando .Net y apoyándonos con algo de javacript.

Se usara el control Multiview para mostrar el Tab Content a través de su atributo ActiveViewIndex el cual sera establecido con un evento del menú que en este caso elegí usar un asp Button para cada opción (Tab).

La idea es que al seleccionar una pestaña del menu se active la vista deseada y ademas la fila a la que pertenece la pestaña se posicione inmediatamente encima del contenido para asi mostrar cual es la pestaña que esta activa.

Comenzamos creando el Multiview:

  <asp:MultiView runat="server" ID="mvPantallas" ActiveViewIndex="0">
      <asp:View runat="server" ID="view1">
         <uc1:ucUno runat="server" id="ucUnoP"/>
      </asp:View>
      <asp:View runat="server" ID="view2">
         <uc2:ucDos runat="server" ID="ucDosP" />
      </asp:View>
      <asp:View runat="server" ID="view3">
         <uc3:ucTres runat="server" ID="ucTresP" />
      </asp:View>
      <asp:View runat="server" ID="view4">
         <uc4:ucCuatro runat="server" ID="ucCuatroP"/>
      </asp:View>
      <asp:View runat="server" ID="view5">
         <uc5:ucCinco runat="server" ID="ucCinco"/>
      </asp:View>
      <asp:View runat="server" ID="view6">
         <uc6:ucSeis runat="server" ID="ucSeis"/>
      </asp:View>
   </asp:MultiView>

Como podemos ver en cada view se hace referencia a un UC (User Control) en el cual podremso todo el contenido.

Como segundo paso es crear el menu:

<div id="dvM1">
   <table cellpadding="0" cellspacing="0px" style="border-width:0px 0px 0px 0px;">
      <tr>
         <td><asp:Button runat="server" CssClass="ButtonItem" onclick="btn_Click" ID="dvM1btn1" Text="Uno" CommandName="0" /></td>
         <td><asp:Button runat="server" CssClass="ButtonItem" onclick="btn_Click" ID="dvM1btn2" Text="Dos" CommandName="1" /></td>
         <td><asp:Button runat="server" CssClass="ButtonItem" onclick="btn_Click" ID="dvM1btn3" Text="Tres" CommandName="2" /></td>
      </tr>
   </table>
</div>
   <div id="dvM2">   
   <table cellpadding="0" cellspacing="0px" style="border-width:0px 0px 0px 0px;">
      <tr>
         <td><asp:Button runat="server" CssClass="ButtonItem" onclick="btn_Click" ID="dvM2btn4" Text="Cuatro" CommandName="3" /></td>
         <td><asp:Button runat="server" CssClass="ButtonItem" onclick="btn_Click" ID="dvM2btn5" Text="Cinco"  CommandName="4" /></td>
         <td><asp:Button runat="server" CssClass="ButtonItem" onclick="btn_Click" ID="dvM2btn6" Text="Seis" CommandName="5" /></td>
      </tr>
   </table>
</div>
<div id="dvActivo">
</div>

Lo que hemos hecho es contruir el menu con botones que estan contenidos en dos div diferentes los cuales representaran cada row de nuestro menu, tambien podemos observar que al final agregamos un div vacio el cual nos servira para meter el div que contenga la opcion seleccionada y asi posicionarla inmediatamente arriba del contenido, para esto escribimos la siguiente funcion javascript al inicio de nuestra pagina:

   function fnMoveActiveMenu(name) {   
      if (name.toString().length > 0) {
         dvMeuA = document.getElementById(name);
         dvA = document.getElementById('dvActivo');
         dvA.appendChild(dvMeuA);
      
      }
   }

y al final de la pagina:

fnMoveActiveMenu('<%=sActiveMenu%>');

La variable sActiveMenu sera establecida por el CodeBehind en el evento del boton, esta varaiable guardara el nombre del div que contiene el la opcion seleccionada:

 protected void btn_Click(object sender, EventArgs e)
      {
         //Recuperamos el boton y establecemos el estilo
         Button btnClk = (Button)sender;
         btnClk.Style.Value = "background-color:#FFFFFF;border-width:1px 3px 0px 1px;border-color:Black;border-style: outset;";

         //Obtenemos el nombre del div al que pertenece la opcion seleccionada
         sActiveMenu = btnClk.ID.ToString().Substring(0, 4);

         //Activamos la vista que corresponde a la opcion deseada
         this.mvPantallas.ActiveViewIndex=Convert.ToInt32((((Button)sender).CommandName));
     
      }
Si deseas bajar el codigo completo del ejemplo aqui.