Resumé

MaxCharsExtender Animato con AjaxControlToolkit

Cristian Merighi () 5,00

Un esempio di ASP.NET Ajax Extender Control con funzionalità di controllo sulla lunghezza dei testi inseriti nei textbox (problema maxlength nelle textarea), arricchito con effetti derivati dal PopupBehavior e dalle Animation API del Toolkit.
Questo articolo è da considerarsi obsoleto. Alcune funzionalità potrebbero non essere più disponibili e non è possibile aggiungere commenti.

Ok, una textarea HTML non supporta la property maxlength e quindi non si può facilmente impedire che un utente Web inserisca una stringa di caratteri che - ad esempio - non ecceda la size di una cella del nostro database.

input type=text supporta tale funzionalità.
Entrambi gli oggetti hanno un comune denominatore nel panorama ASP.Net: sono renderizzazioni differenti di uno stesso WebControl, il TextBox.

Bene, io armato...

  • del mio nuovo Visual Studio 2008 caricato a Javascript debugger,
  • dell'AjaxControlToolkit 3.5,
  • della mia voglia di sperimentare...

posso pompare un po' questo vacchio TextBox!

L'idea è quella di intervenire sugli eventi di tastiera per osservare un tetto di caratteri predefinito e sfruttare il PopupBehavior del Toolkit per arricchire il tutto con una didascalia dinamica che informi su cosa sta succedendo (vedi figura sotto)...

sample screenshot

La didascalia può essere animata con gli effetti ammessi dal framework di Animation associato al Toolkit: essa appare (effeto fade-in) quando il textbox rivece il focus nell'interfaccia e altrettanto gradevolmente scompare (fade-out) quando il textbox "sfuoca".
Ecco un possibile utilizzo del mio MaxCharsExtender (poi andremo al codice del componente stesso):

<style type="text/css">   

    body{font-family:Verdana; font-size:12px; }

    .FlyOut

    {

        background-image:url(bg.png); background-repeat:no-repeat; color:White;

        padding:4px; width:300px;

    }   

</style>

<asp:TextBox runat="server" ID="txt" TextMode="MultiLine" MaxLength="10" Rows="4" Columns="50" Width="300px" />

<pacem:MaxCharsExtender runat="server" ID="mce" LabelCssClass="FlyOut"

TargetControlID="txt" MaxChars="160" CharsWrittenFormat="<b>{0}</b> chars out of {1} allowed.">

    <Animations>

        <OnShow>

            <FadeIn Duration=".25" MinimumOpacity=".1" MaximumOpacity="1" />

        </OnShow>

        <OnHide>

            <FadeOut Duration=".25" MinimumOpacity="0" MaximumOpacity="1" />

        </OnHide>

    </Animations>

</pacem:MaxCharsExtender>

<asp:Button runat="server" ID="btn" Text="PostBack!" />

 

Il progetto Visual Studio 2008 è basato sul template ASP.NET Ajax Extender Control e consta di 3 files (vedi screenshot sotto)...

vs 2008 project

Ho spulciato i sorgenti di alcuni extenders del Toolkit per prendere spunti su come utilizzare in maniera appropriata il PopupBehavior.
Tuttavia ho trovato notevoli difficoltà in merito: testando il componente, il popup non sembrava funzionare... Mi è giunto in soccorso il debugger Javascript!
Ho notato come - aggiungendo un'animazione in corrispondenza della chiamata show() delle API del PopupBehavior - il controllo target venga dapprima nascosto (visibility hidden ...e display none!) mentre successivamente, allo start dell'animazione, non si provveda a "mostrarlo"!
A me sembra un buco del componente (l'AutoCompleteExtender ed il ListSearchControl mi danno un comportamento analogo), se qualcuno sa di più in merito sarei veramente lieto di venire aggiornato...

Ad ogni modo, individuato ed aggirato l'ostacolo, tutto sembra funzionare correttamente sulle ultime versioni di IE, FireFox, Opera e Safari.

Questo il codice completo dell'Extender:

using System;

using System.Web.UI.WebControls;

using System.Web.UI;

using System.ComponentModel;

using System.ComponentModel.Design;

using AjaxControlToolkit;

using System.Web;

 

[assembly: System.Web.UI.WebResource("Pacem.Web.Extensions.MaxCharsBehavior.js", "text/javascript")]

namespace Pacem.Web.Extensions

{

    [Designer(typeof(MaxCharsDesigner))]

    [ClientScriptResource("Pacem.Web.Extensions.MaxCharsBehavior", "Pacem.Web.Extensions.MaxCharsBehavior.js")]

    [TargetControlType(typeof(TextBox))]

    [RequiredScript(typeof(PopupExtender))]

    [DefaultProperty("MaxChars")]

    public class MaxCharsExtender : AnimationExtenderControlBase

    {

        public MaxCharsExtender()

        {

            EnableClientState = true;

        }

 

        /// <summary>

        /// OnLoad checks to see if it's focused by default.

        /// </summary>

        /// <param name="e">Arguments.</param>

        protected override void OnLoad(EventArgs e)

        {

            base.OnLoad(e);

            ClientState = (string.Compare(Page.Form.DefaultFocus, TargetControlID, StringComparison.InvariantCultureIgnoreCase) == 0) ? "Focused" : null;

        }

 

        /// <summary>

        /// Gets or sets the maximum number of chars allowed to input.

        /// </summary>

        [ExtenderControlProperty]

        [ClientPropertyName("maxChars")]

        [DefaultValue(int.MaxValue)]

        public int MaxChars

        {

            get

            {

                return GetPropertyValue("MaxChars", int.MaxValue);

            }

            set

            {

                SetPropertyValue("MaxChars", value);

            }

        }

 

        /// <summary>

        /// Gets or sets the format used show the inputed chars versus the allowed ones.

        /// </summary>

        /// <value>{0} out of {1} chars written.</value>

        [ExtenderControlProperty]

        [ClientPropertyName("charsWrittenFormat")]

        [DefaultValue("{0} out of {1} chars written.")]

        public string CharsWrittenFormat

        {

            get

            {

                return GetPropertyValue("CharsWrittenFormat", "{0} out of {1} chars written.");

            }

            set

            {

                SetPropertyValue("CharsWrittenFormat", value);

            }

        }

 

        /// <summary>

        /// Gets or sets the css class name of the label used to warn about remaining chars.

        /// </summary>

        [ExtenderControlProperty]

        [ClientPropertyName("flyOutLabelCssClass")]

        [DefaultValue(null)]

        public string LabelCssClass

        {

            get

            {

                return GetPropertyValue("LabelCssClass", "");

            }

            set

            {

                SetPropertyValue("LabelCssClass", value);

            }

        }

 

        /// <summary>

        /// OnShow animation.

        /// </summary>

        [ExtenderControlProperty]

        [ClientPropertyName("onShow")]

        [Browsable(false)]

        [DefaultValue(null)]

        [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]

        public Animation OnShow

        {

            get { return GetAnimation(ref _onShow, "OnShow"); }

            set { SetAnimation(ref _onShow, "OnShow", value); }

        }

        private Animation _onShow;

 

        /// <summary>

        /// OnHide animation.

        /// </summary>

        [ExtenderControlProperty]

        [ClientPropertyName("onHide")]

        [Browsable(false)]

        [DefaultValue(null)]

        [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]

        public Animation OnHide

        {

            get { return GetAnimation(ref _onHide, "OnHide"); }

            set { SetAnimation(ref _onHide, "OnHide", value); }

        }

        private Animation _onHide;

 

        /// <summary>

        /// Convert server IDs into ClientIDs for animations.

        /// </summary>

        protected override void OnPreRender(EventArgs e)

        {

            base.OnPreRender(e);

 

            ResolveControlIDs(_onShow);

            ResolveControlIDs(_onHide);

        }

    }

}

L'intero controllo può essere sscaricato dal link sottostante (ricordate di settare il .js come EmbeddedResource nel progetto VS e di adeguare conseguentemente i riferimenti per recuperarlo nell'assembly!)

zip file « download code

Take care. Bye.

Feedbacks

  • Re: Animated MaxCharsExtender AjaxControlToolkit based

    Iuri venerdì 1 febbraio 2008 5,00

    Diamo a Cesare quelche è di Cesare l'idea è stata mia ;) Comunque resti sempre il migliore, certo potevi farlo quando mi serviva :P

  • Re: Animated MaxCharsExtender AjaxControlToolkit based

    CMerighi venerdì 1 febbraio 2008 0,00

    Il tempismo non è mai stato il mio forte... L'idea è tua, qui lo dico e lo confermo (semmai ci sarà - lo dubito - una disputa sulle royalties)! ;)

  • Re: Animated MaxCharsExtender AjaxControlToolkit based

    Christian Thériault mercoledì 29 aprile 2009 5,00

    Thanks a lot pal, your control works very well and is very neat. I'm also using it to learn how things work with AJAX to eventually write AJAX controls of my own.

  • Re: Animated MaxCharsExtender AjaxControlToolkit based

    Jay mercoledì 13 gennaio 2010 0,00

    Cool code, thanks for sharing.

feedback
 

Syndicate

Autore

Cristian Merighi facebook twitter google+ youtube

Ultimi articoli

Top rated

Archivio

Dove sono?

Autore

Cristian Merighi facebook twitter google+ youtube

Le mie letture

Feeds