Como utilizar el ValidatorCallout de Ajax Control Toolkit

Hoy veremos como utilizar un extender de los controles Validation de asp.net, este control nos ayudara a mostrar una interfaz mas amigable para el usuario, como se muestra en la siguiente imagen:

Como podrán observar en la imagen el controles se muestran marcados en rojo y si alguno de ellos esta en foco se muestra un mensaje en forma de globo, este puede contener una imagen y texto con el error de validación.
Ahora veamos como utilizarlo:

En el aspx

<asp:TextBox ID="TxtUsuario" runat="server" Width="160px" MaxLength="20" CssClass="TextBox"></asp:TextBox>

 <asp:RequiredFieldValidator ID="rfvUsuario" runat="server" ErrorMessage="Nombre de usuario requerido"

            ControlToValidate="TxtUsuario" SetFocusOnError="true" Display="None"></asp:RequiredFieldValidator>

<ajax:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="rfvUsuario"

           HighlightCssClass="validatorCalloutHighlight" CssClass="CustomValidatorCalloutStyle">

</ajax:ValidatorCalloutExtender>

Los estilos que utiliza:

.CustomValidatorCalloutStyle div, 

.CustomValidatorCalloutStyle td { 

    border:solid 1px Gray; background-color: #F7F3F3; 

}

.validatorCalloutHighlight

{

border:solid 1px red;

        background-color: #FFF4F4;

}

Como verán es algo sencillo de utilizar, lo importante aqui es en lazar el control al extender con la propiedad TargetControlID.

Otra cosa importante es que agreguen la referencia del control a la pagina o al Web.config

<pages>

      <controls>

        <add tagPrefix="ajax" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/>

        <add tagPrefix="recaptcha" namespace="Recaptcha" assembly="Recaptcha"/>

      </controls>

</pages>

Espero que esto les sea de utilidad y pronto pondre mas ejemplos sobre los controles de Ajax Control Toolkit.

Visiten:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/

Lo que se puede imaginar ... se puede programar