composite control accessing javascript functions

Question

I am creating a composite control, that implements IScriptControl.

in CreateChildControls() function i have this:

HtmlGenericControl ul = new HtmlGenericControl("ul");

HtmlGenericControl b2 = new HtmlGenericControl("li");
b2.Style["background-image"] = string.Format("url({0})", imageSrc);            
b2.Style["list-style"] = "none";
b2.Style["background-repeat"] = "no-repeat";
b2.Style["background-position"] = "center center";          
b2.Style["border-style"] = "none";
b2.Style["width"] = "20px";
b2.Style["height"] = "20px";
b2.Style["float"] = "left";
b2.InnerHtml = " ";


b2.Attributes["onmouseover"] = 
b2.Attributes["onmouseout"] =

ul.Controls.Add(b2);           
barContainer.Controls.Add(ul);

What I need is to set

b2.Attributes["onmouseover"]

and

b2.Attributes["onmouseout"]

attributes for Javascript functions that are defined in Prototype Model.

ProjectW.Edition.prototype = {
.
.
.

MouseOver: function(ctrl)
{
     DoWork...
},


MouseOut: function(ctrl)
{
     DoWork...
},

If this is needed:

  #region IScriptControl Implementation
        protected virtual IEnumerable<ScriptReference> GetScriptReferences()
        {           

            ScriptReference reference = new ScriptReference();
            reference.Assembly = "ProjectW";
            reference.Name = "ProjectW.EditonScripts.js";

            return new ScriptReference[] { reference };

        }


        protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("ProjectW.Edition", this.ClientID);


            descriptor.AddProperty(....);        

        );                       

            return new ScriptDescriptor[] { descriptor };                  
        }

        IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
        {
            return GetScriptReferences();
        }

        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            return GetScriptDescriptors();
        }

        #endregion

UPDATE: The html elements that generated inside CreateChildControls dynamically - on runtime.

Answer 1

Why you are using simple HTMLControls in combination with CompositeControl? If the control makes from these simple tags. Thus, use WebControl instead. Somthing like this.

 public override void RenderContents(HtmlTextWriter writer)
 {
     writer.RenderBeginTag(HtmlTextWriterTag.Ul);

     writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, "...");
     .
     .
     .
     writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID + "_Foo");
     writer.RenderBeginTag(HtmlTextWriterTag.Li);
     writer.Write(" ");
     writer.RenderEndTag();

     writer.RenderEndTag();

     base.RenderControl(writer);
 }

Adding event handler in ASP.NET Ajax Enabled controls has some simple differences. You should add a unique id to the target tag. And add the event to that like bellow.

ProjectW.Edition.prototype = {

    initialize: function()
    {
        base.callBaseMethod(this, "initialize");
        $addHandlers($get(this.get_id() + "_Foo"), "mouseover", Function.createDelegate(this, MouseOver));
    }

    dispose: function()
    {
        base.callBaseMethod(this,"dispose");
        $removeHandler($get(this.get_id() + "_Foo"), "mouseover", Function.createDelegate(this, MouseOver));
    }

    MouseOver: function(ctrl)
    {
        DoWork...
    },

    MouseOut: function(ctrl)
    {
        DoWork...
    }

}