Resumé

AjaxControlToolkit ClientSide vs ScriptReferences

Cristian Merighi () 0.00

How to properly reference the necessary scripts in order to use the AjaxControlToolkit components in a pure client-side (javascript) fashion?
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

Quicky & tricky, that's it. Have you ever needed to use the powerful AjaxControlToolkit extended controls (or your own implementations of Ajax Components based on this open source framework) in a purely client-side fashion (direct javascript)?
You surely have tried the - wrong - way to encapsulate the necessary script references as it follows:

WRONG WAY:

<asp:ScriptManager runat="server" ID="sm">

    <Scripts>

        <asp:ScriptReference Assembly="AjaxControlToolkit"

        Name="AjaxControlToolkit.Compat.Timer.Timer.js" />

        <asp:ScriptReference Assembly="AjaxControlToolkit"

        Name="AjaxControlToolkit.CollapsiblePanel.CollapsiblePanelBehavior.js" />

    </Scripts>

</asp:ScriptManager>

This way is wrong, and it is wrong in a couple of ways.
Let's take a look to the attributes that decorate the AjaxControlToolkit.CollapsiblePanelExtender class:

[Designer("AjaxControlToolkit.CollapsiblePanelDesigner, AjaxControlToolkit")]

[ClientScriptResource("AjaxControlToolkit.CollapsiblePanelBehavior", "AjaxControlToolkit.CollapsiblePanel.CollapsiblePanelBehavior.js")]

[RequiredScript(typeof(CommonToolkitScripts))]

[RequiredScript(typeof(AnimationScripts))]

[TargetControlType(typeof(Panel))]

[DefaultProperty("CollapseControlID")]

[System.Drawing.ToolboxBitmap(typeof(CollapsiblePanelExtender), "CollapsiblePanel.CollapsiblePanel.ico")]

public class CollapsiblePanelExtender : ExtenderControlBase

  1. As you can argue, to properly work, the AjaxControlToolkit.CollapsiblePanelBehavior (client-side component) needs references not only to its "own" js file (AjaxControlToolkit.CollapsiblePanel.CollapsiblePanelBehavior.js embedded into the AjaxControlToolkit assembly) but also to some shared resources (highlighted above)!
  2. Secondly, if you want to use - as you're supposed to - the Sys.Timer component which comes with the embedded AjaxControlToolkit.Compat.Timer.Timer.js library, you will soon realize that the (highlighted) AnimationScripts have as required client library resource just the Timer library!

You're in the uncomfortable situation where you're asked to know too much about what you really shouldn't have to care!

That's why there is a right way to get the results you're chasing...

RIGHT WAY:

var scriptRefs =

    AjaxControlToolkit.ScriptObjectBuilder.GetScriptReferences(typeof(AjaxControlToolkit.TimerScript))

    .Union(AjaxControlToolkit.ScriptObjectBuilder.GetScriptReferences(typeof(AjaxControlToolkit.CollapsiblePanelExtender)))

    .ToList();

scriptRefs.ForEach(sr => ScriptManager1.Scripts.Add(sr));

Hope it helped.

Take care. Bye.

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