使用javascript隐藏显示asp.net Validator控件

  本文介绍如何使用javascript显示或者隐藏ASP.NET AJAX’ (AJAXControlToolkit) ValidatorCalloutExtender控件。  下面为示例代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AJAXControls" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
</head>
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <!--ASP.NET Drop down control--> 
        <asp:DropDownList ID="status" runat="server" > 
            <asp:ListItem Selected="True" Text="Select" Value="0" />
            <asp:ListItem Text="One" /> 
            <asp:ListItem Text="Two" /> 
            <asp:ListItem Text="Three" /> 
        </asp:DropDownList> 
        <!--ASP.NET Required Field Validator to validate the drop down.--> 
        <asp:RequiredFieldValidator ID="statusValidator" runat="server" ErrorMessage="Please choose a value other than 'Select'" 
            ControlToValidate="status" InitialValue="0" Visible="true">
        </asp:RequiredFieldValidator> 
    <!--Validator callout control--> 
        <AJAXControls:ValidatorCalloutExtender ID="statusValidator_ValidatorCalloutExtender" 
            runat="server" TargetControlID="statusValidator"> 
        </AJAXControls:ValidatorCalloutExtender> 
        <asp:Button ID="submit" Text="Submit" OnClientClick="javascript:return ValidatePage();" 
            runat="server" /> 
    </div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    </form> 
</body> 
</html>

  示例代码中包含一个dropdown控件,并且和required field validator 控件关联,相关验证标注控件在下面。当点击提交按钮,如果发生验证错误,标注控件信息将会显示出来,如下图所示
  • 显示在验证标注控件内的信息
Message in a validator callout control

  验证标注控件错误信息是自动弹出的。你可以通过javascript调用此控件对应的一些脚本来实现隐藏了显示验证控件信息。示例如下
<script language="javascript" type="text/javascript"> 
function ValidatePage() 
{         
    //点击提交按钮触发的表单验证事件
    if (Page_ClientValidate())        
    { 
        return true; 
    } 
    else 
    {        
        hideValidatorCallout(); 
        return false; 
    } 
} 
//隐藏AjaxControlToolkit ValidatorCalloutExtender控件的方法
function hideValidatorCallout() 
{ 
    //下面的代码隐藏显示(激活)的AjaxControlToolkit ValidatorCalloutExtender控件
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide(); 
    setTimeout(showValidatorCallout, 3000);    
}
function showValidatorCallout() 
{ 
    //通过$find方法获取AjaxControlToolkit ValidatorCalloutExtender控件
    AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout = $find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>'); 
    //显示AjaxControlToolkit ValidatorCalloutExtender控件
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
} 
</script>


  上面代码中使用了: AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout

  _currentCallout 属性指向ValidatorCalloutExtender (VCE) 控件的引用。当验证不通过,并且存在验证标注和某个验证控件相管理,_currentCallout存储的为这个VCE的引用对象。如果当前页面存在多个VCE控件,_currentCallout指向和第一个发生错误的验证控件相关联的VCE控件。要隐藏验证标准控件,可以调用此对象的方法hide,代码如下

AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();
                             


  任何时候 _currentCallout仅和一个 VCE关联,防治同时显示多个VCE控件,导致页面杂乱,既当多个验证发生错误,会在多个地方显示验证标注。为了防止页面杂乱,每次只显示一个VCE控件。

  同样的,要显示验证标准控件,可以调用_currentCallout 对象的方法show

//通过$find得到AjaxControlToolkit ValidatorCalloutExtender控件
    AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout = $find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>'); 
    //显示AjaxControlToolkit ValidatorCalloutExtender控件
    AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
                                    


  但是如果直接那样使用上面的代码,将会抛出异常

Microsoft JScript runtime error: 'this._popupBehavior' is null or not an object


  原因是还没有调用ValidatorEnable 或者 ValidatorValidate函数,因为这2个函数会设置一些需要的配置,如 _popupBehavior属性,使验证控件能正常运作。 VCE控件不能直接显示,因为它是一个扩展的控件,扩展于验证控件(validation control)。但验证控件没有通过时与之关联的VCE才会自动显示,所有想直接显示VCE控件,首先需要调用ValidatorEnable 或者 ValidatorValidate 方法。

  上面的代码演示了如何显示和隐藏验证标注控件,其中$find没有提到,具体可以参考:asp.net客户端$get和$find方法区别查看原e文点击这里,原e文在blogspot.com,挨GFW奸过的,需要翻墙,参考这个:翻墙工具下载地址。)

与验证标注控件(Validator callout controls,下面简称VCE)相关的比较重要的方法和属性

方法

  1. _getErrorMessage():返回错误信息
  2. get_closeImageUrl():返回右上角的关闭VCE图片的url地址,默认为X标记。
  3. get_isOpen():返回一个布尔值指示VCE显示或者隐藏
  4. get_warningIconImageUrl():返回警告图标地址, 默认图片为三角形里面有一个感叹号。
  5. get_width():返回VCE宽度
  6. hide():隐藏VCE
  7. set_closeImageUrl(imageUrl):设置VCE关闭图片,替换默认的X标记
  8. set_warningIconImageUrl(imageUrl):设置警告图片地址替换默认的
  9. set_width(int) :设置VCE宽度
  10. show():显示VCE

属性

  1. _closeImageUrl:设置/获取关闭VCE的图片地址
  2. _warningIconImageUrl:设置/获取警告图片地址
  3. _width:设置/获取VCE宽度
  4. _popupBehavior: VCE行为属性,详细参考下面
  5. _errorMessageCell:设置/获VCE的错误信息,详细参考下面


ValidatorCallout._popupBehavior方法

  与_popupBehavior属性相关方法(仅能通过这个属性调用),示例代码如下

//通过$find获取VCE控件
var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>'); 
//获取_popupBehavior属性后调用方法
var popUpBehavior = valCallout._popupBehavior; 
popUpBehavior.set_x(10); 
popUpBehavior.set_y(20); 
//或者直接通过VCE的_popupBehavior属性来调用
valCallout._popupBehavior.set_x(20); 
valCallout._popupBehavior.set_y(30);
                              
  1. get_x():返回VCE的x坐标(css对应的left属性)
  2. get_y():返回VCE的y坐标(css对应的top属性)
  3. get_visible():只是VCE是否可见
  4. set_x(x_coordinate):设置VCE的x坐标,参数为数字
  5. set_y(y_coordinate):设置VCE的y坐标,参数为数字


ValidatorCallout._errorMessageCell property属性

  _errorMessageCell 属性为一个TD (cell)控件,相关的属性和方法与DOM对象的TD一致。下面的示例代码使用此属性更改错误信息。

//通过$find获取VCE控件
var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>'); 
//获得td单元格
var messageCell = valCallout._errorMessageCell; 
//修改单元格显示的错误信息
messageCell.innerHTML = "Changed:)";
                                    

 
 
 

原创文章,转载请注明出处:使用javascript隐藏显示asp.net Validator控件

评论(0)Web开发网
阅读(176)喜欢(0)不喜欢(0)Asp.Net/C#