Resumé

Animated MaxCharsExtender AjaxControlToolkit based

Cristian Merighi () 5.00

An example of ASP.NET Ajax Extender Control that controls the length of the text in a textbox (see textarea maxlength problem), enriched with the efferts derived from PopupBehavior and from Toolkit's Animation APIs.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

Ok, an HTML textarea doesn't have a maxlength property in order to stop the user when is exceeding with his input string our - let's say - database field size.

input type=text does.
Both of 'em have a common factor in ASP.Net world: they're different renderings of the same WebControl, the TextBox.

Well, I have my...

  • brand new Visual Studio 2008 with powered with brand new Javascript debugger,
  • AjaxControlToolkit 3.5,
  • will to experiment...

Let us pimp this old TextBox up!

The idea is to prevent the user to input too many chars into a textbox (by intercepting keyboard's events) and exploit the Toolkit's PopupBehavior in order to add some funky AnimationExtensions to the contextual info label like in the picture below...

sample screenshot

The label you can see in the picture pops up as the textbox gets the focus and fades out as it fires the blur event.
Here's the relevant code for using my MaxCharsExtender (next we'll pass to the control itself):

<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!" />

 

The Visual Studio 2008 Project is based on the ASP.NET Ajax Extender Control template and consists of three files (see picture below)...

vs 2008 project

I've been lurking the code of other AjaxControlToolkit controls (like AutoCompleteExtender) to properly use the PopupBehavior.
I've also been struggling when - testing the component - the popup behavior didn't seem to work... Then was the Javascript debugger helpful!
I've noticed that - if an animation is added to the show() procedure of the PopupBehavior API - the target control is forced to be hidden (even diplay=none!) and it doesn't become visible as the animation starts!
This looks like a bug to me, if anyone knows more I'll be very pleased to hear about...

Anyway, I trapped that situation and everything seems to work fine on the latest versions of IE, FireFox, Opera and Safari.

Here's the complete code of the extender class:

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);

        }

    }

}

You can download the whole control from the link below (remember to set the .js as EmbeddedResource in your project and adjust the relevant assembly links!)

zip file « download code

Take care. Bye.

Feedbacks

  • Re: Animated MaxCharsExtender AjaxControlToolkit based

    Iuri Friday, February 01, 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 Friday, February 01, 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 Wednesday, April 29, 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 Wednesday, January 13, 2010 0.00

    Cool code, thanks for sharing.

feedback
 

Syndicate

Author

Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated

Archive

Where am I?

Author

Cristian Merighi facebook twitter google+ youtube

I'm now reading

Feeds