Creating an AJAX Script Control

Question

Call me a 'n00b', but I am new to creating Script Controls. I want to create a simple control with 3 text boxes. I have a .cs file that looks like this:

    public class SmokingCalc : ScriptControl
    {
        public SmokingCalc()
        {
            Render(htmlWriter);
        }
        protected override void Render(HtmlTextWriter writer)
        {
            costTextbox.RenderControl(writer);
            base.Render(writer);
        }
        protected override IEnumerable<ScriptDescriptor>
                GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("SmokingCalc.SmokingCalc", this.ClientID);
            yield return descriptor;
        }

        // Generate the script reference
        protected override IEnumerable<ScriptReference>
                GetScriptReferences()
        {
            yield return new ScriptReference("SmokingCalc.SmokingCalc.js", this.GetType().Assembly.FullName);
        }

        protected HtmlTextWriter htmlWriter;
        protected TextBox costTextbox;
        protected TextBox amountTextbox;
        protected TextBox yearsTextbox;
        protected Button submitButton;
    }
}

and I have absolutely no idea why the textbox wont render? I think I am missing something...

[EDIT] The error I'm getting is the "Object reference is not set to an instance to an object".

[ANSWERED] I changed the file as follows, and it works, so far at least.

   public class SmokingCalc : ScriptControl
    {
        public SmokingCalc()
        {
        }
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
            costTextbox.ID = "costTextbox";
            amountTextbox.ID = "amountTextbox";
            yearsTextbox.ID = "yearsTextbox";
            submitButton.ID = "submitButton";
            submitButton.Text = "Submit";
            Controls.Add(costTextbox);
            Controls.Add(amountTextbox);
            Controls.Add(yearsTextbox);
            Controls.Add(submitButton);
        }
        protected override IEnumerable<ScriptDescriptor>
                GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("SmokingCalc.SmokingCalc", this.ClientID);
            descriptor.AddProperty("costTextboxID", costTextbox.ClientID);
            descriptor.AddProperty("amountTextboxID", amountTextbox.ClientID);
            descriptor.AddProperty("yearsTextboxID", amountTextbox.ClientID);
            descriptor.AddProperty("submitButtonID", submitButton.ClientID);
            yield return descriptor;
        }

        // Generate the script reference
        protected override IEnumerable<ScriptReference>
                GetScriptReferences()
        {
            yield return new ScriptReference("SmokingCalc.SmokingCalc.js", this.GetType().Assembly.FullName);
        }

        protected TextBox costTextbox = new TextBox();
        protected TextBox amountTextbox = new TextBox();
        protected TextBox yearsTextbox = new TextBox();
        protected Button submitButton = new Button();
    }

Try to instantiate your controls before you add 'em. Eg costTextbox = new Textbox(); — Crescent Fresh, Jan 30 '09 at 03:47

Crescent Fresh · Accepted Answer · 2009-01-30T03:47:22.090

Did you try CreateChildControls?:

public class SmokingCalc : ScriptControl
{
    protected override void CreateChildControls()
    {
        this.Controls.Add(costTextbox);
    }

    protected override IEnumerable<ScriptDescriptor>
            GetScriptDescriptors()
    {
        ScriptControlDescriptor descriptor = new ScriptControlDescriptor("SmokingCalc.SmokingCalc", this.ClientID);
        yield return descriptor;
    }

    // Generate the script reference
    protected override IEnumerable<ScriptReference>
            GetScriptReferences()
    {
        yield return new ScriptReference("SmokingCalc.SmokingCalc.js", this.GetType().Assembly.FullName);
    }

    protected HtmlTextWriter htmlWriter;
    protected TextBox costTextbox = new TextBox();
    protected TextBox amountTextbox = new TextBox();
    protected TextBox yearsTextbox = new TextBox();
    protected Button submitButton = new Button();
}

score 1 · Answer 2 · answered Jan 30 '09 at 06:07

1

What you are doing here is building a composite control, not a script control, per se. What you really want to be doing is inheriting from CompositeControl (and following the model for creating a composite control), and implementing IScriptControl, instead. You're asking for a lot of heartburn doing it your way (ViewState and postback problems, etc.).

answered Jan 30 '09 at 06:07

Robert C. Barth

22,687
6
45
52

So what is the difference between the two? – BBetances Jan 30 '09 at 06:10
Read the link I provided. A ScriptControl is generally created by writing directly to the writer object in the render method. A CompositeControl was specifically designed to be the base object of a control that uses whole other controls in the manner in which you want. – Robert C. Barth Jan 30 '09 at 21:27
Ahh ok, so basically I can create a composite instead and use the IScriptControl interface to implement JS functionality. ScriptControls do seem alittle intense, and there's not much out there about them (yet). Thanks for the help. +1 – BBetances Jan 31 '09 at 02:15

Creating an AJAX Script Control

2 Answers2