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:
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.
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.
Inside the ready method handler function, first I am creating some variables to access ASP.NET server controls by their client ids.
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 %>'");
Build and run your project and you will see Panel control sliding up and down with smooth animation effect.
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.