Gettting ClientIDs of asp.net controls in an external javascript file


When maintaining external javascript files for our webpages the biggest hurdle we face is the getting clientID of our server side controls in the javascript file. Let me demonstrate a workwround for this that I usually adopt.
Step 1:
In the page load event create an array of json objects representing the clIentIDs of all the controls that we would be requiring to use in javascript functions. Store this in a javascript global variable using window::onload function.

private void SaveControlClientIDs()
{
       
    System.Text.StringBuilder ctlObj = new System.Text.StringBuilder();
    ctlObj.Append("[");
    ctlObj.Append("{""Id"":'" + ddlEmployee.ClientID & "',""Type"":'" + ddlEmployee.GetType().ToString() + "',""DefaultValue"":'0'},");
    ctlObj.Append("{""Id"":'" + txtName.ClientID & "',""Type"":'" + txtName.GetType().ToString() + "',""DefaultValue"":''},");
    ctlObj.Append("{""Id"":'" + txtEndDt.ClientID & "',""Type"":'" + txtEndDt.GetType().ToString() + "',""DefaultValue"":''}");
    ctlObj.Append("]");
    string bodyOnloadScript = "<script type='text/javascript'>function body_onload() { ctlIds=" + ctlObj.ToString() + ";}</script>";
    Page.ClientScript.RegisterStartupScript(this.GetType(), "onload", bodyOnloadScript);
  
}

Step 2:

In your javascript file use the following function to retrieve the clientID using the actual id of your control

var ctlIds; //this is the global variable which will store the json objects
function GetCtlClientId(id) {
    var arr = ctlIds;
    var res = ”;
    var i = 0;
    for (i = 0; i < arr.length; i++) {         if (arr[i].Id.indexOf(id) != -1) {             res = arr[i].Id;             break;         }     }     return res; } [/sourcecode] In .NET 4.0 the issue of ClientIDs has been addressed to an extent. Till you move to 4.0 hope this helps:-)

3 comments

  1. natacha

    Hi I am new in .net programming.

    I am facing the same problem. I have an external js file and the I can´t get the ClientID. As I have read doesn´t work. I have tried uour method but I didn´t get the linh of the methods.

    As you said I created the SaveControlClientIDs(), and I call this on PageLoad(). I dont know where to call the js fucntion.
    could you please help me?

    Thank you
    Natacha

    • Subi Thayamkery

      Wherever you need the client ID of say textbox txtName just use document.getElementById(GetCtlClientId(‘txtName’)) in your javascript.
      If you are in .net 4.0 you do not need to use this method. You can set up the ControlIDMode=”Static” property for each asp.net control that you want to expose to your external js file. Then you can reference each control directly by name. Hope this helps.

      • natacha

        Hi,

        when I use the GetCtlClientId javaScriptFile, the array ctlIds undefined.

        But as I am using .net4 with ControlIDMode=”Static” and call the object by ID injavaScript it worked perfectly.
        I want to know how to solve the problem of the undefined array -> ctlIds .

        Thank you very much. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s