Click here to Skip to main content
15,867,330 members
Articles / Web Development / ASP.NET
Tip/Trick

Call Server Side Code using ASP.NET AJAX and jQuery AJAX

Rate me:
Please Sign up or sign in to vote.
4.79/5 (17 votes)
20 Feb 2017CPOL2 min read 167.9K   1.5K   22   12
Call server side code using ASP.NET AJAX and jQuery AJAX

Introduction

In .NET, we can call server side code using two ways:

  1. ASP .NET AJAX
  2. jQuery AJAX

1. Using ASP .NET AJAX

We can call the server side code using PageMethods of ASP .NET AJAX features.

First, we have to enable the PageMethods using ASP Script Manager:

ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>     

EnablePageMethods="true" argument will enable the PageMethods.

Now, we have to write a JavaScript function from which we can call the server side method using PageMethods:

JavaScript
<script type="text/javascript">
//Called this method on any button click  event for Testing
    function MyFunction(Param1, Param2) { 
        PageMethods.MyMethod(Param1, Param2, onSucceed, onError); 
    }  
     //CallBack method when the page call success
    function onSucceed(results, currentContext, methodName) {  
        //Do here success event     
    } 
    //CallBack method when the page call fails due to internal, server error 
    function onError(results, currentContext, methodName) {
       //Do here failure event 
    } 
</script>  

Here, MyMethod() function will called. On success, PageMethods will automatically call onSucceed and on failure, it will call onError function of JavaScript. These two methods are optional with PageMethods.

Finally, we have to write server side code which is called by PageMethods.

PageMethods is an example of web services so we have to enable the web method library using:

C#
using System.Web.Services;

Now, the method which is called is:

C#
[WebMethod]
public static void MyMethod(string Param1, string Param2)
{ 
     try
     {
        //Do here server event  
     }
     catch (Exception)
     { 
       throw;
     } 
}

In MyMethod() function, there is no need to create parameter onSuceed and onError because it is handled by PageMethods internal process and it's according to on success and error.

2. Using jQuery AJAX

We can call JavaScript function using jQuery AJAX.

First, we have to enable the jQuery AJAX on page level by calling predefined jQuery script or we can keep this file with our application.

HTML
<script type="text/JavaScript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

Now we have to call server side method using JavaScript function. url field will set which server side function will called. The advantage of this jQuery AJAX is that we can call different page methods also. So we are passing page name also in url field.

Data type filled will set the parameter which is called on server side method. The most important part of data field is we have to create the same parameter name in server side method. The below code is for calling the server side method.

C#
<script type="text/javascript">   
    //Called this method on any button click  event for Testing
    function MyFunction(Param1, Param2) {                                               
    $.ajax({
        type: "POST",
        url: "MyPage.aspx/MyMethod",
        data: "{ Param1: '" + Param1+ "',Param2: '" + Param2 + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: "true",
        cache: "false",
        success: function (msg) {
            // On success                 
        },
        Error: function (x, e) {
            // On Error
        }
    });
}  
</script>  

Finally, we have to write server side code which is called by jQuery AJAX.

jQuery AJAX is an example of web services so we have to enable the web method library using:

C#
using System.Web.Services;

Now, the method which is called is:

C#
[WebMethod]
public static void MyMethod(string Param1, string Param2)
{ 
     try
     {
        //Do here server event  
     }
     catch (Exception)
     { 
       throw;
     }  
}  

License

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


Written By
Software Developer (Senior)
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionlink broken Pin
A_ndre18-Feb-17 4:29
A_ndre18-Feb-17 4:29 
AnswerRe: link broken Pin
Vishal_Kumar20-Feb-17 0:53
Vishal_Kumar20-Feb-17 0:53 
Questioncalling function from control(ascx.cs) file Pin
Madhav Gunjal4-Jan-17 1:25
Madhav Gunjal4-Jan-17 1:25 
Questionprovide more clarification Pin
Member 126183699-Jul-16 9:11
Member 126183699-Jul-16 9:11 
QuestionSOLVED! Pin
snoop123417-Oct-15 11:59
snoop123417-Oct-15 11:59 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun6-Jul-15 1:09
Humayun Kabir Mamun6-Jul-15 1:09 
GeneralMy vote of 5 Pin
Anuj Tripathi20-Feb-15 0:28
Anuj Tripathi20-Feb-15 0:28 
GeneralMy vote of 1 Pin
Ayang175-Feb-15 20:03
Ayang175-Feb-15 20:03 
GeneralRe: My vote of 1 Pin
Vishal_Kumar5-Feb-15 20:11
Vishal_Kumar5-Feb-15 20:11 
QuestionLnink Broken Pin
avishen13-Dec-14 0:59
avishen13-Dec-14 0:59 
AnswerRe: Lnink Broken Pin
Vishal_Kumar20-Feb-17 0:54
Vishal_Kumar20-Feb-17 0:54 
AnswerWorking Correctly Pin
Thakur Chandan6-May-14 2:15
Thakur Chandan6-May-14 2:15 

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.