CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Ajax Article » Using JQuery in ASP.Net AJAX Applications – Part 1   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Using jQuery in ASP.Net AJAX Applications – Part 1

By Satheesh Babu
Posted On Jan 27,2009
Article Rating: (Login)
Average Rating: 3
No of Ratings: 3
No of Comments: 11
Print this article.
Category: ASP.Net AJAX/jQuery

Subscribe to our feed!

Using jQuery in ASP.Net AJAX Applications – Part 1

 

jQuery is a light weight JavaScript library which provides fast and easy way of HTML DOM traversing and manipulation, event handling, client side animations, etc. One of the greatest features of jQuery is, it supports an efficient way to implement AJAX applications because of its light weight nature. This article series will help us understand the usages of jQuery in implementing AJAX applications.  In Part 1, we will mainly concentrate on what Microsoft offers to support jQuery development and basic AJAX communications using jQuery.

 

How to use jQuery library in our project

Download the latest jQuery library from jQuery.com and include the reference to the jQuery library file in our ASPX page.

 

<script src="_scripts/jQuery-1.2.6.js" type="text/javascript"></script>

 

In the next section, we will check what Microsoft offers to support jQuery in web development.

 

jQuery support in Visual Studio

As we all know, visual studio 2008 already support JavaScript intellisense. To extend its intellisense support for jQuery library, Microsoft released a patch KB958502 for visual studio 2008 with SP1.

 

One good thing about this patch is, it will add intellisense support to all JavaScript files that we add to our solution. For example, if we have a JavaScript file called “AppValidations.js”, this new patch will look for its corresponding documentation XML file with "-vsdoc.js" appended to its name [AppValidations-vsdoc.js] in the same folder to provide intellisense.  So, we can have all the XML documentation about the JavaScript methods in these doc files which will be displayed with the intellisense.

 

Download the xml documentation file for jQuery from here. Place the file in the same location where jQuery library is added.

 

To summarize the above points,

Ø       Download jQuery library from jQuery official website here.

Ø       Apply the hotfix KB958502 for your Visual studio 2008 SP1. If you don’t have SP1 installed already, you can download it from here.

Ø       Download the jQuery doc file from here. Include this file in the same folder where jQuery library is present.

 

 

You can now start using jQuery intellisense in Visual Studio 2008.

 

Using jQuery Intellisense in external JavaScript file

To use the jQuery intellisense in an external JavaScript file, use the following configuration line on top of your JavaScript file.

 

/// <reference path="jQuery-1.2.6.js"/>

 

The Path should take the original path where the jQuery file is placed in your project.

 

In the coming sections, we will see more about how jQuery will assist in implementing AJAX applications.

 

AJAX Support in jQuery

jQuery supports AJAX interactions very efficiently through JSON communications.  JSON is JavaScript Object Notation and it is simply key- value pairs, separated by commas and enclosed in curly braces.  jQuery supports both GET and POST method of communications.

Refer the jQuery AJAX documentation here. 

 

Moving forward, we will understand how to send AJAX GET and POST request using jQuery.

 

Consider, we are implementing ticket booking system. We will implement a feature where a warning message is displayed if the user enters more number of tickets than available at that moment by sending an AJAX request to the server.

 



ASP.Net Hosting

Recent Articles

GET Method

     <script src="_scripts/jQuery-1.2.6.js" type="text/javascript"></script>

        <script language="javascript">

            $(document).ready(function() {

                $("#txtNoOfTicketsByGet").change(function() {

                    $("#Error1").html("");

                    var ticketsReq = $("#txtNoOfTicketsByGet").val();

                    $.get("GetAvailableTickets.aspx", function(result) {

                        var ticketsavailable = parseInt(result);

                        if (ticketsReq > ticketsavailable) {

$("#Error1").html("Only " + ticketsavailable + " tickets are available!");                        }

                    });

                });               

            });

        </script>

 

    <div>

    <div id="TicketsByGET">

    No of Tickets:<asp:TextBox ID="txtNoOfTicketsByGet" runat="server"></asp:TextBox>

    <div id="Error1" style="color:Red;"></div> 

    </div>

    </div>

   

CodeBehind

public partial class GetAvailableTickets : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

//Hardcoded no of tickets available

        int NoOfTicketsAvailable = 5;

        Response.Write(NoOfTicketsAvailable.ToString());

        Response.End();

 

    }  

}

In the above code, we are sending GET request to the page GetAvailableTickets.aspx to get the available number of tickets. The call-back function in $.get() statement will be executed once the server execution is complete and displays an error message if the number of tickets entered is more than the available number of tickets.

 

 In the next section we will implement the same feature but with post method[$.Post()]. We will also send the entered number of tickets as a input data in a JSON notation to check the available number of tickets in server side. Refer the below code,

 

POST Method

     <script src="_scripts/jQuery-1.2.6.js" type="text/javascript"></script>

        <script language="javascript">

            $(document).ready(function() {

 

$("#txtNoOfTicketsByPOST").change(function() {

                    $("#Error2").html("");

                    var ticketsReq = $("#txtNoOfTicketsByPOST").val();

                    $.post("GetAvailableTicketsByPOST.aspx", { TicReq: ticketsReq }, function(result) {

                        if (result != "") {

                            $("#Error2").html(result);                           

                        }

                    });

                });

            });            

        </script>

 

    <div>

    <div id="TicketsByPOST ">

    No of Tickets:<asp:TextBox ID=" txtNoOfTicketsByPOST" runat="server"></asp:TextBox>

    <div id="Error2" style="color:Red;"></div> 

    </div>

    </div>

 

GetAvailableTicketsByPOST.aspx.cs    

public partial class GetAvailableTicketsByPOST : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        string ticReq = Request["TicReq"];

        int tics = int.Parse(ticReq);

       

        int NoOfTicketsAvailable = 5;

        if (tics > NoOfTicketsAvailable)

        {

            Response.Write("Only " + NoOfTicketsAvailable.ToString()+" are available!");

            Response.End();

        }

    }

}

Thus, we have seen the implementation of AJAX request through jQuery. Refer the below figure for the output when we enter more number of tickets than available.

 

 

Download the code attached with article and see it in action!

Downloads

Download SourceCode 

Conclusion

We have seen how to implement AJAX application with the help of jQuery in part 1 of this article. In Part 2, we will see how jQuery can be used effectively in AJAX application with ASP.Net AJAX framework support. The above example can be very well implemented by using Paging methods in ASP.Net AJAX. In Part 2, we will implement the above example using Page methods and consume it through jQuery.

 

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    ssd
    dsdsdsds
    Great Article
    Hi Satheesh..
    Very good article.
    Simple and interesting.
    Great Article
    Hi Satheesh..
    Very good article.
    Simple and interesting.
    RE:Alphabytes
    Please make sure if you have foolwed the naming format for the vdoc file correctly as specified in the article!
    Alphabytes
    mine does not work ?? i installed VS08 sp1 and the hotfix
    but still it does not work, i have also put both the files in the same directory.!! :)
    kindly help
    good article
    good article~~~
    xx
    YESSSSSSSSSSSSSSS
    RE:mr
    Hi Fisa,
    You can't use jQuery intellisense in Visual Studio 2003, 2005.
    mr
    can use for vs 2003?
    RE:can we use for vs 2005
    Hi ph,

    You can use JQuery in ASP.Net project using vs 2005 but there is no intellisense support for this..
    can we use for vs 2005
    can we use iquery for visual studio 2005