none
¿Como cambiar de Tabs (Ajax Toolking) con un boton? RRS feed

  • Pregunta

  • Que tal estoy realizando un formulario para el registro de mis usuarios a mi BD el problema es que son varios campos los que se tienen que llenar,

    para estos necesito varias tablas y unas dependen de otras.. lo que se me ocurrio es usar los tabs de ajax pero quisiera saber como puedo cambiar

    de tab al precionar un boton...

    fue lo que se me ocurrio a mi .. o alguien me puede dar una mejor opcion para este tipo de situaciones..??

    igual he visto si no mal recuerdo en el registro de hotmail que son varios campos a llenar y un botoncito que le damos en continiar y nos manda a otra especie de formulario pero supongo que se esta trabajando sobre el mismo como podria hacer eso.. ??

    El siguiente es el codigo que estoy usando y por lo que me di cuenta el atributo ActiveTabIndex es el que se modifica para seleccionar el tab...


            <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" VerticalStripWidth="180px">
                <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel4">
                    <HeaderTemplate>
                        Datos Personales
                    </HeaderTemplate>
                    <ContentTemplate>
                        <table class="cont-tabs">
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblNumEmpleado" runat="server" Text="Número de Empleado:"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtNumEmpleado" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label13" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorNumEmpleado" runat="server" ControlToValidate="txtNumEmpleado"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblNombre" runat="server" Text="Nombre: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtNombre" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label14" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNombre"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblApellidos" runat="server" Text="Apellidos: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtApellidos" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label15" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorApellidos" runat="server" ControlToValidate="txtApellidos"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblPuesto" runat="server" Text="Puesto: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtPuesto" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label16" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorPuesto" runat="server" ControlToValidate="txtPuesto"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-size: 8pt;" class="alinea-der">
                                    <asp:Label ID="lblFechaInicio" runat="server" Text="Fecha de Inicio: "></asp:Label>
                                    <br />
                                    <asp:Label ID="lblFormatoFecha" runat="server" Text="(AAAA/MM/DD)"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtFechaInicio" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label17" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorFecha" runat="server" ControlToValidate="txtFechaInicio"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                    <br />
                                    <asp:RegularExpressionValidator ID="ValidadorFormatoFech" runat="server" ErrorMessage="Formato de Fecha invalido"
                                        ControlToValidate="txtFechaInicio" ValidationExpression="(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])"></asp:RegularExpressionValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblNumTel" runat="server" Text="Número de Teléfono: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtNumTel" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td>
                                </td>
                                <td>
                                    <asp:RegularExpressionValidator ID="ValidadorNumTel" runat="server" ErrorMessage="Inserta un valor numérico"
                                        ControlToValidate="txtNumTel" ValidationExpression="[0-9]+"></asp:RegularExpressionValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblNumCel" runat="server" Text="Número de Celular: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtNumCel" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td>
                                </td>
                                <td>
                                    <asp:RegularExpressionValidator ID="ValidadorNumCel" runat="server" ErrorMessage="Inserta un valor numérico"
                                        ControlToValidate="txtNumCel" ValidationExpression="[0-9]+"></asp:RegularExpressionValidator>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding: 10px 0px;" class="alinea-der">
                                    <asp:Label ID="lblEmail" runat="server" Text="E-mail: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtEmail" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label20" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorEmail" runat="server" ErrorMessage="Campo requerido"
                                        ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
                                    <br />
                                    <asp:RegularExpressionValidator ID="ValidadorStruct" runat="server" ErrorMessage="Correo Invalido"
                                        ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblRFC" runat="server" Text="RFC: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtRFC" runat="server" Width="160px" MaxLength="18"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label21" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorRFC" runat="server" ControlToValidate="txtRFC"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblCURP" runat="server" Text="CURP: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtCURP" runat="server" Width="160px" MaxLength="18"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label22" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorCURP" runat="server" ControlToValidate="txtCURP"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblEstudiosMax" runat="server" Text="Grado Máximo de Estudios: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtEstudiosMax" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label23" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="ValidadorEstudiosMax" runat="server" ControlToValidate="txtEstudiosMax"
                                        ErrorMessage="Campo requerido"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblCategoria" runat="server" Text="Categoria: "></asp:Label>
                                </td>
                                <td>
                                    <asp:DropDownList ID="ListCategoria" runat="server">
                                        <asp:ListItem>Administrativo</asp:ListItem>
                                        <asp:ListItem>Docente</asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label1" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td class="alinea-der">
                                    <asp:Label ID="lblLugar" runat="server" Text="Lugar: "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtLugar" runat="server" Width="160px"></asp:TextBox>
                                </td>
                                <td style="font-size: 14pt;">
                                    <asp:Label ID="Label3" runat="server" Text="*" ForeColor="Red"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td style="padding: 10px 0px;">
                                    <asp:Button ID="btnRegistrar" runat="server" Text="Registrar" ForeColor="#1D3644"
                                        OnClick="btnRegistrar_Click1"/>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
                    <HeaderTemplate>
                        Actividad Laboral</HeaderTemplate>
                    <ContentTemplate>
                        <table>
                            <tr>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2">
                    <HeaderTemplate>
                        Horario</HeaderTemplate>
                    <ContentTemplate>
                        Contenido Tab#2</ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel3">
                    <HeaderTemplate>
                        Permisos</HeaderTemplate>
                    <ContentTemplate>
                        Contenido Tab#3</ContentTemplate>
                </asp:TabPanel>
            </asp:TabContainer>
            <asp:DropShadowExtender ID="TabContainer1_DropShadowExtender" runat="server" Enabled="True"
                Radius="15" TargetControlID="TabContainer1" Opacity="0.1">
            </asp:DropShadowExtender>



    martes, 6 de noviembre de 2012 4:20

Respuestas

  • Hola,

    Lo puedes realizar de dos maneras:

    Al lado del cliente:

    Aquí utilizas algo de jquery, la función es algo cómo:

            <script>
                function SetActiveTab(tabControl, tabNumber)
                {
                    var ctrl = $find(tabControl);
                    ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
                }
            </script>

    Y el botón que llama la función:

             <input type="Button" id="tabChange" value="Set Tab" onclick="SetActiveTab('<%=TabContainer1.ClientID%>', 1)" />

    Al lado del servidor:

    Es mas sencilla la implementación, pero cada vez que necesites cambiar de tab, se desencadenaría un postback:

    TabContainer1.ActiveTabIndex = indice;

    Indice debe de ser un número entero para que te funcione.


    Un saludo,
    Cristian Pérez
    Blog



    martes, 6 de noviembre de 2012 14:47

Todas las respuestas

  • Hola,

    Lo puedes realizar de dos maneras:

    Al lado del cliente:

    Aquí utilizas algo de jquery, la función es algo cómo:

            <script>
                function SetActiveTab(tabControl, tabNumber)
                {
                    var ctrl = $find(tabControl);
                    ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
                }
            </script>

    Y el botón que llama la función:

             <input type="Button" id="tabChange" value="Set Tab" onclick="SetActiveTab('<%=TabContainer1.ClientID%>', 1)" />

    Al lado del servidor:

    Es mas sencilla la implementación, pero cada vez que necesites cambiar de tab, se desencadenaría un postback:

    TabContainer1.ActiveTabIndex = indice;

    Indice debe de ser un número entero para que te funcione.


    Un saludo,
    Cristian Pérez
    Blog



    martes, 6 de noviembre de 2012 14:47
  • Que tal gracias...

    logre implementarlo como tu dices del lado del servidor...

    pero me surgio una duda en este caso cual seria la diferencia..
    de cada una de las maneras de hacerlo ..

    que ventajas o desventajas nos da una sobre otra...??

    miércoles, 7 de noviembre de 2012 5:43
  • Hola,

    pero me surgio una duda en este caso cual seria la diferencia..

    Es muy sencillo, claro que para poder que entiendas correctamente debes de tener claro el concepto de postback

    Aquí mismo en el foro de MSDN preguntaron y respondieron especificamente sobre la definición de postback, revisa la dirección:

    Definicion de postback

    La diferencia es que la primera solución cambia el tab desde el lado del navegador; es decir, que no se realiza un postback, es un poco mas profesional, mejora la experiencia del usuario al navegar por tu página pero es mas engorrosa la implementación !


    Un saludo,
    Cristian Pérez
    Blog

    miércoles, 7 de noviembre de 2012 13:11
  • Intenté las dos formas que entregaste para hacerlo y ninguna me funciona :/

    por una lado la de parte del servidor, no realiza nada, lo implementé así y no realiza ninguna acción, no se que me podría faltar.

    y por el lado del cliente es lo mismo, no realiza ninguna acción siendo que lo implemente tal cual como aparece acá. :(

    Protected Sub btn_siguiente_Click(sender As Object, e As EventArgs) Handles btn_siguiente.Click
         
            TabContainer1.ActiveTabIndex = 1
        End Sub
    jueves, 11 de febrero de 2016 12:33