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

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

, 6 May 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
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: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;
     }  
}  

License

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

Share

About the Author

Vishal_Kumar
Software Developer
India India
No Biography provided

Comments and Discussions

 
AnswerWorking Correctly Pinmemberchotu Kumar6-May-14 3:15 

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 | Terms of Use | Mobile
Web01 | 2.8.1411022.1 | Last Updated 6 May 2014
Article Copyright 2014 by Vishal_Kumar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid