Acessing ASP.NET Controls in Javascript: Best Practices
I try to spend as much time
as possible on asp.net blogs and forums. I have observed many members posting
part of their code on http://forums.asp.net to get the solution
about the problem they are facing. One of the worst practices I have seen on
forums is to use static control IDs in client script while writing
javascript (I think they are getting that from ViewSource of the Page).
Static ID of the control used on asp.net page with master page looks somthing
like:
ctl00_ContentPlaceHolder1_txtEmployeeName
which consists of whole
control hierarchy from Master Page, ContentPlaceHolder on Master Page and
finally textbox control. Here what we are interested in is only
txtEmployeeName. Most of developers who are new to javascript just write
following statement to get txtEmployeeName in javascript:
document.getElementById('ctl00_ContentPlaceHolder1_txtEmployeeName');
//Wrong way to access element
This works as well. But what if you or someone changes ID of any control in
whole control hierarchy (e.g. ctl00_ContentPlaceHolder1_txtEmployeeName) or the
whole control heirarchy itself changes (You put TextBox inside UserControl or
AjaxControlToolKit Tab Container). The above statement will throw javascript
error.
The better way to access any element on page within javascript is to use
ClientID property of that control. Like:
document.getElementById("<%=txtEmployeeName.ClientID%>");
//Will always work
This will always work even if you change name of any control in control
hierarchy or change control hierarchy itself.
Hope this helps...