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