Here I am looking to explain how to call page methods using jQuery.

Step 1: Define your Page Methods in code behind:

[WebMethod]
    public static int MyMethod1()
    {
        return 13;
    }
    [WebMethod()]
    public static string MyMethod2(string a, int b)
    {
        return a + " –> " + b.ToString();
    } 

Step 2: Include the jQuery Library on Default.aspx page:

<script src="Js/jquery.min.js" type="text/javascript"></script> 

If you do not have jQuery file in Js folder then use following:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"> 

Step 3: Now Write the code to Call Page method:

<script type="text/javascript">
        function PageMethod(fn, paramArray, successFn, errorFn) 
        { 
            var pagePath = window.location.pathname; 
            //Create list of parameters in the form : {"paramName1":"paramValue1","paramName2":"paramValue2"} 
            var paramList = ”; 
            if (paramArray.length > 0) 
            { 
                for (var i=0; i<paramArray.length; i+=2) 
                { 
                    if (paramList.length > 0)
                        paramList += ‘,’; 
                    paramList += ‘"’ + paramArray[i] + ‘":"’ + paramArray[i+1] + ‘"’; 
                } 
            } 
            paramList = ‘{‘ + paramList + ‘}’; 
            //Call the page method 
            $.ajax({ 
                type: "POST", 
                url: pagePath + "/" + fn, 
                contentType: "application/json; charset=utf-8", 
                data: paramList, 
                dataType: "json", 
                success: successFn, 
                error: errorFn 
            }); 
        } 
        function AjaxSucceeded (result)
        {
            alert(result.d);
            $("#Result").text("Result : " + result.d);
        }
        function AjaxFailed (result)
        {
            alert("Error on Page");
        }
        function CallPageMethod1()
        {          
            PageMethod("MyMethod1", [], AjaxSucceeded, AjaxFailed);                       
            return false;
        }
         function CallPageMethod2()
        {     
            PageMethod("MyMethod2",["a", "value", "b", 2], AjaxSucceeded, AjaxFailed);           
            return false;
        }
    </script> 

Step 4: To Test your code use following html on default.aspx:

<form id="form1" runat="server">
        <h1>
            Using jQuery To Call ASP.NET Page Methods and Web Services</h1>
        <div> 
<asp:Button ID="Button1" runat="server" Text="With No Parameter" OnClientClick="return CallPageMethod1();" />
   <asp:Button ID="Button2" runat="server" Text="With Parameter" OnClientClick="return CallPageMethod2();" />
        </div>
        <div id="Result">
        </div>
    </form> 

jQuery makes an AJAX call to the MyMethod1 & MyMethod2 page method and replaces the div’s text with its result.

Very Simple!!!

Hope You will also get benefit from this.

Jai Ganesh

Related Post:

http://ramanisandeep.wordpress.com/2009/09/22/calling-web-service-methods-using-asp-net-ajax/