Creating Script Controls And Love (ASP.Net ScriptControl)

[Part One] [Part Two] [Part Three] [Part Four] [Part Five]

So this will be the first of a couple posts having to do with Script Controls, the Ajax Control Tool Kit AutoComplete control, and Javascript. Now to get started, what’s a script control?

I’m glad you asked. Basically have you ever created a user control that required Javascript to go along with it? What if the control was in another assembly? Oh woe is you. Well you could require the .js file to be placed in the web project and included on the page. Meh. OR you could use a script control YAY! How does that help? Well it allows you to “attach” a javascript file to a control in a class library, no includes needed. Not only that, but you can pass values from the control to the client and use them with Javascript. (This includes ids of controls in the control.)

So what’s needed? Well…
1. Create a class library, Call it Test and make the default Namespace Test.Examples

2. Create a folder to hold the class file and the JavaScript file. Let’s call it ScriptControlTemplate for now.

2. Create the control class file and the needed JavaScript file. Call them both ScriptControlExample. (For right now it will be easier if they have the same name but they don’t have to be.)

3. Right click the JavaScript Files -< Properties -< Build Action: Embedded Resource

4. Go to the Properties folder in the class Library and open the AssemblyInfo.cs. Add this line:

[assembly: WebResourceAttribute
    ("Test.ScriptControlTemplate.ScriptControlExample.js", "text/javascript")]

Now you might notice something, that almost looks like the actual folder location and it kind of is. In order for this line to work, it has to match the folder location like when Visual Studios creates a Namespace automatically. It uses the directory name as the final part of the namespace. Although to note, the Namespace of the class DOES NOT have to match this. It just has to reflect the directory structure of where the .js file is.

Ok so now we have a blank .cs file and a blank .js file. Woo hoo. Now what? Well first you need to have the class inherit from System.Web.UI.ScriptControl and override two protected methods

    public class ScriptControlExample : ScriptControl , INamingContainer
    {
        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor desc =
                 new ScriptControlDescriptor("Test.Examples.Client.ScriptControlExample", ClientID);
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
          return new ScriptReference[] {
              new ScriptReference("Test.Examples.ScriptControlTemplate.ScriptControlExample.js", "Test.Examples") };

        }
    }

Ok so I cheated a little and put in two lines that you will need anyhow. I figured it would save some time, mainly mine. Cause let’s face it, I don’t really care about yours.

The first method GetScriptDescriptors is where we will be putting any values we want to send to the Client. The second just tells the system where the JavaScript file is to load. For now you won’t be doing anything with the second.

Ok now on to the Javascript file. Basically you have some cannon methods to add just to get the thing to work, and I’ll be honest: It’s extremely complicated and you probably won’t be smart enough to figure it out.

//Set the namespace
if (Type)
{
    Type.registerNamespace("Test.Examples.Client");
}

//Won't be doing much with this for the examples I have
Test.Examples.Client.ScriptControlExample = function(element)
{
    Test.Examples.Client.ScriptControlExample.initializeBase(this, [element]);
}

//This is where you basically define the class
Test.Examples.Client.ScriptControlExample.prototype =
{
    //Where you want to place constructor like code
    initialize: function()
    {
        Test.Examples.Client.ScriptControlExample.callBaseMethod(this, 'initialize');
    },

    //Remove events and such here
    dispose: function()
    {
        Test.Examples.Client.ScriptControlExample.callBaseMethod(this, 'dispose');
    }
}
Test.Examples.Client.ScriptControlExample.registerClass('Test.Examples.Client.ScriptControlExample',
   Sys.UI.Control);

Phew that was complicated right?

Ok so now you have what you need to create a script control. Run it and well nothing will really happen except you shouldn’t get errors.

Now just create a new page in a web application (Or project if you’re a loser) and just do this realy quick:

<%@ Register Assembly="Test.Examples"
    Namespace="Test.Examples.ScriptControlTemplate" TagPrefix="test" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="smMain" runat="server" />
        <test:ScriptControlExample ID="sceTest" runat="server" />
    </div>
    </form>
</body>
</html>

Run it and…..NOTHING! Surprise! Actually there is something, just nothing visual yet. Next post will get to that. Sucker.

One thing you can take away from this: A drinking game. Take a drink everytime you see the word ‘Ok’ in this post. I dare you.