|
Using jQuery with ASP.NET - A Beginner's Guide
|
|
Rating: 66 user(s) have rated this article
Posted by: Suprotim Agarwal,
on 11/18/2008,
in category "jQuery and ASP.NET"
Views: this article has been read 82225 times
Abstract: This article is a guide for getting started with jQuery using Visual Studio 2008. The article also shows you how to use Visual Studio 2008 intellisense feature to develop jQuery and ASP.NET applications.
Using jQuery with ASP.NET - A Beginner's Guide
Did you hear about jQuery.. NO...? It’s fantastic!! Well if you have been hearing those words more too often from your colleagues but haven’t had the chance to explore jQuery yet, then here’s this beginner guide for you to get started with jQuery and ASP.NET.
Ok, the million dollar question - What is jQuery anyways?
jQuery is a fast, lightweight JavaScript library that is CSS3 compliant and supports many browsers. The jQuery framework is extensible and very nicely handles DOM manipulations, CSS, AJAX, Events and Animations.
What is the difference between JavaScript and jQuery?
JavaScript is a language whereas jQuery is a library written using JavaScript.
Where can I download jQuery?
What has Microsoft got to do with jQuery?
In ScottGu’s blog, there was an announcement made a few weeks ago that Microsoft will be partnering with the jQuery team and shipping jQuery with Visual Studio in future. Also, jQuery intellisense annotation support will be available as a free web-download. Barely a few weeks after the announcement, Microsoft during the PDC event (held in the last week of October), announced that Visual Studio 2008 now supports jQuery Intellisense through an additional file available from jQuery. This file can be downloaded from here. For those interested, the release notes can be found here 1.2.6 (Release Notes).
A few days ago, Microsoft also released a VS2008 SP1 Hotfix to support all JavaScript files including jQuery intellisense for Visual Studio 2008. Note that this hotfix works only if you have VS 2008 with SP1 or Visual Web Developer Express Edition with SP1. You can download the Hotfix from here (Downloads tab).
Checking out jQuery Intellisense in Visual Studio 2008 with SP1
Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add. The structure will look similar to the following:
Now drag and drop the jquery-1.2.6.js file from the Solution Explorer on to your page to create a reference as shown below
Note: Since you have applied the hotfix, you do not have to manually add a reference to the jquery-1.2.6-vsdoc.js file in your page. Once the reference to the runtime library has been added, Visual Studio automatically searches for the ‘vsdoc’ file and loads it. You just need to keep both the runtime library and the documentation file next to each other.
To test intellisense, add a <script> block and key in ‘$(‘. You will get an intellisense similar to the one shown below:
Show me some examples
This article would be incomplete without examples. So let us quickly see some.
Example 1 – Display an alert on asp:Button click using jQuery
Add a Button element to the page as shown below:
<asp:Button ID="Button1" runat="server" Text="Button" />
Now in order to tell the browser to perform some action using jQuery as soon as the document is ready or loaded, use this block:
<script type="text/javascript">
$(document).ready(function() {
// add code here
});
</script>
Add your code in the function block
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
alert("Hello world!");
});
});
</script>
On clicking the button, you get an alert code similar to the following:
Example 2: Demonstrating some animation on button click using jQuery
Our first example was a simple ‘Hello World’ example to keep up with the tradition while introducing a new language. Let us enhance our sample and display some animation using jQuery. We will animate an <asp:Panel> on a button click when the page loads. This sample is loosely based on the demo over here:
To do so, add a HTML button and a <asp:Panel> to the page as shown below:
<form id="form1" runat="server">
<input id="btnAnimate" type="button" value="Animate" />
<asp:Panel ID="Panel1" runat="server">
Some sample text in this panel
</asp:Panel>
</form>
Also add some css to beautify the div (remember asp:Panel renders as a <div>). The <style> tag has been kept in the <head> element of the page.
<style type="text/css">
div {
background-color:#D5EDEF;
color:#4f6b72;
width:50px;
border: 1px solid #C1DAD7;
}
</style>
Finally add the jQuery code to animate the panel on button click. We would be using the ‘animate’ function. Observe how the intellisense helps us out with the parameters
After adding in the parameters for the animate() function, the complete code will look similar to the following:
<script type="text/javascript">
$(document).ready(function() {
$("#btnAnimate").click(function() {
$("#Panel1").animate(
{
width: "350px",
opacity: 0.5,
fontSize: "16px"
}, 1800);
});
});
</script>
Here the animation occurs while changing the width, opacity and font properties of the Panel when the button is clicked. The value ‘1800’ represents the number of milliseconds to run the animation.
Run the sample and see the Panel getting animated as shown below:
Well that’s it for an introduction. Remember that this article is only an introduction and in no way demonstrates the capabilities of jQuery. I have written an EBook which demonstrates the capabilities of doing client side development in ASP.NET using jQuery. It's called "51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls". In the forthcoming articles, we will see how jQuery can further be used with ASP.NET and AJAX.