ASP.NET AJAX Control Toolkit example

  • Article

There are situations where you don’t want user to click on a button twice too fast or on a checkbox when the server is still processing. One quick trick is to use “this.Button1.Attributes.Add("onclick", "this.disabled=true;");” to disable the button right after user clicks on it. ASP.NET AJAX Control Toolkit has a rich set of controls that allow you to show fancy effects using AJAX. Among which, UpdatePanelAnimation can have the same effect as disabling the button after user’s click. If you set the fade out on updating and fade in on updated, your page can disable the whole panel which might contain buttons or checkboxes after user’s click:

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

...

<cc1:UpdatePanelAnimationExtender ID="EndpointUpdatePanel_UpdatePanelAnimationExtender"

        runat="server" TargetControlID="EndpointUpdatePanel">

            <Animations>

                <OnUpdating>

                    <FadeOut Duration="0.5" Fps="20" />

                </OnUpdating>

                <OnUpdated>

                    <FadeIn Duration="0.5" Fps="20" />

                </OnUpdated>

            </Animations>
</cc1:UpdatePanelAnimationExtender>

The only drawback is that the target control must be an UpdatePanel. When the user clicks on anything that causes an postback in the UpdatePanel such as a checkbox or a button, the panel fades out and user can’t click on anything in the panel. When the server finishes processing the postback (for example, querying data in the SQL server backend), the panel fades in with information back. You need to install the toolkit before you can add the “AjaxControlToolkit” tags to your aspx page source. Be aware that if you add the Toolkit to the Toolbox, you need to close the Visual Studio 2008 instance (suppose this is the last devenv.exe instance in the process list) and start new instances to have the AJAX Control Toolkit in Toolbox.