Monday, May 10, 2010

Introduction on using JQuery in Asp.net application




Please visit my new Web Site WWW.Codedisplay.com



In a single line jQuery is a fast, lightweight client side library that is CSS3 compliant and supports almost all browsers. The jQuery framework is extensible and very nicely handles DOM manipulations, CSS, AJAX, Events and Animations. By using JQuery you can dramatically reduce your client side code. Jquery code is completely separate from your HTML code. Around the world many JQuery gurus develops handy plugins for you which you can use to boost up user experience while browsing your application. You can easily integrate JQuery with your AJAX application as well as Microsft start to provide intelligence on writing JQuery from VS 2008.

OK now start.

To Start JQuery first visit the JQuery site and download latest JS file.

Now create a project. Add a folder named Script and add the JQuery js file in this folder.

Now open your Default.aspx page and include the JQuery library just after the Title tag within Head section in your page like below:
<script src="Script/jquery.js" type="text/javascript"></script>

Now your application is ready to use JQuery. Ok first we try to write Hello World ! as usual. For this modify your default.aspx page Head tag HTML markup like below:
<head runat="server">
    <title>An introduction to JQuery</title>
    <script src="Script/jquery.js" type="text/javascript"></script>

    <script type="text/javascript"> 

        $(document).ready(function() { 
                alert('Hello World !');
            });
    </script>    
</head>

Now run the project & you will get below output:

JQuery 1

Another example:
Add a button control in your page & run the page & click on the button. You will get Hello World ! message again. To do that modify your default.aspx page Head tag & Body tag HTML markup like below:
<head runat="server">
    <title>Untitled Page</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
    
    <script language="javascript">
            $(document).ready(function() {          
                $('#btn').click(function() {
                    alert('Hello World !');
                });
            });
    </script>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button runat="server" ID="btn" Text="Click Me" />
    </div>
    </form>
</body>

The output will be:

JQuery 2

If you look at the button control HTML you wouldn't get any extra code to implement this click example like javascript. This is the beauty of JQuery which tell us that "Separate javascript code from HTML mark-up".

Now read the documentation from jquery site to enrich yourself and keep in mind that JavaScript is a language whereas jQuery is a library written using JavaScript.

0 comments:

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash