Home/ Questions/Q 798451
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:58:21+00:00

I am trying to create a Ajax Toolkit TabContainer which has Previous and Next

  • 0

I am trying to create a Ajax Toolkit TabContainer which has Previous and Next links on each tab. I have added update panels to each tab container in an attempt to get from one tab to the next without postback. With the code show below, a page reload is NOT being fired as I click tab headers (GOOD), but it IS being fired when I click the imagebuttons for previous and next(BAD). (See the pageLoad function).

Note that each imagebutton has an ID, UpdateMode is Conditional, and ChildrenAsTrigers is false. My site.master has an ajaxscriptmanager.

Is there any straightforwared way to page through tabs via imagebuttons without postback each time? Thanks.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        function MoveTab(num) {
            var container = $find('<%=TabContainer1.ClientID %>');
            container.set_activeTabIndex(num);
        }

        function pageLoad(sender, args) {
            alert("pageload fired");
        }
    </script>

    <ajaxToolkit:TabContainer  ID="TabContainer1"  runat="server"  ActiveTabIndex="0" Width="940">     
        <ajaxToolkit:TabPanel  ID="TabPanelIntro"  runat="server"  HeaderText="Introduction">
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanel0" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" >
                    <ContentTemplate>
                        <asp:Label id="Label1" runat="server" Text="Tab 0"/>
                        <asp:ImageButton ID="Next0" runat="server"  ImageUrl="~/_img/next.png"  ToolTip="Next" OnClientClick="MoveTab(1);" />
                        <br />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ContentTemplate> 
        </ajaxToolkit:TabPanel>

     <ajaxToolkit:TabPanel  ID="TabPanelProgram"  runat="server" HeaderText="Program">
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" >
                    <ContentTemplate>
                        <asp:Label id="Label2" runat="server" Text="Tab 1" />
                        <asp:ImageButton ID="Next1" runat="server"  ImageUrl="~/_img/next.png"  ToolTip="Next" OnClientClick="MoveTab(2);" />
                        <asp:ImageButton ID="Prev1" runat="server"  ImageUrl="~/_img/prev.png"  ToolTip="Previous" OnClientClick="MoveTab(0);" CssClass="formpager" />                        
                        <br />
                    </ContentTemplate>
                </asp:UpdatePanel>  
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel  ID="TabPanelSubmit"  runat="server"  HeaderText="Final">
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                    <ContentTemplate>
                        <asp:Label id="Label13" runat="server" Text="Tab 2" CssClass="allcaps" />                      
                        <asp:ImageButton ID="Prev2" runat="server"  ImageUrl="~/_img/prev.png"  ToolTip="Previous" OnClientClick="MoveTab(1);" CssClass="formpager" />                                  
                    </ContentTemplate>
                 </asp:UpdatePanel>                
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
</asp:Content>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just add a return false after you call your client function to avoid the postback. I just try it and it worked

    <act:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="940">
<act:TabPanel ID="TabPanelIntro" runat="server" HeaderText="Introduction">
  <ContentTemplate>
    <asp:UpdatePanel ID="UpdatePanel0" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
      <ContentTemplate>
        <asp:Label ID="Label3" runat="server" Text="Tab 0" />
        <asp:ImageButton ID="Next0" runat="server" ImageUrl="~/_img/next.png" ToolTip="Next"
          OnClientClick="MoveTab(1);return false;" />
        <br />
      </ContentTemplate>
    </asp:UpdatePanel>
  </ContentTemplate>
</act:TabPanel>
<act:TabPanel ID="TabPanelProgram" runat="server" HeaderText="Program">
  <ContentTemplate>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
      <ContentTemplate>
        <asp:Label ID="Label4" runat="server" Text="Tab 1" />
        <asp:ImageButton ID="Next1" runat="server" ImageUrl="~/_img/next.png" ToolTip="Next"
          OnClientClick="MoveTab(2); return false;" />
        <asp:ImageButton ID="Prev1" runat="server" ImageUrl="~/_img/prev.png" ToolTip="Previous"
          OnClientClick="MoveTab(0);return false;" CssClass="formpager" />
        <br />
      </ContentTemplate>
    </asp:UpdatePanel>
  </ContentTemplate>
</act:TabPanel>
<act:TabPanel ID="TabPanelSubmit" runat="server" HeaderText="Final">
  <ContentTemplate>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
      <ContentTemplate>
        <asp:Label ID="Label13" runat="server" Text="Tab 2" CssClass="allcaps" />
        <asp:ImageButton ID="Prev2" runat="server" ImageUrl="~/_img/prev.png" ToolTip="Previous"
          OnClientClick="MoveTab(1);return false;" CssClass="formpager" />
      </ContentTemplate>
    </asp:UpdatePanel>
  </ContentTemplate>
</act:TabPanel>

    • 0