jQuery Find .NET Controls


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

jQuery Find .NET Controls

Here I've put some code samples which I've used to get jQuery to find .NET controls on a page, which can be hard to locate due to the nature of .NET controls, which have dynamic IDs. It gets harder for jQuery to find the .NET controls when we introduce other .NET elements such as Master pages and Login controls.

ClientID

The .ClientID property belongs to .NET controls and provides the full ID of the control as it appears on the client in the HTML, once the ID has been generated. The client ID of the control won't be known until the page is produced, so you can't know for definite when your coding the page due to several factors which affect the ID, so you can use the ClientID property


  $('#' + '<%=label1.ClientID %>')


jQuery, Master Pages and the Form

Master Pages can add an additional part to the final client ID, and it makes it harder to actually track the object, so you can use FindControl on the Master page to help locate the control to get it's client ID:


  $(document).ready(function() {
    $('#' + '<%=Master.FindControl("form1").ClientID %>'). ...;
   });


Here we reference the Master page and use it's FindControl method to locate the form on the page called 'form1', and then call .ClientID on our Form, and this gives us the ID we need to give to jQuery to reference our Form. Notice how we use the (document).ready method to ensure the page has loaded before we start to try and find the controls on the page.

jQuery and Login

When we use the ASP.NET Login control, which we can customise, the control has several .NET controls located inside it, such as TextBoxes and Buttons. In a similar fashion as with the Master Page, we reference the Login control, call it's FindControl method to find a button we have called 'button1', and get the button's ClientID, again using (document).ready.


   $(document).ready(function() {
     $('#' + '<%=Login1.FindControl("button1").ClientID %>'). ....
   });


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.