Пейджинг TabContainer с использованием панелей javascript и update - PullRequest
Новая
       11

Пейджинг TabContainer с использованием панелей javascript и update

1 голос
/ 19 мая 2010

Я пытаюсь создать Ajax Toolkit TabContainer, который имеет ссылки «Предыдущая» и «Следующая» на каждой вкладке. Я добавил панели обновления в каждый контейнер вкладок, пытаясь перейти от одной вкладки к другой без обратной передачи. С кодом, показанным ниже, перезагрузка страницы НЕ запускается, когда я нажимаю заголовки вкладок (ХОРОШО), но она запускается, когда я нажимаю кнопки изображения для предыдущего и следующего (ПЛОХО). (См. Функцию pageLoad).

Обратите внимание, что каждая кнопка изображения имеет идентификатор, 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>

1 Ответ

0 голосов
/ 19 мая 2010

Просто добавьте 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>

...