Call Server Web Method through AJAX without postback the page in ASP.Net

On CallWebMethod.aspx => 

Write a java script method to AJAX call the web method named "GetEmployeeDetails" on the server side.

  function GoForWork() {

            var userId = '<%= Session["userid"] %>';
            $.ajax({
                type: "POST",
                url: "CallWebMethod.aspx/GetEmployeeDetails",
                data: '{rid: "' + userId  + '" }',   // parameter pass in method
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (response) {
                     // call on successful response
                     // get response here return from server method & create html to display data
                    }
                failure: function (response) {
                     // call on failed
                 
                    }
                }
            })
            return false;

type :   Type of method : POST,GET,DELETE..
url    :  path of the server side method, format:  {Page name}/{Method name}
data :    Send Parameters in the method
content type :  type of content in request
dataType:   type of data you sent JSON,XML etc



On CallWebMethod.aspx.cs => create a method that will call from the client side using JS and AJAX call.

  [WebMethod]
 public static string GetEmployeeDetails(string userid)
{
      DataSet ds=new DataSet();
      // fill dataset from database
      return ds.xml();
}


EXAMPLE:

        [WebMethod]
        public static enRechargeReport[] GetRechargereport(string rid)
        {
            List<enRechargeReport> lst_rechargeReport = new List<enRechargeReport>();
            try
            {
                SqlConnection _con = new SqlConnection(DB.con());
                _con.Open();
                SqlDataReader _reader = //fill data here from database

                if (_reader.HasRows)
                {
                    while (_reader.Read())
                    {
                        enRechargeReport nots = new enRechargeReport();
                        nots.Uid = Convert.ToString(_reader["UID"]);
                        nots.TransactionId = Convert.ToString(_reader["TransactionId"]);
                        nots.MSISDN = Convert.ToString(_reader["MSISDN"]);
                        nots.Amount = Convert.ToString(_reader["Amount"]);
                        nots.Service = Convert.ToString(_reader["Service"]);
                        nots.Provider = Convert.ToString(_reader["Provider"]);
                        nots.TransDate = Convert.ToString(_reader["Date"]);
                        nots.Balance = Convert.ToString(_reader["RTBalance"]);
                        nots.Status = Convert.ToString(_reader["Status"]);
                        lst_rechargeReport.Add(nots);
                    }
                }
                _reader.Close();
                _con.Close();
            }
            catch { }
            return lst_rechargeReport.ToArray();
        }


function GoForRechargeReport() {

            var a = '<%= Session["userid"] %>';
            $.ajax({
                type: "POST",
                url: "DoRecharge.aspx/GetRechargereport",
                data: '{rid: "' + a + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var c = "";
                    c = c + "<table id='tab_border' class='altrowstable'><tr style='background-color: #6AA6BB;color: white'><td style='width:5px'>S. No.</td> <td>UID</td> <td>Trans. Id</td><td>Device</td><td>Provider</td><td>Service</td><td>Amount</td><td>Status</td><td>Balance</td><td>Tran. Date</td></tr></table>"
                    for (var i = 0; i < response.d.length; i++) {
                        c = c + "<table id='tbDetails' class='altrowstable'><tr><td>" + (i + 1) + "</td><td>" + response.d[i].Uid + "</td><td>" + response.d[i].TransactionId + "</td><td>" + response.d[i].MSISDN + "</td><td>" + response.d[i].Provider + "</td><td>" + response.d[i].Service + "</td><td>" + response.d[i].Amount + "</td><td>" + response.d[i].Status + "</td><td>" + response.d[i].Balance + "</td><td>" + response.d[i].TransDate + "</td></tr></table>";
                    }
                    $("panel").html(c);
                }
            })
            return false;
        }