如何在手风琴中隐藏或淡出 ValidatorCalloutExtender

Question

我在手风琴的 3 个不同的手风琴窗格中使用 ValidatorCalloutExtender 来实现不同的 asp 控件。当我收到错误并单击另一个手风琴窗格标题时，错误消息将显示在浏览器的左上角。如何隐藏或淡出此错误消息？

Answer 1

我想你现在已经明白了这一点（4 个月？）。但我认为这是一个有趣的挑战，而且我之前也曾与验证者打过交道。

解决方案是挂钩 Accordion 控件的 SelectedIndexChanged 事件并禁用隐藏窗格的所有验证器。

首先，我们必须向手风琴控件添加一个钩子。这使用了 jQuery（我不知道还有什么其他方法可以实现这一点）。该变量包含手风琴函数的客户端 ID。

    var accordianId = 'MyAccordion';
    function pageLoad()  
    {  
        var accCtrl = $find(accordianId + '_AccordionExtender');
        accCtrl.add_selectedIndexChanged(onAccordionPaneChanged);    
    }

当然，这都是客户端（javascript）。

之后，我们需要创建 onAccordionPaneChanged 方法来循环遍历折叠窗格中的所有 DIV，并禁用与隐藏 DIV 关联的所有验证器（并启用新打开的 DIV 的所有验证器）：

    function onAccordionPaneChanged(sender, eventArgs)  
    {  
       var indexSelectedPane = sender.get_SelectedIndex();
       //   There are two divs per "pane":  1 Header, 1 Content
       //   That would make the DIV odd, but there's an additional
       //   hidden element at the front, so it's the Even item.
       var indexContentDiv = (indexSelectedPane * 2) + 2;
       var accordianControl = document.getElementById(accordianId);
       var i, boolEnable;

       for(i = 0; i < accordianControl.children.length; i++)
       {
            //Odd number, this must be a Content section
            boolEnable = false;
            if (i == indexContentDiv)
            {
                boolEnable = true;
            }
            EnableDisableValidators(accordianControl.children[i], boolEnable);
       }
   }

请注意，在上面，它提到每个窗格有两个 DIV。所发生的情况是，手风琴控件为每个窗格创建两个 DIV：一个用于页眉，另一个用于页脚。如果循环遍历所有子级，则每隔一个 DIV 都是包含内容的 DIV。因此，为了仅禁用内容部分中的所有验证器，上面我检查了 (i%2 == 1)，它表示这是一个“奇数”div，即内容 div。

最后，EnableDisableValidators 函数获取给定的 DIV 并检查所有页面的验证器以查看它们是否是该 DIV 内的控件。如果它们位于此 DIV 内，它将根据传入的值（取决于此 DIV 是否是选定的 DIV）来启用或禁用验证器。

不幸的是，由 Accordion 控件生成的 DIV 没有 ID，因此您必须专门搜索 div 中的所有控件。

   function EnableDisableValidators(divParent, setEnabled)
   {
        var childValidator;
        var j;
        var k;

        if (divParent.children == null || divParent.children.length == 0)
        {
            return;
        }
        //  Check all the validators to see if they're one of the children
        for (j = 0; j < Page_Validators.length; j++)
        {
            // Check all the children of the DIV for the given validator
            for (k = 0; k < divParent.children.length; k++)
            {
                if (FindControlRecursive(divParent, Page_Validators[j].id) != null)
                {
                    ValidatorEnable(Page_Validators[j], setEnabled);
                }
            }
        }
   }

另一个缺点是我们必须找到 DIV 中的所有子控件，为此我们必须查找该 DIV 中的所有子控件。必须使用递归。因此，这里有一个“简单”函数（如上所述）：

   function FindControlRecursive(parentNode, childID)
   {
        var l;
        var retChild;

        for (l = 0; l < parentNode.children.length; l++)
        {
            if(parentNode.children[l].id != null && 
                parentNode.children[l].id == childID)
            {
                return parentNode.children[l];
            }
            else
            {
                retChild = FindControlRecursive(parentNode.children[l], childID);
                if (retChild != null)
                {
                    return retChild;
                }
            }
        }
        return null;
   }

这种方法存在一些问题。首先，当您提交表单时，只有当前窗格中可见的验证器才会发布错误。所有隐藏的验证器都不会显示。要解决此问题，您可以添加提交按钮的“onclick”函数，该函数将循环遍历所有 Page_Validators 并在提交之前启用它们。您可能（此时）还必须检查验证器。但这是一个完全不同的问题。 ;)

另一个问题是，当您单击扩展器所附加的控件时，扩展器似乎会自行显示。当启用验证器功能以显示哪些字段是必需的时，您可以使用相同的功能来调用验证器功能。 （只是一个可能的解决方案。）但同样，这是一个完全独立的问题！

希望这有帮助。