ClientID Problem In External JavaScript Files Solved
Well, at least for me it is. I say that because this solution might
not appeal to the masses, but it works great for me.
The binary and source files can be downloaded from the MSDN Code Gallery.
Here is the direct link.
http://code.msdn.microsoft.com/RegClientControls
Up until lately, I have been writing my JavaScript in the .aspx file.
That way I could use the ClientID trick. <%=TextBox1.ClientID%>
I just began working with a team who prefers to write all JavaScript in
external .js files. What they had been doing is hard coding the
ClientID prefixes caused by the container controls. I guess this works
fine. It has been working for them so far. I personally can't do this.
It just feels wrong.
I took some time to figure out a better way to deal with the ClientID in
an external JavaScript file. I found an interesting article here about
Creating JavaScript objects from ASP.NET objects. I liked David's technique,
but it still required manually writing JavaScript on the .aspx page. I wrote
a control called "RegClient" that encapsulates and automates this technique.
If you place this control on your page anywhere below the Script Manager,
then all you have to do to access the controls from JavaScript is something
like "var controlObj = PageControls.TextBox1;".
The RegClient control is dependant on Microsoft ASP.NET AJAX 1.0. The
source could easily be targeted to .NET 3.5 if you wanted. I'm sure
that with a little work it could even be library independent, but I
didn't have that requirement.
The RegClient control has two modes, "Marked" and "All".
Marked:
With the RegClient control set to Marked, only the controls marked with
RegClient="true" or ClientControlID="{yourClientName}" will be registered.
| <Robo:RegClient ID="RegClient1" runat="server" ClientControls="Marked" /> |
All:
With the RegClient control set to All, every control in master
and content pages will be registered unless RegClient="false".
| <Robo:RegClient ID="RegClient1" runat="server" ClientControls="All" /> |
To access the controls in the external JavaScript file, handle the
"ready" event of the "PageControls" object like shown here.
| PageControls.add_ready(function(){ //Write your code here. }); |
All of the controls that have been registered will be available from
the "PageControls" object in JavaScript. Here is an example of accessing
the controls.
| PageControls.add_ready(function(){ $addHandler($get('Button2'), 'click', function() { PageControls.Label1.innerHTML = PageControls.tbText.value; } ); }); |
One caution I would make for using this control is to be careful when you
have the ClientControls setting to "All". This control will find and
register every control that derives from WebControl. If you're using
a GridView or something similar on the page, then there could be many
extra controls that you don't want to get registered.
Here is a screen shot of the RegClient control. There really is only one
setting for this control, but I added a big blob of text as a reminder of
how to use it with other controls. 
When the page renders, this is what the generated output looks like at
at the bottom of the page. 
So, that's it. I hope you find this useful and if you know of any ways
this control could be improved, please let me know.
Thanks
-Joe