CODEWITHSUNDEEP
asp.netjavascriptuser-controls
user76071
user76071

Reputation:

asp.net control id's in separate JS file

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

Upvotes: 2

Views: 3474

Answers (4)

Amgad Fahmi
Amgad Fahmi

Reputation: 4349

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

Upvotes: 0

cllpse
cllpse

Reputation: 21727

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.

Upvotes: 0

Chad Grant
Chad Grant

Reputation: 45382

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.

Upvotes: 0

Canavar
Canavar

Reputation: 48088

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>

Upvotes: 1

Related Questions