[英]TabContainer paging using javascript and update panels
我試圖創建一個Ajax Toolkit TabContainer,在每個選項卡上具有“上一個”和“下一個”鏈接。 我已將更新面板添加到每個選項卡容器中,以嘗試從一個選項卡進入下一個選項卡而無需回發。 使用下面顯示的代碼,單擊標簽頁眉(GOOD)時不會觸發頁面重新加載,但是當單擊上一個和下一個(BAD)的圖像按鈕時,會觸發頁面重新加載。 (請參閱pageLoad函數)。
請注意,每個圖像按鈕都有一個ID,UpdateMode是有條件的,而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>
只需在調用客戶端函數后添加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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.