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>