代码之家 › 专栏 › 技术社区 › Ash Machine

使用javascript和更新面板的TabContainer分页

postback updatepanel javascript asp.net

Ash Machine · 技术社区 · 15 年前

我正在尝试创建一个Ajax工具箱TabContainer,它在每个选项卡上都有上一个和下一个链接。我已经向每个选项卡容器添加了更新面板,以尝试在不回发的情况下从一个选项卡转到下一个选项卡。下面的代码显示,当我单击选项卡标题(好)时,页面重新加载不会被激发,但当我单击上一页和下一页的ImageButtons(坏)时,它会被激发。(请参见页面加载功能)。

注意,每个ImageButton都有一个ID,updateMode是有条件的,childrenastrigers是假的。我的site.master有一个ajaxscriptmanager。

是否有任何直接的方法通过图像按钮在标签页中翻页而不每次都回发?谢谢。

<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>

1 回复 | 直到 15 年前

alejandrobog 15 年前

只需在调用客户机函数后添加一个返回false,以避免回发。我只是试了一下,结果成功了

<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>