Introducing JQuery for ASP.NET Developers

Waqas Anwar
24 October 2010
47750 Views

If you are a web designer or developer or you are involved with any kind of website development, I am sure you have heard about "JQuery" from your clients, from your friends or colleagues or from any online article. JQuery is a lightweight open source JavaScript library that in a relatively short span of time has become one of the most popular libraries on the web. This is my first tutorial on JQuery and I am targeting all those ASP.NET developers who want to use JQuery in their projects but still don’t know from where to start.

According to JQuery.com, JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development.

The major benefits of using JQuery for latest web applications is that it is very lightweight JavaScript library as its minified version is just few kilobytes in size which means it loads faster on the client. It supports latest CSS3 selectors and standards and it supports almost all the modern web browsers such as IE 6.0+, FireFox 2+, Safari 3.0+, Opera 9.0+ and Chrome.

The good news for ASP.NET developers is that Microsoft has partnership with JQuery and the latest version of Visual Studio 2010 ships with built in JQuery library and full intellisense support. Even if you developing web applications using Visual Studio 2008, JQuery is always available free to download and use in your projects. You can get the latest version of JQuery from its official website JQuery.com.

Once you have downloaded JQuery you are ready to play with it. Create a Website project in Visual Studio and add JQuery script file in Scripts folder as shown below:


JQuery Script Files

Next you need to add the JQuery script file reference in your web page. You can drag the file from solution explorer and drop it inside the <head> tag in your page.

Add JQuery script reference

Once you have JQuery file reference added to the page, you can do so many magical things on you page but for the purpose of this tutorial and to show you a simple example I am creating two ASP.NET button controls and a Panel control on the page. Clicking "Show Panel" button will make the panel visible with JQuery slide down effect and clicking the "Hide Panel" button will hide the panel with JQuery slide up effect.
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />

<br /><br />

<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" style="display:none;" BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">

   Hello World!

</asp:Panel>

In order to tell the browser to perform some action using JQuery as soon as the document is ready or loaded, you need to add the following script block in the <head> section of your page. JQuery ready method specifies a function to execute when the DOM is fully loaded and constructed by the browser and usually the best place to attach all other event handlers and run other JQuery code.
<script type="text/javascript">

   $(document).ready(function() {
     
      // add JQuery or JavaScript code here

   });

</script>

Inside the ready method handler function, first I am creating some variables to access ASP.NET server controls by their client ids.
<script type="text/javascript">

   $(document).ready(function() {

      var Button1 = $("#Button1");
      var Button2 = $("#Button2");
      var Panel1 = $("#Panel1");


   });

</script>

If you are using Master Pages and your controls are inside Content pages or inside any other container such as Panel or Placeholder control then ASP.NET generates client Ids which are different then their correspondent server ids. So you may not be able to access your server side controls with the typical JQuery selector mentioned in the above code example. In that case you can use any one of the following techniques:
$("#'<%= Button1.ClientID %>'");or
$("[id$='_Button1']");
You can read more about these techniques at one of my HOW TOs available at "How to Access ASP.NET Controls client id in JQuery".

Next I am binding JavaScript click event handlers with both buttons using JQuery click method, which takes a function handler as a parameter and execute the function every time the element click event is triggered. The complete script block code is shown below:

<script type="text/javascript">

   $(document).ready(function() {

      var Button1 = $("#Button1");
      var Button2 = $("#Button2");
      var Panel1 = $("#Panel1");

      Button1.click(function (e) {
         Panel1.slideDown();
         e.preventDefault();
      });

      Button2.click(function (e) {
         Panel1.slideUp();
         e.preventDefault();
      });


   });

</script>

Build and run your project and you will see Panel control sliding up and down with smooth animation effect.

JQuery show hide

In the above example, I used slideDown/slideUp JQuery effects, you can also use JQuery show/hide or fadeIn/fadeOut methods if you want different effect on your page. You may be wondering what JQuery e.preventDefault() method does. JQuery e.preventDefault() method disables the default action of the element so in the above case when user will click ASP.NET button it will execute our JQuery code and prevent the button to post back to the server.

I hope, you have found this tutorial useful and it will give you some basic knowledge of JQuery and its use in ASP.NET. I will recommend you to visit JQuery.com for complete list of JQuery selectors, events and methods. I also hope you will continue visiting my website in future as I am writing more tutorials on JQuery for you.