Id change of elements placed on a control loaded dynamically.

[craigkenisston]

I have a project, in which in my default.aspx page, I dinamically load
a user control in codebehind, in the pageload, that manages the website
:

Control objPageSkin = null;
HtmlForm objForm = new HtmlForm();

if (Settings.SomeCondition == true)
{
objPageSkin = LoadControl("_defaultall.ascx");
}
else if (Settings.SomeCondition == true)
{
objPageSkin = LoadControl("_defaultsingle.ascx");
}
Controls.Add(objPageSkin);

Now, in "_defaultall.ascx", I have some divs which have runat="server"
and have the proper id.
For example :

<div id="mainContent">
<!-- all content dinamically loaded here -->
</div>

Is rendered like this : !!

<div id="_ctl0_mainContent">
<!-- all content dinamically loaded here -->
</div>

(This unexpected change ruins my CSS and other code I have there, btw,
this code was running fine when I had it in an aspx file).

Why this happens ? How can I solve it ? And if it has no solution,
what's the proper approach here ? I'm open to any advise.

Thanks in advance,

 

[souri challa]

What is happening here is ASP.Net page is doing name mangling of the
server control IDs in the user control when it is rendered as HTML.
This is done so that, you'll have unique IDs of the DIV even if you
load more than one User control instance on the page. If you have some
client side code that is finding the DIV by It's Id, you should
register such code from the code behind and you can pass the ClientId
propery of your server control to the script, which will give you the
HTML ID.
HTH.
Souri