composite control accessing javascript functions - asp.net

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...
}
}