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

【问题标题】：TabContainer paging using javascript and update panels使用 javascript 和更新面板的 TabContainer 分页
【发布时间】：2011-02-21 12:09:48
【问题描述】：

我正在尝试创建一个 Ajax Toolkit TabContainer，它在每个选项卡上都有上一个和下一个链接。我已将更新面板添加到每个选项卡容器中，以尝试在不回发的情况下从一个选项卡转到下一个选项卡。使用下面显示的代码，当我单击选项卡标题（好）时不会触发页面重新加载，但是当我单击上一个和下一个（坏）的图像按钮时会触发它。（参见 pageLoad 函数）。

请注意，每个图像按钮都有一个 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>

【问题讨论】：

标签： asp.net javascript updatepanel postback

【解决方案1】：

只需在调用客户端函数后添加 return 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>

【讨论】：