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 = "&nbsp;";


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.

m3kh · Accepted Answer · 2009-11-22 14:58:31Z

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("&nbsp;");
     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...
    }

}

answered Nov 22, 2009 at 14:58

m3kh

7,9692 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

markiz Over a year ago

I use CompositeControl because I need design time support.

markiz Over a year ago

The control has a lot of elements i've pasted only one section to show my case scenario

markiz Over a year ago

$addHandlers inside initialize function can't be static. Because the the li elements created,on the markup, dynamically.

m3kh Over a year ago

WebControl supports design-time as well. If you want to assign a theme to the control and show it in the design-time so mark your control with SupportsPreviewControlAttribute. But, if you have partnership of multiple server side controls, so you have to derive the control from CompositeControl. Anyway, the above code is just an instance of what you have to do. I don't say your code is static. As demonstrated in my code snippet you have to add an auto generated and unique id to each of li element. Afterward, add the onmouseover and onmousemove event onto the initialize method to each.

m3kh Over a year ago

For instance add an index to the end of control ClientID ('{ClientID}_1') and make a unique id for each of li element. And in the client-side, find the li elements are exist in the control element and use $addHandler to add specified events.

|

Collectives™ on Stack Overflow

composite control accessing javascript functions

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related