AJAX ToolKit TabContainer：我可以捕获“活动的标签面板更改”事件

如何解决AJAX ToolKit TabContainer：我可以捕获“活动的标签面板更改”事件

| 我有一个带有几个TabPanels的AJAX ToolKitTabContainer控件。我想验证当前活动ѭ2的内容，以防止用户在数据无效的情况下使用其他内容。

解决方法

如果需要在TabPanelChangingEvent服务器端执行操作，则需要通过更改ajaxcontroltoolkit源代码来执行此操作。好消息：您可以轻松获得它 ,在这里，一个新的解决方案几乎可以满足您的需求： OnClientActiveTabChanged赛事开始 tabcontainerNew Tab索引保存在Hiddenfield中 tabindex将重置为旧值（因此现在不会更改）表单使用隐藏按钮触发asyncpostback。在隐藏按钮的ѭ7中，检索OldTabIndex和NewTabIndex。在Click事件结束时，tabcontainer的ѭ6被切换为新值。因此，在更改TabContainer选项卡之前，将执行隐藏按钮的Click事件。 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个选项卡，如果第二个选项卡是hide（服务器端的visible= false），则单击第三个选项卡，我们将得到ѭ13not = 1而不是2（服务器端代码上的预期活动索引为2）。解：注册选项卡容器的客户端事件：

OnClientActiveTabChanged=\"Tab_SelectionChanged\"

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

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

在需要活动选项卡索引的位置后面的代码中使用隐藏的变量（hdntabIndex）。 ,您应该使用JavaScript来完成。在这里，我做了一个例子，诀窍是使用ValidationGroup并将Old tab Index保存在called3 function调用的函数末尾

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

,我知道回答这个问题可能来晚了，但是希望我能为那些像TabTabnels一样锅底锅的人提供一些帮助。将OnClientActiveTabChanged = \“ showMap \”添加到ajaxToolkit：TabContainer。我的函数显然称为showMap（必须隐藏并显示Google街道地图，因为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。将溢出设置为隐藏后，它看起来好像地图在页面上并且仅在该容器中，但不是。希望这会有所帮助！祝好运。

AJAX ToolKit TabContainer：我可以捕获“活动的标签面板更改”事件

如何解决AJAX ToolKit TabContainer：我可以捕获“活动的标签面板更改”事件

解决方法

相关推荐