Wednesday, February 3, 2010

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.

No comments:

Post a Comment