How to start learning JQuery in C# VB.Net Application

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 Microsoft start to provide intelligence on writing JQuery from VS 2008.

Now open your Default.aspx page and include the JQuery library just after the “MainContent” section in your page like below:

<script src="Scripts/jquery-1.4.1.min.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 add the below Jquery method just under the above line of reference code:

<script type="text/javascript"> 

        $(document).ready(function() { 
                alert('Hello World !');

Note: As per JQuery document “A page can’t be manipulated safely until the document is “ready.” jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.”

Now run the project. Hope you will get below output:

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 add the below HTML markup like below:

<asp:Button runat="server" ID="btn" Text="Click Me" />

To enable Button Click Event by Jquery add the below script Like first one:

    <script language="javascript">
        $(document).ready(function () {
            $('#btn').click(function () {
                alert('Hello World !');

Now run the project. You will get first an JQuery alert due to first Jquery script. After that you will get a Button. Now click on the Button, you will get another JQuery alert message “Hello World !”.


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.

Not clear yet? Download below code example:
Download Code Example C#        Download Code Example VB.Net

Posted in .Net,, C#, Client, JQuery, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *