AJAX ToolKit TabContainer：我可以捕獲“活動選項卡面板更改”事件

Question

我有一個帶有幾個TabPanels的AJAX ToolKit TabContainer控件。 我想驗證當前活動TabPanel的內容，以防止用戶在數據無效的情況下處理其他活動。

Answer 1

如果需要執行TabPanelChangingEvent SERVER端，則需要通過更改ajaxcontroltoolkit源代碼來執行此操作。

好消息： 你可以輕松搞定

Answer 2

這里有一個新的解決方案幾乎可以滿足您的需求：

1. 引發OnClientActiveTabChanged事件
2. tabcontainer New Tab索引保存在Hiddenfield
3. tabindex被重置為它的舊值（所以它現在不會改變）
4. 表單使用隱藏按鈕觸發asyncpostback。
5. 在隱藏按鈕的Click event ，將檢索OldTabIndex和NewTabIndex。
6. 在Click事件結束時，tabcontainer的tabindex將切換為新值。

因此，隱藏按鈕的Click事件在TabContainer選項卡更改之前執行。

ASPX：

<asp:Button  runat="server" ID="hiddenTargetControlForTabContainer" style="display:none" />
<asp:UpdatePanel ID="TabContainerUpdatePanel" runat="server">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="hiddenTargetControlForTabContainer" />
</Triggers>
<ContentTemplate>
      <asp:HiddenField ID="TabContainerActiveTab" runat="server" Value="0" />   
      <AjaxControlToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
                                       OnClientActiveTabChanged="OrderTabContainerClientActiveTabChanged"   >

            <AjaxControlToolkit:TabPanel runat="server" ID="TabPanel1" 
                                         HeaderText="TabPanel1"
                                          >
                <ContentTemplate>
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>


                </ContentTemplate>
            </AjaxControlToolkit:TabPanel>
            <AjaxControlToolkit:TabPanel  runat="server" ID="TabPanel2" 
                                          HeaderText="TabPanel2" >
                <ContentTemplate>

                                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

                </ContentTemplate>
            </AjaxControlToolkit:TabPanel>
        </AjaxControlToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
    var TabContainerActiveTabControlID = '<%= TabContainerActiveTab.ClientID %>';
    var hiddenTargetControlForTabContainerControlID = '<%= hiddenTargetControlForTabContainer.uniqueID %>';

    function OrderTabContainerClientActiveTabChanged(sender, args) {
        var TabContainerActiveTabControl = $get(TabContainerActiveTabControlID);

        var OldtabIndex = parseInt(TabContainerActiveTabControl.value);
        var NewtabIndex = sender.get_activeTabIndex();

        if (!(OldtabIndex == NewtabIndex)) {
            sender.set_activeTabIndex(OldtabIndex);
            TabContainerActiveTabControl.value = NewtabIndex;

            __doPostBack(hiddenTargetControlForTabContainerControlID, '');

        }


    }

代碼背后：

Protected Sub hiddenTargetControlForTabContainer_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles hiddenTargetControlForTabContainer.Click
    Dim oldActiveTabIndex = TabContainer1.ActiveTabIndex
    Dim newActiveTabIndex As Integer = Convert.ToInt32(TabContainerActiveTab.Value)

    'your stuff here

    TabContainer1.ActiveTabIndex = newActiveTabIndex
End Sub

Answer 3

問題：Ajax TabContainer ActiveTabChanged事件顯示不正確的ActiveTabIndex。 例如。 TabContainer包含3個選項卡，如果第二個選項卡隱藏（服務器端visible = false），則單擊第三個選項卡，我們得到ActiveTabChanged = 1而不是2（服務器端代碼的預期活動索引為2）。

解：

1. 注冊選項卡容器的clientside事件：

    OnClientActiveTabChanged="Tab_SelectionChanged" 

2. 然后定義javascript函數來處理上面的事件，該事件將內部存儲選項卡索引存儲在隱藏變量中。

    function Tab_SelectionChanged(sender,e) { document.getElementById('<%=hdntabIndex.ClientID %>').value = sender.get_activeTabIndex(); } 

3. 在需要活動選項卡索引的位置后面的代碼中使用隱藏變量（ hdntabIndex ）。

Answer 4

我知道我回答這個問題的時間可能已經很晚了，但希望我可以為像PotPanels這樣的人提供幫助。

將OnClientActiveTabChanged =“showMap”添加到ajaxToolkit：TabContainer 。 我的功能顯然叫做showMap（不得不隱藏並顯示谷歌街道地圖，因為TabContainer將它全部搞砸了。所以我不得不將Google街道地圖移到容器外面，然后'假'把它放回容器中）。

<ajaxToolkit:TabContainer runat="server" ID="tabs" OnClientActiveTabChanged="showMap">
   <ajaxToolkit:TabPanel runat="server" ID="pnlZones" HeaderText="Delivery Zones">
       <ContentTemplate>
           ... 
       </ContentTemplate>
   </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

然后創建javascript：

<script type="text/javascript">
    function showMap() {
        var tabID = $('.ajax__tab_active').attr('id');
        if (tabID.indexOf('pnlZone') > 0) {
            $('#mapHider').css('height', '600px');
        }
        else {
            $('#mapHider').css('height', '0');
        }
    }
</script>

然后我們可以通過類.ajax__tab active找到活動選項卡，這是TabContainer將活動類設置為的選項。 使用jQuery獲取ID（ .attr（'id'） ）...瞧，我們現在正在使用哪個選項卡。

為此，我將類的高度從0更改為600px。 將溢出設置為隱藏，它使得它看起來像是在頁面上並且只在該容器中，但事實並非如此。

希望，這有助於!! 祝好運。

Answer 5

你應該使用JavaScript。
這里是我做的一個例子，訣竅是使用ValidationGroup並在OnClientActiveTabChanged調用的函數末尾保存Old tab Index

   <AjaxControlToolkit:TabContainer ID="TabContainer1" runat="server" Height="138px"  
                                   Width="402px" ActiveTabIndex="0"
                                   OnClientActiveTabChanged="ValidateTab"   >

        <AjaxControlToolkit:TabPanel runat="server" ID="TabPanel1" 
                                     HeaderText="TabPanel1"
                                      >
            <ContentTemplate>


                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                                        ErrorMessage="RequiredFieldValidator"
                                                        ControlToValidate="TextBox1"
                                                        ValidationGroup="TabPanel1"
                                                        />

            </ContentTemplate>
        </AjaxControlToolkit:TabPanel>
        <AjaxControlToolkit:TabPanel  runat="server" ID="TabPanel2" 
                                      HeaderText="TabPanel2" >
            <ContentTemplate>

                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                                                        ErrorMessage="RequiredFieldValidator"
                                                        ControlToValidate="TextBox2"
                                                        ValidationGroup="TabPanel2"
                                                         />

            </ContentTemplate>
        </AjaxControlToolkit:TabPanel>
    </AjaxControlToolkit:TabContainer>
    <script type="text/javascript">
        var OldtabIndex = 0;


         function ValidateTab(sender, args) {

            if (OldtabIndex == 0) {

                if  (!Page_ClientValidate('TabPanel1')) {
                    sender.set_activeTabIndex(OldtabIndex);
                }
            }
            else if (OldtabIndex == 1) {

                if  (!Page_ClientValidate('TabPanel2')) {
                    sender.set_activeTabIndex(OldtabIndex);
                }
            }

            OldtabIndex = sender.get_activeTabIndex();
         }

   </Script>