asp.net control id's in separate JS file

Question

Hi,

I have a custom control with a bunch of buttons and inputs. I also have a JS file where all my code goes for easy debugging.

How can I get the ClientIDs of the controls in the JS file?

My workaround at the moment is to have a script block at the top of the control and to put all the JS in there. I'd like some separation though.

Many thanks

Answer 1

Put your controls ID's into page as global variables. Then in your external javascript files use this global variables as reference to your controls.

In your custom control, page or user control :

string script = "<script>var myButtonID = '" + myButton.ClientID + "';</script>";
if (!Page.ClientScript.IsClientScriptBlockRegistered("myGlobalVariables"))
{
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "myGlobalVariables", script);
}

And in your external JS file :

var myButton = document.getElementById(myButtonID);
//var myButton = $('#' + myButtonID);

EDIT : Here is the way to render your controlIDs in your aspx / ascx files :

<script language="javascript">
     var myButtonID = '<%= muButton.ClientID %>';
</script>

Answer 2

If the separation is really important to you, moving forward you may want to consider jQuery which has loads of ways to find your controls.

Answer 3

I usually pass an object literal as an argument to my functions. This approach takes away the need of using global variables and makes the disconnect from ASP.NET controls/JavaScript functions a little less complex and more verbose:

JavaScript:

function fn(ids)
{
    var controlOne = ids.controlOne,
        controlTwo = ids.controlTwo,
        controlThree = ids.controlThree;
}

ASP.NET:

fn({
    controlOne: "<%= ControlOne.ClientID %>",
    controlTwo: "<%= ControlTwo.ClientID %>",
    controlThree: "<%= ControlThree.ClientID %>"
});

Another approach would be to target your inputs by class-names:

ASP.NET:

<asp:TextBox ... CssClass="controlone" />
<asp:TextBox ... CssClass="controltwo" />
<asp:TextBox ... CssClass="controlthree" />

JavaScript:

function fn()
{
    var controlOne = document.getElementsByClassName("controlone"),
        controlTwo = document.getElementsByClassName("controltwo"),
        controlThree = document.getElementsByClassName("controlthree");
}

All of this can be simplified greatly by using jQuery or some other JavaScript framework.

Answer 4

Or there is another approach that u will define an object is waiting a json object like this

this.Collection  = {'controlName': '<%= controlId.ClientID %>' } ;

Put this at the end of your asp page , the first part will refer to any string to remember your control name and the second part is the real clientID

Inside your javascript file all you need to do call your collection with the control name you assigned

alert(Collection['controlName']) ; // the result will be the clientid for the server side control

hope it work with u cause it's seems simple to me