Composite webcontrol

[Cappy]

I have just built my first custom control draws a html wrapper to the
screen around the content of the server control tag.

Eg <myc:MyPanel .....> more html code or literal text</myc:MyPanel>
will draw a panel containing the html inbeween the custom control
tags.

I did this buy overiding the render method of WebControl like so

protected override void Render(HtmlTextWriter output)
{
RenderParentTableTop(output);
base.RenderContents(output);
RenderParentTableBottom(output);
}

RenderParentTableTop and Bottom simply out put html using the
HtmlWriter utilities like this

protected void RenderParentTableBottom(HtmlTextWriter writer)
{
//Panel Content Ends here

//Render bottom of body table
RenderBobyBottom(writer);

//</td>
writer.RenderEndTag();

//</tr>
writer.RenderEndTag();

//<tr vAlign="bottom">

etc...
}

this all works fine so when I am building portal sites.. I drap a
panel into the designer and just create some html inbetween the tags
for the panel content.

I now want to extend this panel to offer some of the more common
scenarios I face. First one is a link panel.

What I want to add is an image button to the footer of my control so
when clicked.. it will fire an onClick event to the top level
codebehind page.

In my current control.. I have a RenderFooter method that builds the
html for the footer something like this

protected void RenderFooter(HtmlTextWriter writer)
{
//<table cellSpacing="0" cellPadding="0" width="100%" Height="1"
border="0">
writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "0");
writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "0");
writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%");
writer.AddAttribute(HtmlTextWriterAttribute.Height, "1");
writer.AddAttribute(HtmlTextWriterAttribute.Border, "0");
writer.RenderBeginTag(HtmlTextWriterTag.Table);

//<tr>
writer.RenderBeginTag(HtmlTextWriterTag.Tr);

//<td width="1" background="/images/footerLCrnr.jpg">
writer.AddAttribute(HtmlTextWriterAttribute.Width, "1");
writer.AddAttribute(HtmlTextWriterAttribute.Background, footerLCrnr);
writer.RenderBeginTag(HtmlTextWriterTag.Td);

etc...
}

What I am thinking is I need to overide this method and some how add
an image button control in this td... but I have noidea how to go
about it and how to deal with the event handler.

any guidance would be great.

Thanks
Amit Desai

 

[Teemu Keiski]

Hi,

you can just render the ImageButton control out as HTML (input type="image"
and so on) and to its onclick attribute you add a code that causes a
postback to happen, which you handle by implementing IPostBackEventHandler
interface.

Here is small example code for you:

public class MyImageButton : WebControl, IPostBackEventHandler
{
//Key for the event
private static readonly object EventClick=new object();

//Event property construct to optimize
public event EventHandler Click
{
add
{
Events.AddHandler(EventClick,value);
}
remove
{
Events.RemoveHandler(EventClick,value);
}
}

//Method to raise the event
protected void OnClick(EventArgs e)
{
EventHandler handler=Events[EventClick] as EventHandler;
if(handler != null)
{
handler(this,e);
}
}

//When postback happens by this control, raise the event
void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
{
if(eventArgument=="imageclick")
{
OnClick(EventArgs.Empty);
}
}

[
Editor(typeof(ImageUrlEditor),typeof(UITypeEditor))
]
public string ImageUrl
{
get
{
string s=(string)ViewState["ImageUrl"];
return(s==null)?String.Empty : s;
}
set
{
ViewState["ImageUrl"]=value;
}
}

//Render the control as image button (this is simplified example)
protected override void Render(HtmlTextWriter writer)
{
AddAttributesToRender(writer);
writer.AddAttribute(HtmlTextWriterAttribute.Name,this.UniqueID);
writer.AddAttribute(HtmlTextWriterAttribute.Type,"image");
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,Page.GetPostBackEventReference(this,"imageclick"));
writer.AddAttribute(HtmlTextWriterAttribute.Src,ImageUrl);
writer.RenderBeginTag(HtmlTextWriterTag.Input);
writer.RenderEndTag();
}

}