JQuery in ASP.Net

Let’s see using JQuery in ASP.Net in this blog. We will see few examples for use of JQuery in ASP.Net.

1) Displaying an alert on Button click: -
Consider a button in our code.
<asp: Button ID =”Button” runat=”server” Text=”Show” />
Now once document is loaded we want to perform some action. We will tell browser to do that action using JQuery. For that we need to write a piece of code which is give below. Consider that we want to get an alert saying Welcome then we will write as following in code.
<script type=”text/javascript”>
$(document).ready(function() {
$(“#Button1”).click(function() {
alert(“Welcome!”); }) ;
});
</script>
Now let’s see details of the code in JQuery.
a) $ Sign - In JQuery, the most powerful symbol is the dollar sign. A $() function normally returns a set of objects followed by a chain of operations.
b) Document. Ready() – In JQuery, this is the most commonly used command. It gets executed only when page gets loaded. Usually code is placed inside this block.

2)Displaying datepicker: -
We can use datepicker in ASP.Net using JQuery. For that we have to write following code.

<script type=text/javascript>
$ (function () {
$ (“#datepicker”). datepicker ();
});
</script>
<div class=demo>
<p>Date: <input id=datepicker type=text></p>
</div>

In this code we have taken a textbox as an input in which we will get date. When we click on that textbox a calendar will be opened below attached to textbox. In that calendar we have to choose a date. If you don’t want to select date you can simply press Esc to escape. If date is selected then you will see that date in your textbox.

For including datepicker in your script, you need to download datepicker’s plugin for JQuery.

JQuery

JQuery is a lightweight open source JavaScript Library. It supports many browsers. It allows us to elegantly and efficiently traverse through HTML elements with minimum lines of code. In few days only JQuery has become very popular JavaScript Library. Few of its characteristics are: -
1) Light Weight
2) Cross browser compatibility
3) Simplicity

If any code is of 10 lines with traditional JavaScript, we can write in a single line using JQuery. Many people get confused between JavaScript and JQuery. Many think they are same. But it’s not! JavaScript is language whereas JQuery is a library which is written using JavaScript. Latest version of JQuery is 1.4.1. They provide two copies of JQuery –
1) Minified (23 kb zipped)
2) Uncompressed (157 kb)

Minified versions are used for production developments while uncompressed versions are used for debugging and reading. Out of these two, minified versions are best inspite of having large file size. You can download JQuery from here

There are many plugins available for JQuery which provide UI elements or special effects. Such plugins require very little JavaScript code but can do amazing things. Using JQuery is very simple, you should just simply add a like to the jQuery.js file in your html document.

We will see more on JQuery in next blogpost.