Friday, January 6, 2012

ASP.NET web method call using AJAX (jQuery)

This article is about how to call a server side function (web method) from client side (aspx page) using AJAX(provided by Jquery).

Its interesting and easy to implement. As always- lets go directly to an example and see how to implement it...



In this example we will create a webmethod which will return a message to client side

1) Create an ASP.NET Application.

2) Add a new page 'WebForm1.aspx' and make it the start up page.

3) In WebForm1.aspx include jQuery file as given below. If you do not have jQuery file, you can download the latest files from http://jquery.com/

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

4) In code behind page (WebForm1.aspx.cs) create a webmethod to return some data as given below. Make sure to add the attribute [WebMethod()] to the function. You have to include the namespace System.Web.Services. (using System.Web.Services;)

[WebMethod()]
public static string GetData(int userid)
{
    /*You can do database operations here if required*/
    return "my userid is" + userid.ToString();
}


5) Add script tags and include the function to call the web method. Pass the parameter (in this case 'userid') to web method as JSON object

function asyncServerCall(userid) {
    jQuery.ajax({
 url: 'WebForm1.aspx/GetData',
 type: "POST",
 data: "{'userid':" + userid + "}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
     alert(data.d);
 }

    });
}


6) Add button on aspx page and call the ajax function on click event.

<input type="button" value="click me" onclick="asyncServerCall(1);" />

7) DONE! Run the app and click the button, you can see that the webmethod is called and data is returned.

Wasn't that easy? Let me know if you face any issue in running this example. I used Visual Studio 2010 to run this app.

22 comments:

DenXnis said...

Good stuff man, thanks a lot.

Swartskaap said...

THANKS Dude!

Unknown said...

Nice Work Friend !

Unknown said...

How to Bind RADGridview in jQuery ajax ?

arturgeek said...

Thank You it works smoothly.

Phani said...

Thanks :) Its working..

Nihal Ahmed said...

sir it working fine thank a lots........
:)

Palanivel said...

thanks

KILY said...

the ajax call returns full html rather than the result of the method C#.

pedro said...

Thanks a lot man!!!

Unknown said...

Great Work on ASP.NET AJAX
Thanks alot

Unknown said...

Great Work on ASP.NET AJAX
Thanks Alot

dwarakesh said...


Ya that's great to have blog like this it may clear the many thought from this
Pega Training
PlSQL Training
AWS Training
Teradata Training
Qlikview Training
Informatica MDM Training

Jack sparrow said...


I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly.i want to share about teradata training online and websphere portal tutorial .

subha said...

Very enjoyable to visit this blog and find something exciting and amazing.thanks a lot.
C and C++ Training Institute in chennai | C and C++ Training Institute in anna nagar | C and C++ Training Institute in omr | C and C++ Training Institute in porur | C and C++ Training Institute in tambaram | C and C++ Training Institute in velachery

Unknown said...

Thank You it works smoothly.
Java Training in Bangalore

Java Training

Java Training in Hyderabad

Java Training in Chennai

Java Training in Coimbatore

veera said...

its wonderful. | Certification | Cyber Security Online Training Course|

Ethical Hacking Training Course in Chennai | Certification | Ethical Hacking Online Training Course|

CCNA Training Course in Chennai | Certification | CCNA Online Training Course|

RPA Robotic Process Automation Training Course in Chennai | Certification | RPA Training Course Chennai|

SEO Training in Chennai | Certification | SEO Online Training Course





Pushba said...

its wonderful.
IELTS Coaching in chennai

German Classes in Chennai

GRE Coaching Classes in Chennai

TOEFL Coaching in Chennai

spoken english classes in chennai | Communication training

jdgvks said...

Ya that's great to have blog like this it may clear the many thought from this
hadoop training in bangalore

oracle training in bangalore

hadoop training in acte.in/oracle-certification-training">oracle training

oracle online training

oracle training in hyderabad

hadoop training in chennai

Unknown said...

Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work.
PHP Online Training in Chennai
Machine Learning Training in Chennai

iOT Training in Chennai

Blockchain Training in ChPHP Training in Chennai

ennai

Open Stack Training in Chennai

Unknown said...

Good job in presenting the correct content with the clear explanation. The content looks real with valid information.
PHP Online Training in Chennai
Machine Learning Training in Chennai

iOT Training in Chennai

Blockchain Training in ChPHP Training in Chennai

ennai

Open Stack Training in Chennai

Jon Hendo said...

tools that automate and scale events personalize attendee experiences and deliver positive ROI. event marketing and online registration platform