Question

我有几个TabContainer的 AJAX ToolKit TabPanels控件。我想验证当前活动TabPanel的内容，以防止用户在数据无效的情况下处理其他活动。

Answer 1

如果需要执行TabPanel更改事件服务器端，则需要通过更改ajax控件工具包源代码来执行此操作。

好消息：you could easily get it

Answer 2

这是一个几乎可以满足您需求的新解决方案：

OnClientActiveTabChanged事件被提出
tabcontainer新标签索引保存在Hiddenfield
tabindex重置为旧值（因此现在不会改变）
表单使用隐藏按钮触发asyncpostback。
在隐藏按钮Click event内，检索OldTabIndex和NewTabIndex。
在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）在服务器端代码）。

解决方案：

注册选项卡容器的客户端事件：

OnClientActiveTabChanged="Tab_SelectionChanged"

然后定义javascript函数来处理上面的事件，该事件将内部存储选项卡索引隐藏在一个隐藏变量中。

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

在您需要活动标签索引的位置后面的代码中使用隐藏变量（hdntabIndex）。

Answer 4

你应该使用JavaScript 这是我做的一个例子，诀窍是使用ValidationGroup并在OnClientActiveTabChanged

调用的函数末尾保存旧选项卡索引

   <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>

Answer 5

我知道我回答这个问题的时间可能已经很晚了，但希望我可以为像PotPanels这样的人提供一些帮助。

将 OnClientActiveTabChanged =＆＃34; showMap＆＃34; 添加到 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（＆＃39; id＆＃39;））...瞧，我们现在正在使用哪个标签。

为此，我将类的高度从0更改为600px。将溢出设置为隐藏，它使得它看起来像地图在页面上并且只在该容器中，但它不是。

希望这有助于!!祝你好运。

AJAX ToolKit TabContainer：我可以捕获“活动选项卡面板更改”事件

5 个答案: