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

PageMethods en Asp.Net AJAX

Hola, hoy veremos como utilizar ajax de una manera muy sencilla, esto se logra atreves de los PageMethods, estos se comunicaran con un WebMethod que este en nuestro código de la pagina (del lado del servidor) .

Lo primero que aremos es definir nuestro WebMethod, esto significa que a nuestro método lo decoraremos con el atributo [WebMethod], ejemplo:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplication2

{

    public partial class _Default : System.Web.UI.Page

    {

        [WebMethod]

        public static List<Persona> SendForm(string name)

        {

            ////return name + " - Fue al servidor";

            List<Persona> p = new List<Persona>();

            p.Add(new Persona("Nombre 1", 26));

            p.Add(new Persona("Nombre 2", 26));

            return p;

        }

        protected void Page_Load(object sender, EventArgs e)

        {

        }

    }

    public class Persona

    {

        public Persona()

        {

        }

        public Persona(string nombre, int edad)

        {

            Nombre = nombre;

            Edad = edad;

        }

        public string Nombre

        {

            get; set;

        }

        public int Edad

        {

            get; set;

        }

    }

}

Cabe aclarar que un un PageMethod podrá retornar casi cualquier tipo de datos que regrese el WebMethod, en este ejemplo retorna una lista de objetos de tipo Persona.

Ahora del lado del cliente definimos lo siguiente:

      1. Habilitar los PageMethods

Lo que hay que hacer para permitir PageMethods es prender una propiedad de nuestro ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

                        <Scripts>

                                  <asp:ScriptReference Path="~/Scripts/Default.js" />

                       </Scripts>

           </asp:ScriptManager>

           Tambien aprovechamos para hacer referencia a nuestro js que contiene las funciones que utilizaremos.

      

      2. Crear nuestro script (Default.js)

             Esta es la función que llamaremos desde el click de un botón (el nombre es indistinto), el objeto PageMethods contiene los webMethods que tengamos en nuestro codigo de la pagina (en el .cs)

function SendForm() {

    var name = $get(textBox1).value;

    PageMethods.SendForm(name, OnSucceeded, OnFailed);

}

Las funciones de OnSucceeded y OnFailed deben ser incluidas como parámetros en la ejecución de nuestro PageMethod PageMethods.SendForm(name, OnSucceeded, OnFailed), y el primer parámetro es parte de nuestro WebMethod.

Esta function cacha el resultado de nuestro webMethod:

function OnSucceeded(lista) {

    $get(lblPrueba).innerHTML = string;

}

Esta function es utilizada para cachar un possible error:

function OnFailed(error) {

    alert(error.get_message());

}

      3.  En el aspx:

     <p>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="SendForm();" />

            </ContentTemplate>

        </asp:UpdatePanel>

        <asp:Label ID="LblPrueba" runat="server" Text="Label"></asp:Label>

    </p>

    <script type="text/javascript">

        var lblPrueba = '<%=LblPrueba.ClientID %>';

        var textBox1 = '<%=TextBox1.ClientID %>';

    </script>

Como ven esta manera de utilizar ajax es muy facil y te olvidas de mandar a llamar un pagina y en el load procesar la petición... entre otras cosas, de esta forma el codigo queda en la misma pagina y se manda a llamar de una manera transparente.

Espero que esto les sea de utilidad.

Lo que se puede imaginar ... se puede programar