Question

I have a UserControl that allows the user to upload files and also displays them in a GridView. On the parent page, I have a jQuery tab control to which I dynamically add 2 instances of my UserControl (on different tabs). The second instance works fine, so I know the control works. However, when I try to upload a file using the first instance, the second instance is being referenced…so all property values, control names, etc are pointing that that of the second.

This is how I am loading the controls in the parent page code-behind:

protected void Page_Load(object sender, EventArgs e)
{
  MyControl ucAttachments1 = (MyControl) Page.LoadControl("~/controls/mycontrol.ascx");
  ucAttachments1.ID = "ucAttachments1";
  ucAttachments1.Directory = "/uploads/documents";
  ucAttachments1.DataChanged += new MyControl.DataChangedEventHandler(DoSomething);
  phAttachments1.Controls.Add(ucAttachments1);

  MyControl ucAttachments2 = (MyControl)Page.LoadControl("~/controls/mycontrol.ascx");
  ucAttachments2.ID = "ucAttachments2";
  ucAttachments2.Directory = "/uploads/drawings";
  ucAttachments2.DataChanged += new MyControl.DataChangedEventHandler(DoSomething);
  phAttachmetns2.Controls.Add(ucAttachments2);
}

in the html:

<div id="tabContainer">
    <div id="files">
        <asp:PlaceHolder id="phAttachments1" runat="server" />
    </div>
    <div id="drawings">
        <asp:PlaceHolder id="phAttachments2" runat="server" />
    </div>
</div>

a snippet of the user control code:

private string directory;

override protected void OnLoad(EventArgs e)
{
    PopulateAttachmentGridview();
}

protected btnUpload_Click(object sender, EventArgs e)
{
    UploadFile(directory);
}

public string Directory
{
    get { return directory; }
    set { directory = value; }
}

How can I ensure my usercontrols are being referenced correctly?

Answer 1

Check the actual html and javascript rendered to the client to ensure that there isn’t a duplicate ID related to the controls slipping through the cracks.