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

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.