<

[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x

jQuery Selectors in asp.net 2.0 - 3.5

Published on
10,343 Points
4,143 Views
2 Endorsements
Last Modified:
Steve Krile
Process-first, software second.
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:

     
$("#<%=MyInputField.ClientID%>")

Open in new window


I suppose it just offends my sense of decency to put inline VBScript on an .aspx page.  So, I started looking at the jQuery selector core and found a nice little gem.  Now, it's not perfect, and there are certainly ways for it to fail, but in general I've found that if you feed the following the proper context, it always works:

Given an html element like this:

       
<asp:TextBox runat="server" id="MyInputField" />

Open in new window


Which gets rendered like this (since I use Master pages)

     
<input type="text" id="c100_Panel1_MyInputField" />

Open in new window


You can select the input field like this:

     
$("input[id$=MyInputField]");

Open in new window



The great part about this from my point of view is that my jQuery markup will match my .net markup.  This leads to the ability to loop through jQuery objects and do a bunch of things without needing to first determine the .net rendered client ID.  Also, I can use .net runat=server objects with jQuery and they will work together.  In other words, if I want to take some fields in an asp:Panel and paint them pretty or use JSON to complete them, I can do that with jQuery.  But if I want to then take the values of those fields and do server-side work with them when a button is clicked, the value of those fields will be available in my .vb file as part of the page controls.

If you are concerned about controls with ID's that match across multiple parts of you page, you could narrow the scope of the selector like this:

HTML:

<asp:Panel runat="server" id="MyPanel1">
    <asp:TextBox runat="server" id="MyInput" />
</asp:Panel>

<asp:Panel runat="server" id="MyPanel2">
    <asp:TextBox runat="server" id="MyInput2" />
</asp:Panel>

This above setup would cause problems with my original design because both MyInput and MyInput2 would match the selector.  So, we could do a selector like this:

$("input[id$=MyInput]","div[id$=MyPanel1]")

Open in new window


This works based on jQuery's selector model $([object],[object context]).  That object context part is optional and many times not necessary, but if you want jQuery to stick to one section of your document, this is a handy way to do it...and we can use the .net Panel object because we are referring to it with the id$=MyPanel1 trick.

Pretty handy stuff.
2
Comment
Author:Steve Krile
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 60

Expert Comment

by:Kevin Cross
skrile, I have read your "Pimp Exchange" article a number of times now and smile EVERY time I read the title by the way...I had not yet read this, though, for whatever reason. Very nice tip/trick. You have my Yes vote above!
0
 
LVL 16

Author Comment

by:Steve Krile
Thank.  Just emerging myself in Knockoutjs now.  Mind is swelling.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Join & Write a Comment

Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …
Other articles by this author

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month