How to call page method with a parameter through in a javascript event?

function GetServiceInformation(x) {    $.ajax({        type: "POST",        url: "page.aspx/GetServiceInformation",        data: "{'x':'" + x + "'}",        contentType: "application/json; charset=utf-8",        dataType: "json",        success: on_sucess,        error: on_error    });    function on_sucess(data, status) {        alert(data);    }    function on_error(request, status, error) {        alert(error);    }}

Sorry, if it doesn't work

Answer Edit Based On Chat Discussion

First, thanks for clarifying your question. It was bit hard to understand the problem you were trying to solve. The reason? Because your code wasn't clear enough and that usually happens when there are design issues. That's effectively what your facing here a bit of a design issue. First, I'll point out some mistakes...

In this javascript function...

function GetInfo() {        PageMethods.GetServiceInformation(this);    }

this is NOT an instance of your page. So there's no use to make your page implement an interface...

public partial class AppMaster : Log, IInfo{}

and expect that a javascript call would page an instance of System.Web.UI.Page to your class (not to mention an implementation of the IInfo interface). You can blindly ditch this approach because it's a permanent design issue and it's not even going to work.

Now, if what you want is to serve the page, then do some further processing and finally send the results of this processing back to the client asynchronously using javascript/ajax you have a couple of approaches here:

1. Using SignalR which is my favourite approach (but you already stated your solution doesn't meet the requirements to use SignalR)
2. Using jQuery ajax which is also a very valid approach

Now, I'll explain the second approach

Using jQuery Ajax

Simply render the page as you would normally do in ASP.NET. Then on the client-side, when the page loads, make an ajax request to start processing the information you want to display. You can start the request as soon as the page loads to make the processing on the server

$(function(){    $.ajax({        type: 'POST',        url: 'AppMaster.aspx/GetServiceInformation',        data: "{}",        contentType: 'application/json;charset=utf-8',        dataType: 'json',        success: function(d) {            //load data received            },        error: function() {            //process the error            }    });});

In the success handler you need to load the values received from the ajax call on your web controls. Then change your IInfo interface to a concrete object in a separate code file. But, remember that this class should NOT hold any references whatsoever to your web controls

public class JSInfo{    string Inbox { get; set; }    string Draft { get; set; }    string New { get; set; }    string Approved { get; set; }    string archive { get; set; }    string search { get; set; }    string cand { get; set; }    string pri { get; set; }    string power { get; set; }    string admin { get; set; }    string help { get; set; }    bool l_cand { get; set; }    bool l_pri { get; set; }    bool l_power { get; set; }    bool l_admin { get; set; }    string lb_ApprovedCount { get; set; }    string lb_InboxCount { get; set; }    string lb_archive { get; set; }    string lb_DraftCount { get; set; }}

then change your page method to...

[System.Web.Services.WebMethod]public static JSInfo GetServiceInformation(){    //you need to get the emp_num from session    //construct the JSInfo object    JSInfo info = new JSInfo();    //get the data from the database    var data = UserTrans.GetInbox(int.Parse(emp_num), 0);    //set the properties of the JSInfo...similar to the line below for each property...Draft, New, Approved, etc    info.Inbox = data.Inbox;    //return the object to the client    return info;}

Notice that you need to get the emp_num value from Session since you stated in the chat discussion that this value comes from a Session variable. Now, going back to the success handler of your jQuery ajax call which executes soon after the response is received back from the server. You will receive a json object in the handler parameter d with the properties of the JSInfo class that you just sent from the server. Then you set the controls on the page...

success: function(d) {            $('#id_inbox_control').val(d.Inbox);            $('#id_draft_control').val(d.Draft);            $('#id_new_control').val(d.New);            //and keep doing the same for the rest of the controls        },

That should be a neater solution. Of coure, I cannot cover every single details here. But for sure you will get the idea. If not, let me know if I need to expand on something.

If your page implements the interface, you don't have to pass it! In your c# code write:

this.l_power=true;

If you need to pass values from JavaScript to page method, define each property as a parameter and pass values to the page method:

[System.Web.Services.WebMethod]public static string GetServiceInformation(int value1, string value2){    l_power = value1;    something = value2;    return "some string to indicate the result of call";}

And:

<script type ="text/javascript">    var v1 = 15;    var v2 = "some value";    function GetInfo() {        PageMethods.GetServiceInformation(v1, v2, success, fail);    }   window.onload = setTimeout("GetInfo()", 3000);</script>

in which success and fail are the names of two JS functions that will be called after the request is completed. Note that a page method can return a string value to inform the client about what happened on the server.