C# - SPLessons

How to Call C# Method/Function Using jQuery Ajax

Home > > Tutorial
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

How to Call C# Method/Function Using jQuery Ajax

How to Call C# Method/Function Using jQuery Ajax

Description :
Hi, Today we are going to implement how to  use an ajax method to call C# web method. We can use ajax with PHP or with ASP.NET or many other technologies. Now we will see How to Call C# Method/Function Using jQuery Ajax.

What is Ajax? :
Ajax is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications.

Call function in Code-behind :
With the help of the jQuery.ajax() or $.ajax() we can able to call the web method which is defined in our c# class. $.ajax() function will make a asynchronous HTTP(Ajax) request to our web method called as MYSampleAjaxCall. In order to make a asynchronous HTTP request using $.ajax() function we have to pass some parameters, we will see them one by one.
type:"POST"
Here we specifying the request type, we can use GET or POST based on the situation. POST is secure one which hides requested parameters from users.
url:"splessonsReegistration.aspx/MYSampleAjaxCall"
Here we are passing the web method name prefixed with our ASPX file name. So when ever the ajax code get executed then IIS will send request to MySampleAjaxCall web method which exists in splessonsReegistration.aspx.cs.
ContentType:"application/Json;Charset=utf-8"
Here we are specifying what is the input format. We are passing two parameters to web method so we have to specify in what format we are passing the values. Here we are send the parameters in JSON format. Parameters are FirstName, and LastName and JSON format is look like " {FirstName:"Lakshmi",Lastname:"Prasanna"}"
datatype:"Json"
Here we are specifying what kind of return data format we are expecting from the web method.
Success:OnSuccess
On successfull execution of the requested web method then ajax function will call the OnSuccess method to process the output. You can use any name here instead of OnSuccess method.
Failure:Function(responce)
Failure method gets executed when there is some exception happens on web method execution.
 

Step1 :
Create an ajax function in an .aspx page.

[javascript] <script type="text/javascript"> $(document).ready(function () { var Firstname= $(“#txtfirstname”).val(); var Lastname=$(“#txtlastname”).val(); $.ajax({ type:"POST", url:"splessonsReegistration.aspx/MYSampleAjaxCall", data:' {FirstName:"'+Firstname+'",LastName:"'+Lastname+'"}', ContentType:"application/Json;Charset=utf-8", datatype:"Json"; Success:OnSuccess; Failure:Function(responce){ alert(responce.d); } }); }); Function OnSuccess(responce){ alert(responce.d); } </script> [/javascript]

Here is the C# function :
[csharp] public partial class splessonsReegistration : LayoutsPageBase { protected void Page_Load(object sender, EventArgs e) { } [Syetem.Web.Services.WebMethod] public static void MYSampleAjaxCall(string FirstName,String LastName) { return FirstName "++" LastName; } } [/csharp]

Output :