when do you use ClientID and when do you use ID when passing the control from vb.net to javascript

Question

Dim chk As CheckBox
            If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
                chk = CType(e.Item.FindControl("chkSelectGreater"), CheckBox)
                chk.Attributes.Add("onClick", "javascript:CheckSelectGreater(" + chk.ClientID + ");")
            End If

chk.Attributes.Add("onClick", "javascript:CheckSelectGreater(" + chk.ClientID + ");")

why is clientid being passed to the javascript procedure CheckSelectGreater rather than Id. The javascript procedure is as below

function CheckSelectGreater(SelectedChkBox)
	{
	//debugger
		var i=2;
		var rdI=document.getElementById("dgGreaterTrxns__ctl"+i+"_chkSelectGreater");
		while(rdI!=null)
		{
			if(rdI==SelectedChkBox)
			{
			//alert(SelectedUploadId);
				if(SelectedChkBox.checked==true)
				{					
					
				}
				else
				{
				
				}
			}
			else
			{
				rdI.checked=false;
			}
			i=i+1;			
			rdI=document.getElementById("dgGreaterTrxns__ctl"+i+"_chkSelectGreater");
		}
	}

regards

Manoj gokhale

Answer 1

Hi @Manoj Gokhale,

This is just in case your controls are contained in other containers.

The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control.

For example, ct100_ContentPlaceHolder1_chkSelectGreater. The client id for control will be generated by appending the parent container's(parent control) ID with the original control id with "_" as delimeter. In our example, ContentPlaceHolder1 is the ContentPlaceHolder ID of the master page which is the parent container for chkSelectGreater.

Control.ID Property:Gets or sets the programmatic identifier assigned to the server control.

Control.ClientID Property:Gets the control ID for HTML markup that is generated by ASP.NET.

You can set the value of ClientIDMode to Static, so that the value of ClientID is the same as the value of ID,

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

As pointed out, "often" the asp.net web page processor will change, or re-name controls in question, and this is especially the case when say using a repeater, gridview, listview etc.

And in fact, in many cases, when you use a master + child page setup, then again the asp.net web page processor will often change the name of the control.

Now, often, when writing JavaScript code, and say using jQuery to save some keyboard wearing out?

I often actually set the control in question to "disable" this automatic re-naming of controls. And keep in mind, in "most" cases, this re-name of controls is to prevent name collisions from occurring on a page. After all if you have a simple label with a id="HotelName", then what occurs if you have 10 rows in that GridView or repeater?

Answer:

The control is given a prefix with the gridview, then the control name, then the row number!!!

So, a hard and fast rule?

Well, if the control in question is NOT nested in some kind of data repeater, then there will ONLY be one of that control on the page, and in as above notes, EVEN in that case, you can wind up with a control re-name.

so, I'll often say do this:

            <asp:TextBox ID="TextBox1" runat="server" 
                ClientIDMode="Static" >
            </asp:TextBox>
            <br />

            <asp:Button ID="cmdTest" runat="server" Text="Set text box = hello"
                OnClientClick="mytest();return false;"
                
                />

            <script>
                function mytest() {
                   $('#TextBox1').val("Hello")

                }
            </script>

So, why in above did I use/set ClientIDMode="static". Well, perhaps I am a bit lazy, perhaps I don't want to think or care if asp.net "might" change the name of the ID when the page is rendered.

As in a "lot of" cases, the "id", and .ClientID will in fact be the same, but often, it will not be.

Of course above is often written this way:

            <script>
                function mytest() {
                   $('#<%= TextBox1.ClientID %>').val("Hello")

                }
            </script>

In above, we use a "server" expression for the jQuery select of the text box. And that means I could remove the ClientIdMode="static".

However, the above will NOT help if we have a repeater, or gridview etc. SINCE that means a repeating control, and for a repeating control, then some kind of numbering system will be applied to that control.

So, for non repeating items? I often use "ID", and client mode = static, and that's due to be being somewhat lazy, and not having to type in that "%" server side expression.

So, for controls on a page, you have a choice here. However, for controls inside of a repeating item - say result of some row button click? No, you don't have a choice, and you have to get/grab the server generated "client id" in such cases.