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

• Download AjaxCall.zip - 22.5 KB

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: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:

<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:

using System.Web.Services;

Now, the method which is called is:

[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.

<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.

<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:

using System.Web.Services;

Now, the method which is called is:

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