My jQuery Primer

So you have been reading about jQuery and want to dive in and try some? I recently attended the MSDN Dev Conference in Detroit where jQuery integration and client-side programming were very hot topics. With Microsoft’s acceptance of the open source library, I figured I would give it a try. This is what I have learned so far. Before I can show you what you can do with jQuery, I think I should probably show you how to get a reference to jQuery into your code. In ASP.NET you can add your reference directly to your Script Manager

<asp:scriptmanager id="pageScriptManager" runat="server">
<scripts>
<asp:scriptreference path="/client/jquery-1.3.1.min.js" />
</scripts>
</asp:scriptmanager>

What does jQuery have to offer? First and foremost, jQuery has given me power over the Document Object Model (DOM)! jQuery Selectors are the greatest thing since sliced bread, no lie. Being able to EASILY find an object or group of objects in the DOM by ID, CSS Class, or by HTML Tag is something web developers have long needed. To select an object from the DOM by ID would look like this:

$('#ID_Goes_Here')

To select an object from the DOM by CSS Class would look like this:

$('.CSS_Class_Name_Goes_Here')

To select an object from the DOM by HTML Tag would look like this:

$('<tag_goes_here>')

With jQuery Selectors being so simple, it allows the developer to easily select an object or a group of objects. Now that we can select objects, what can we do with them? This is where the power of Selectors really builds into what else you can do. In a web application, round trips to the server to manage UI is wasteful. I avoid JavaScript like the plague because it’s a pain in the ass. jQuery makes client-side UI management feel like climbing the rope in gym class. For example, if I have a label that I want to be rendered but not visible I could create the label.

<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />

And later on in jQuery I can hide it like this.

$('#Label4').css('display', 'none');

It’s nice to be able to easily select an object and modify it, but what if you have a whole group of items you want to modify? With jQuery, you can EASILY loop through a collection of objects. In this example I have a group of labels.

<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />

Now I want to update the text of each label to include its ID. I am going to loop through each object in the DOM with a CSS Class of .myLabel.

$('.myLabel').each(function() { $(this).append(this.id); });

What the jQuery code above does is execute a function that will append the object’s ID to its text value. Notice the Selector inside the function $(this). The syntax is used to find the loop’s current object in the DOM. I do a lot of web work where I create controls on the fly. For my last example, I just wanted to show a way to quickly insert some HTML into a container object. I will start with a Panel AKA a DIV.

<asp:panel id="Panel1" runat="server" />

Now I am going to use jQuery to select my DIV and add some HTML to it.

$("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>");

Now I have shown you some snippets here and there, let me show you what my page actually looks like.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>jQuery Examples</title>
	<link href="/style/jQuery.css" rel="Stylesheet" type="text/css" />

	<script type="text/javascript">  function pageLoad() { $('.myLabel').each(function() { $(this).append(this.id); }); $('.myLabel').css('color', '#FFFFFF').css('font-size', '30px'); $('#Label4').css('display', 'none'); $("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>"); } </script>

</head>
<body>
	<form id=	<form id="pageForm" runat="server">
	<asp:scriptmanager id="pageScriptManager" runat="server">  <scripts>  <asp:scriptreference path="/client/jquery-1.3.1.min.js" />  </scripts>  </asp:scriptmanager>
	<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:panel id="Panel1" runat="server" />
	<br />
	</form>
</body>
</html>

Links
jQuery: http://www.jQuery.com/
Object Model: http://en.wikipedhttp://en.wikipedia.org/wiki/Document_Object_Model

21 thoughts on “My jQuery Primer”

  2. Sean,

    Welcome to the club. I have been working with jQuery for about a month now and I am a convert. It is infectuous.

    I now have to have a very good reason to use an ASP.net server control instead of an HTML tag.

    Another benefit is that the use of the selectors has really broadened my understanding and use of CSS.

    Paul

  7. There is an error in your first label example. You use: $(‘#Label4’).css(‘display’, ‘none’);, but the ID of the label will change into “ASP.Net” ID, when the page is rendered.

    1. @Kenneth The ID should only be different if the control is contained within another .NET object. This is something that I have heard is going to change in ASP.NET 4.0. The ID you set will be the client ID. You can build the jQuery code dynamically and use Control.ClientID

  9. This is great, but I have worked with JQuery in ASP.NET, and $(‘#Panel1’), or any of the other server control id’s in there won’t work, as asp.net renders the controls with different id’s. The syntax would rather be $(‘#’)

    1. @Patt See my reply to Kenneth. Leave some example code and we can see if we can figure it out.

  10. Andre,

    This is an extremely interesting article bring out the how JQuery can be easily integrated into our ASP.NET applications. Well done.

    Ray

  12. I’s reading some other jQuery starter articles. Happy to see this one too.
    Really it had helped me.
    Thanks.

  14. Pingback: Twitted by worksmarter

  16. Hi,

    Nice post. But unfortunately you cannot always access ASP.NET controls in that simple way in jQuery.

    You have to use: $(“#<%=yourControl.ClientID”)

Comments are closed.