AJAX工具箱TabContainer:我可以捕获“活动选项卡面板变化”吗?事件

本文关键字：变化 事件 选项 活动 TabContainer 工具箱 我可以 AJAX | 更新日期: 2023-09-27 17:50:15

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

AJAX工具箱TabContainer:我可以捕获“活动选项卡面板变化”吗?事件

如果您需要做TabPanelChangingEvent服务器端，您将需要通过修改ajaxcontroltoolkit源代码来做到这一点。

好消息:你可以很容易地得到它

这里有一个新的解决方案，几乎可以满足您的需求:

  1. 引发OnClientActiveTabChanged事件
  2. tabcontainer新标签索引保存在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

问题:Ajax TabContainer的ActiveTabChanged事件显示不正确的ActiveTabIndex.如。TabContainer包含3个选项卡，如果第二个选项卡是隐藏的(服务器端visible = false)，那么点击第三个选项卡，我们得到ActiveTabChanged = 1而不是2(服务器端代码的预期活动索引是2)。

解决方案:

  1. 注册标签容器的客户端事件:

    OnClientActiveTabChanged="Tab_SelectionChanged"

  2. 然后定义javascript函数来处理上述事件，该函数将在内部将标签索引存储在一个隐藏变量中。

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

  3. 在需要活动选项卡索引的代码后面使用隐藏变量(hdntabIndex)。

你应该使用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>

我知道我可能回答这个问题有点晚了，但希望我可以为那些像我一样对tabpanel着迷的人提供一些帮助。

将OnClientActiveTabChanged="showMap"添加到ajaxToolkit:TabContainer。我的函数显然被称为showMap(必须隐藏和显示Google街道地图)，因为TabContainer把它搞砸了。所以我不得不把谷歌街道地图移到容器外面，然后"假"地把它放回容器里。

<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将设置活动类的内容。障碍的ID ( .attr (ID) )与jQuery…瞧，我们现在在哪个标签上。

我将这个类的高度从0改为600px。如果将溢出设置为隐藏，则会使映射看起来像是在页面上并且仅在该容器中，但实际上并非如此。

希望这有帮助!!好运。

相关文章：