article

Fixing ASP.NET Dynamic IDs

Email
Submitted on: 1/4/2015 7:50:00 PM
By: Adam Smith (VectorX) (from psc cd)  
Level: Intermediate
User Rating: By 3 Users
Compatibility: C#, ASP.NET
Views: 1281
 
     Renders asp.net server ids on the clientside, so that you can find them with getElementById.

 
				At my work we use asp.net to build alot of our projects. Since the revolution of AJAX, mixing clientside and serverside has become a real pain. The main issue is ASP.NET dynamically creates Control ID names when the page is rendered. It does this to make sure IDs are unique. So if you want to use javascript getElementById('id name') forget about it. ASP.NET dynamically renders control ids like id = 'ctl001_ControlName_Blah_Blah' when you really just wanted the asp.net property name id='ControlName'.
Below I wrote a code to fix this issue so you dont have to worry about it anymore. Your names will be exactly the same whether serverside or clientside.
There are two methods below needed to render ids. The first method IterateThroughControls(ControlCollection _Parent) uses recursion to gather up a list of controls ids from the controlcollection of the page. It builds a javascript string of var ID = ClientID; which in turn maps the actual id with the dynamic one, so that you can find it with document.getElementById(ControlID). You will need to remove the single quotes in getElementById because you are now using it as a string variable. The second method overrides the page.OnPreRender() to render the javascript with Page.ClientScript.RegisterClientScriptBlock().
/// Loops through all controls in a webpage using recursion.
/// The page control collection.
/// Returns a javascript string of all matching ids.
protected string IterateThroughControls(ControlCollection _Parent)
{
StringBuilder s = new StringBuilder();
foreach (Control c in _Parent)
{
if (!string.IsNullOrEmpty(c.ID) && !string.IsNullOrEmpty(c.ClientID))
{
s.AppendFormat("var {0} = '{1}';\n", c.ID, c.ClientID);
}
if (c.Controls.Count > 0) { s.Append(IterateThroughControls(c.Controls)); }
}
return s.ToString();
}
/// On Page PreRender,
/// EventArgs.
protected override void OnPreRender(EventArgs e)
{
//Load all control ids----------------------------------------
StringBuilder s = new StringBuilder();
s.AppendFormat("<script language=\"javascript\">\n{0}</script>", IterateThroughControls(Page.Controls));
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ControlIDS", s.ToString());
base.OnPreRender(e);
//------------------------------------------------------------
}
To find your control just use its real id like so:
document.getElementById(ControlName).value


Other 2 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Intermediate category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)
 

To post feedback, first please login.