Why is my ASP.Net custom control displaying two id attributes in my first child control?
I am writing a small ASP.Net custom control that inherits from CompositeControl. The control is a pane that contains two sub-panes with a label in each sub-pane. When rendering, I see in the HTML source that the first child control of my custom control gets two id attributes: the first is the ID of the custom control itself, and the second is the ID property that I assign to the first child control. Why is this happening?
code:
[ToolboxData("<{0}:MessageBox runat=server></{0}:MessageBox>")]
public class MessageBox : CompositeControl {
private Panel _MessageHeaderContainer = null;
private Label _MessageHeaderLabel = null;
private Panel _MessageDetailsContainer = null;
private Label _MessageDetailsLabel = null;
protected override HtmlTextWriterTag TagKey {
get {
return HtmlTextWriterTag.Div;
}
}
protected override void CreateChildControls() {
// Message header area.
_MessageHeaderContainer = new Panel();
_MessageHeaderContainer.ID = "HeaderContainer";
_MessageHeaderContainer.CssClass = "__MessageBox_Container";
this.Controls.Add(_MessageHeaderContainer);
// Message header text.
_MessageHeaderLabel = new Label();
_MessageHeaderLabel.ID = "HeaderLabel";
_MessageHeaderLabel.Text = "[ Header ]";
_MessageHeaderContainer.Controls.Add(_MessageHeaderLabel);
// Message details area.
_MessageDetailsContainer = new Panel();
_MessageDetailsContainer.ID = "DetailsContainer";
this.Controls.Add(_MessageDetailsContainer);
// Message details text.
_MessageDetailsLabel = new Label();
_MessageDetailsLabel.ID = "DetailsLabel";
_MessageDetailsLabel.Text = "[ Details ]";
_MessageDetailsContainer.Controls.Add(_MessageDetailsLabel);
}
protected override void RenderContents(HtmlTextWriter output) {
AddAttributesToRender(output);
// Render the box.
_MessageHeaderContainer.RenderControl(output);
_MessageDetailsContainer.RenderControl(output);
}
}
Usage in ASPX page:
<cc:MessageBox ID="ctlMessageBox" runat="server" />
HTML output:
<div id="ctl00_ctl00_ctlMessageBox">
<div id="ctl00_ctl00_ctlMessageBox" id="ctl00_ctl00_ctlMessageBox_HeaderContainer" class="__MessageBox_Container">
<span id="ctl00_ctl00_ctlMessageBox_HeaderLabel">[ Header ]</span>
</div><div id="ctl00_ctl00_ctlMessageBox_DetailsContainer">
<span id="ctl00_ctl00_ctlMessageBox_DetailsLabel">[ Details ]</span>
</div>
</div>
source to share
You can fix this by completely removing the method RenderContents
- don't replace anything. Composite controls display all of their child controls by default. If you do this, your control produces clean markup:
<div id="test">
<div id="test_HeaderContainer" class="__MessageBox_Container">
<span id="test_HeaderLabel">[ Header ]</span>
</div>
<div id="test_DetailsContainer">
<span id="test_DetailsLabel">[ Details ]</span>
</div>
</div>
As you noted, the method AddAttributesToRender
is the culprit - the convenience method renders all top-level attributes (regardless of whether the current context is a top-level control or not). The only reason you would call this is because you yourself were in complete control of the rendering process and wanted to display all the attributes of the top-level control in a single expression.
source to share
It is an ASP.NET identity that assigns user control in general. If you put your custom control in a Div or Span (in the custom control code itself, not in the markup), it will be assigned an ID instead of your first internal "control".
Something like that:
protected override void Render(HtmlTextWriter writer)
{
AddAttributesToRender(writer);
//must render tag or first inner control will get two IDs
writer.RenderBeginTag(HtmlTextWriterTag.Span);
//render child controls here...
writer.RenderEndTag();
}
source to share