Question

我正在尝试创建一个Ajax Toolkit TabContainer，它在每个选项卡上都有Previous和Next链接。我已经为每个选项卡容器添加了更新面板，试图从一个选项卡转到下一个选项卡而不进行回发。使用下面的代码显示，当我单击标签标题（GOOD）时，不会触发页面重新加载，但是当我单击上一个和下一个（BAD）的图像按钮时它被触发。（参见pageLoad功能）。

请注意，每个imagebutton都有一个ID，UpdateMode是Conditional，而ChildrenAsTrigers是false。我的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>

Answer 1

在调用客户端函数后，只需添加一个返回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>

TabContainer使用javascript和更新面板进行分页

1 个答案: