jQuery Find .NET Controls


Sponsored Links

73058_New Scooba® 230 Floor Washing Robot + Free Shipping!

 

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 %>'). ....
   });