Click here to Skip to main content
13,803,077 members
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 4 May 2011
Licenced CPOL

Ajax Handling in ASP.NET by jQuery

, 4 May 2011
Rate this:
Please Sign up or sign in to vote.
Handling Ajax in ASP.NET through jquery with methods load(),$.get(),$.post() and $.ajax()

View Output

Output Image


By using Ajax, we can create rich, interactive Web based applications. Using the help of jQuery, you can easily implement it in your Web pages. Using Ajax, you can communicate with the server without page refresh, and this feature makes Web based applications like desktop applications.

In jQuery, one of the most popular is the load() function. You use the load() function to display downloaded data.


load(url, parameters, callback)

Here, url is the URL of the resource you’re fetching on the server, parameters is a JavaScript object whose properties holds values you want to send to the server, and callback is a callback function that jQuery will call when the Ajax operation is complete.

If you include parameters, which is a JavaScript object with properties and values corresponding to the values you want to send to code on the server, load() sends that data using the POST method. If there are no parameters object, load() uses GET.

The load() function is handy for loading data from Ajax operations into a wrapped element set. It uses the GET method to communicate with the server, unless you pass data to the server, in which case it uses POST. For this, jQuery provides the $.get() and $.post() functions.

The arguments of the $.get() and $.post() function are the same as for the load() function.


$.get(url, parameters, callback) 


$.post(url, parameters, callback) 

The number of the Ajax functions available in jQuery: load( ), $.get( ), and so on. Those functions are good as quick Ajax solutions, but they’re not complete solutions. Like if you want to handle any errors and set a timeout period for your Ajax request. For this purpose $.ajax() function gives you access to the full power of Ajax. jQuery provides 20 such options for $.ajax() function. Some options are type, url, timeout, error, success, data.

Using the Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

<html xmlns="" >
<title>Ajax handling by jQuery</title>
<script src="jquery-1.5.2.min.js"></script>
<style type="text/css">
td {font-weight:bold;background-color:#00cc00;color:#ffffff;border:solid 1px #000000;}
#td1,#td2,#td3,#td4,#td5,#td6 {font-weight:bold;background-color:#cc0000;
color:#ffffff;border:solid 1px #000000;}
<script type="text/javascript">	

// load(url,parameter,callback) function 
function floadg(){$("#td1").load("test.txt");}
function floadp(){$("#td2").load("default.aspx",{data:1});}

// $.get(url,parameter,callback) and $.post(url,parameter,callback) function 
function fget(){$.get("test.txt",callbackgm);}
function fpost(){$.post("default.aspx",{data:1},callbackpm);}    

// $.ajax() function 
function fajaxget(){$.ajax({type:"GET",url:"test.txt",success:callbackg});}
function fajaxpost()

//callback functions
function callbackgm(data,status){$("#td3").html(data);}	
function callbackpm(data,status){$("#td4").html(data);}	
function callbackg(data,status){$("#td5").html(data);}	
function callbackp(data,status){$("#td6").html(data);}	
<table cellpadding="3" cellspacing="3">
<tr><td>Ajax load() method default type get </td><td><

input type="button" value="load() get" onclick="javascript:floadg();" /></td>
<td id="td1"></td></tr>
<tr><td>Ajax load() method post </td><td><input type="button" 

value="load() post" onclick="javascript:floadp();" /></td>
<td id="td2"></td></tr>
<tr><td>Ajax $.get() method</td><td><input type="button" 

value="$.get() " onclick="javascript:fget();" /></td>
<td id="td3"></td></tr>
<tr><td>Ajax $.post() method</td><td><input type="button" 

value="$.post() " onclick="javascript:fpost();" /></td>
<td id="td4"></td></tr>
<tr><td>Ajax $.ajax() method type get </td><td><input type="button" 

value="$.ajax() get" onclick="javascript:fajaxget();" /></td>
<td id="td5"></td></tr>
<tr><td>Ajax $.ajax() method type post </td><td><input type="button" 

value="$.ajax() post" onclick="javascript:fajaxpost();" /></td><td 

<div id="d1"></div>
protected void Page_Load(object sender, EventArgs e)
    if (!IsPostBack)
        Response.ContentType = "text/plain";
        if (Request.Params["data"].ToString() == "1") 
		{ Response.Write("POST:The value is One"); }

Points of Interest

If you want to provide desktop application features (without page refresh) in your web application, you should use jQuery functions. Another point of interest is handling jQuery methods in ASP.NET applications.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

R S Dodiya
Technical Lead Wipro Ltd.
India India

You may also be interested in...

Comments and Discussions

QuestionNot an article... Pin
Dave Kreskowiak3-Nov-13 4:56
mvpDave Kreskowiak3-Nov-13 4:56 
GeneralMy vote of 1 Pin
Selvin4-May-11 23:54
memberSelvin4-May-11 23:54 
GeneralRe: My vote of 1 Pin
Member 236415012-May-11 11:05
memberMember 236415012-May-11 11:05 
GeneralRe: My vote of 1 Pin
Member 236415012-May-11 11:14
memberMember 236415012-May-11 11:14 
GeneralRe: My vote of 1 Pin
Selvin13-May-11 3:17
memberSelvin13-May-11 3:17 
GeneralMy vote of 4 Pin
saxenaabhi64-May-11 14:26
membersaxenaabhi64-May-11 14:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.181215.1 | Last Updated 4 May 2011
Article Copyright 2011 by R S Dodiya
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid