Custom ASP.net Server Controls - Rendering

Question

Hi, I'm currently writing a custom server control in ASP.net. My idea is to create some sort of collapsible panel control (btw, it's the first server control I'm writing). So what I wanted to have is that the user defines my control in this way in the page:

<myCtrl:CollapsiblePanel id="myCollapsiblePanel" runat="server">
   <asp:Label id="lblTest" runat="server" Text="Test Label:"/>
   <asp:TextBox id="txbTest" runat="server"/>
</myCtrl:CollapsiblePanel>

The control should then render on the final page as follows:

<div id="myCollapsiblepanel">
   <input type="submit" name="btnExpand" value="Expand/Collapse" id="btnExpand" />
    <div id="pnlContent"> 
       <span id="lblTest">Title:</span> 
       <input name="txbTest" type="text" id="txbTest" /> 
    </div>
</div>

The submit button "btnExpand" has then an event-handler on the control which hides/shows the panel "pnlContent". My first approach was to create a server control that inherits from Panel. Inside the CollapsiblePanel control I then created another Panel "pnlContent". In the OnInit I did something like the following:

protected override void OnInit(EventArgs e)
{
   for (int i = 0; i < base.Controls.Count; i++)
   {
       Control control = base.Controls[i];
       content.Controls.Add(control);
   }
   base.Controls.Clear();

   base.Controls.Add(button);
   base.Controls.Add(content);
}

I basically took all the controls which are currently present inside my control and add them to the control list of the internally created Panel pnlContent. Furthermore I added the button which then does the expanding/collapsing of then pnlContent. My problem is that somehow the rendering doesn't work correctly. The button and the pnlContent are rendered out correctly, just the controls inside the pnlContent are not shown. The output is like the following

<div id="myCollapsiblepanel">
   <input type="submit" name="btnExpand" value="Expand/Collapse" id="btnExpand" />
    <div id="pnlContent"> </div>
</div>

The pnlContent is empty... Could someone suggest me a solution for this and/or what I did wrong with the rendering. I didn't override the default rendering of the Panel I inherit since I thought this shouldn't be necessary because I modify its control structure in the OnInit, so it should render out my modifications..

For the moment I found a solution. I basically did it the same way it is most often done in the Microsoft Ajax Control toolkit. I created a socalled "Extender" which doesn't render itself but just adds behavior. So now I add the the id of the panel to collapse to my CollapsiblePanelExtender control and it does then the job of collapsing/expanding. Maybe it's also the better and cleaner solution but I still would like to know what went wrong in my first approach I described before.

thanks for any help!

Answer 1

Messing around with the Controls collection, particularly removing and swapping controls between Control containers doesn't always work.

Do you specifically not want to render the content before a postback? WHy not render the Controls and wrap them in a div with a display:none on the CSS, which can then be swapped client-side using something easy like jQuery?

eg.

<myCtrl:CollapsiblePanel id="myCollapsiblePanel" runat="server" Text="Panel title">
   <asp:Label id="lblTest" runat="server" Text="Test Label:"/>
   <asp:TextBox id="txbTest" runat="server"/>
</myCtrl:CollapsiblePanel>

You should probably create apply this in a CreateChildControls overload:

protected override CraeteChildControls() { Controls.Add(new LiteralControl("<"+"h1>"+Text+"[+]"));
Panel panel=new Panel(); // add controls in collapsable panel to panel here Controls.Add(panel); }

which translates as:

<div id="ctl00_etc_myCollapsiblePanel">
   <h1>Panel title <a onclick="expandPanel">[+]</a></h1>
   <div id="childPanel" style="display:none">
      <label id="ctl_00_etc">Test Label</label>
      <input ... />
   </asp:Panel>
</div>

and some jQuery (or similar) attached to the :

function expandPanel() {
    $('<%=childPanel.ClientID %>').css('display','block');
}

All this is pseudo code, of course.

Answer 2

This happens because at any given moment a control can only belong to one parent. When you add a control from one collection into another, it is removed from the first one automatically. In your case:

for (int i = 0; i < Controls.Count; i++)
{
   //obtain a reference
   Control control = Controls[i];
   //The control is removed from Controls collection 
   //and added to content.Controls. All remaining controls get shifted left.
   //This means that next control will get skipped.
   content.Controls.Add(control);
}

Consider doing following (by the way, you probably don't need to use base in this case):

Control[] controls = new Control[Controls.Count];
Controls.CopyTo(controls, 0); //create a snapshot of controls

for (int i = 0; i < controls.Length; i++)
    content.Controls.Add(controls[i]);

or use reverse addition:

Control[] controls = new Control[Controls.Count];
for (int i = Controls.Count - 1; i >= 0; i--) //walk backwards
    controls[i] = Controls[i];

for (int i = 0; i < controls.Length; i++)
    content.Controls.Add(controls[i]);