AJAX & ASP.net, Referencing server controls in external file

Question

I've got some JavaScript in an ASP.NET page that looks like this:

var list = $get('<%=Topics.ClientID %>');

I have many functions written now where this syntax is used, and I would like to centralize my JavaScript and move this into an external JavaScript file. This breaks however, since 'Topics' cannot be found.

What is the best strategy for getting this to work? I assume I should pass the control/control information as a parameter to the function, but I can't seem to get the syntax to work. Any suggestions?

Answer 1

You should create a javascript method from inside the usercontol which returns the client side element. Then in your other page/control, just access that method

In User Control

 <script language="javascript">
     function GetTopics() {
          return = $get('<%=Topics.ClientID %>');
     } 
 </script>

In other page/control

 <script language="javascript">
     var list = GetTopics();
 </script>

Edit - The problem you are facing is you need Topics.ClientID where it doesn't exist. So the only real way to bridge that gap is to put it in a common place. If you really don't want to do that, you can try and select your element by some other criteria. If you are using jQuery, you could mark an element with a class of Topics then find it with $(".Topics").

Answer 2

if you know that you only have one server control called "Topics" per page, and you use naming conventions you can inherit from whatever the control Topics is (maybe it's a HiddenField? you don't specify) and override its ClientId getter to return its server id like this:

http://andreascode.wordpress.com/2009/04/27/tiny-drips-of-aspnet-juice/

then you can know in your javascript files that there will be a hidden field in the page with the id set to "Topics" and use that directly.

depending on your domain/situation this could either save you a lot of time or screw you over big time.

Answer 3

It's a common problem for ASP.NET JS development. As for me, I'm using same approach each time and it looks fine.

I'm used to OOP in Javascript, so most my JS external files look like:

function CouponManager()
{
}

And in .aspx code i do:

<script language="javascript">
    var couponManager = new CouponManager();
</script>

If I need to pass some parameters I change the declaration of class to:

function CouponManager(params)
{
    // .. stuff here

    this.initialize = function(initParams)
    {
       // .. accessing initParams variable for server control IDs
    };

    this.initialize(params);
}

And from .aspx code I do the following:

<script language="javascript">
    var couponManager = new CouponManager
    ({
        txtCouponNameId = '<%= txtCouponName.ClientID %>',
        txtCouponDescriptionId = '<%= txtCouponDescription.ClientID %>'
    });
</script>

This approach allows me to separate JS from .aspx page and have all server control dependencies in a single tag.