Insert dynamic controls into middle of controls collection

Question

this is my very first post! I'm pretty desperate so I'm going above and beyond my standard googling. I believe this is an advanced or expert-level .NET question.

The problem is that I have built a .NET web application that needs to be able to insert user controls dynamically into the middle of a list. I'm quite comfortable with dynamic controls so long they only need to be added to the end of the list (ie: I'm familiar with articles like this: http://msdn.microsoft.com/en-us/library/ms972976.aspx). However, if I need to add a UserControl to the front of a Controls collection or somewhere in the middle I'm pretty much lost since the UniqueID of the control is thrown off.

As a simplified example, let's say that i have a Panel to which I am adding a list of UserControls called MyControl.ascx. I also have some event that can get fired on the page to that needs to dynamically insert a MyControl.ascx into the specified index of the Controls collection of the panel. I also have one or more events on MyControl.ascx to which I need to subscribe. This means that the controls need to be loaded BEFORE the events on these controls would fire or else they will not fire. If you don't know to what I'm referring then I either worded the question poorly or this question might be too difficult for you :)

Below is some C# pseudocode to demonstrate the issue. The problem is that the Controls.AddAt(index, control) method does NOT adjust the UniqueID values of the controls accordingly. For example, consider the following controls in a Controls collection:

Whether I'm actually writing code that directly depends on the UniqueID or not, .NET indirectly uses the UniqueID to link together the events that were fired on the previous postback with the controls get loaded on the new postback. Taking my previous example of:

On initial Page Load (Page.IsPostback == false)

<table>
  <tr>
    <td width='100'>Control index</td>
    <td width='75'>UniqueID</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>0</td>
    <td>ctl00</td>
    <td>value1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>ctl01</td>
    <td>value2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ctl02</td>
    <td>value3</td>
  </tr>
</table>

After a postback (Page.IsPostback == false) from some other control that wants to insert the control at index 0:

If i do a Controls.AddAt(0, newControl) then the Controls collection looks something like this:

<table>
  <tr>
    <td width='100'>Control index</td>
    <td width='75'>UniqueID</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>0</td>
    <td>ctl03</td>
    <td>value0  <== the controls' unique IDs do not shift!</td>
  </tr>
  <tr>
    <td>1</td>
    <td>ctl00</td>
    <td>value1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ctl01</td>
    <td>value2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>ctl02</td>
    <td>value3</td>
  </tr>
</table>

So if i were to click on a linkbutton in the control with Value == value0 and UniqueID == ctl03, the controls would be ordered like the following on post-back and the UniqueIDs would not be in the order i want. This will cause the click event to attach to the wrong control:

<table>
  <tr>
    <td width='100'>Control index</td>
    <td width='75'>UniqueID</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>0</td>
    <td>ctl00</td>
    <td>value0  <== the control i wanted to throw the event</td>
  </tr>
  <tr>
    <td>1</td>
    <td>ctl01</td>
    <td>value1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ctl02</td>
    <td>value2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>ctl03</td>
    <td>value3  <== the actual control to which the event is attached</td>
  </tr>
</table>

If i didn't have to handle events from these dynamic controls this probably wouldn't be a problem. Here is my code:

// on init i just need to pull the records from the DB, turn them
// into a MyControl.ascx, and then add them to my panel
protected override void OnInit(EventArgs e)
{
    base.OnInit(e);

    // get my List<SomethingFromDB> ordered by value and iterate through, 
    // adding controls to the control collection
    List<SomethingFromDB> myList = remoteService.GetSomeListFromTheDB();
    foreach(SomethingFromDB something in List<SomethingFromDB>)
    {
        // load a new MyControl.ascx
        MyControl myControl = (MyControl )LoadControl("~/Controls/MyControl .ascx");
        // populate the values of myControl with the "something"
        this.populateMyControl(something);
        // dynamically add the control to my panel
        this.myPanel.Add(myControl);     
        // subscribe to event
        myControl.SomeArbitraryEvent += new EventHandler(MyArbitraryHandler);
    }

    // This event gets fired by a magical control on the page and passes a 
    // new SomethingFromDB which needs to be inserted into the DB and then 
    // dynamically inserted into the Controls collection at the specified index
    private void SomeOtherControl_ClickInsert(object sender, MyControlEventArgs e)
    {
        // insert this record into the DB             
        remoteService.InsertIntoDB(e.SomethingFromDB);     
        // dynamically load this control
        MyControl myControl = (MyControl )LoadControl("~/Controls/MyControl .ascx");
        // get the index into which we will be inserting this control
        int index = e.NewIndex;                   
        //dynamically add the control to my panel at the specified index.
        // THIS DOES NOT ADJUST THE UNIQUEID VALUES ACCORDINGLY
        // AND IS THE SOURCE OF MY PROBLEM!
        this.myPanel.AddAt(index, myControl);
    }

Please help. This one is killing me. If you need more information or have questions please let me know and I'd be happy to provide more info. I GREATLY appreciate your help!

Answer 1

To make automatic numbering work, you want the controls to be added to the panel in the same order for every postback. Obviously, on a postback, the controls have to have their unique IDs assigned, or you wouldn't get the control event.

UniqueID is initialised on first use to the value of the Control.ID* property. If that property is not set, it is automatically generated as ctlxx, as you have observed. Once assigned, a control's UniqueID is read-only.

Therefore, if you have some form of primary key, you can set the ID property of the control when you create it based on that primary key. The UniqueID will then be set to that value when the page loads its state.

• Footnote: the UniqueID property is actually a combination of the naming container's prefix and the ID property.