Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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.

Syntax:

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.

Syntax:

$.get(url, parameters, callback) 

Syntax:

$.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" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<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;}
</style>
<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()
{$.ajax({type:"POST",url:"default.aspx",data:{data:1},success:callbackp});}

//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);}	
</script>
</head>
<body>
<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 

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

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.

License

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

Share

About the Author

R S Dodiya
Software Developer (Senior)
India India

Comments and Discussions

 
QuestionNot an article... PinmvpDave Kreskowiak3-Nov-13 3:56 
GeneralMy vote of 1 PinmemberSelvin4-May-11 22:54 
GeneralRe: My vote of 1 PinmemberMember 236415012-May-11 10:05 
GeneralRe: My vote of 1 PinmemberMember 236415012-May-11 10:14 
Sorry Selvin. I should have taken the time to discover that English is probably not your first language so it is not surprising that you are unable to spell your insults correctly. Please accept my apologies.
GeneralRe: My vote of 1 PinmemberSelvin13-May-11 2:17 
GeneralMy vote of 4 Pinmembersaxenaabhi64-May-11 13:26 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140821.2 | Last Updated 4 May 2011
Article Copyright 2011 by R S Dodiya
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid