Calling webmethod ina aspx.cs file using jquery ajax

Question

I have a default.aspx.cs which contains my webmethod to call and I have my js file that containg my jquery ajax. I can't get to call the webmethod.

Here is my default.aspx.cs:

    protected void Page_Load(object sender, EventArgs e)
    {
        string[] MyArray = new string[1];
        MyArray[0] = "My Value";

        Grid1D.DataSource = MyArray;
        Grid1D.DataBind();
    }

    [WebMethod]
    public Details[] getDetails(string columnname, string inputVal)
    {
        List<Details> list = new List<Details>();

        DbAccess dbacc = new DbAccess();

        DataTable dt = dbacc.getReportDetails(columnname, inputVal);

        foreach (DataRow row in dt.Rows)
        {
            Details _Details = new Details();
            _Details.memid = row["memid"].ToString();
            _Details.usrname = row["usrname"].ToString();
            _Details.fullname = row["fullname"].ToString();
            _Details.fname = row["fname"].ToString();
            _Details.mname = row["mname"].ToString();
            _Details.lname = row["lname"].ToString();
            _Details.bdate = row["bdate"].ToString();
            _Details.address = row["address"].ToString();
            _Details.sponsorid = row["sponsor_id"].ToString();
            _Details.parentid = row["parent_id"].ToString();
            _Details.placement = row["placement"].ToString();
            _Details.datejoined = row["date_joined"].ToString();


            list.Add(_Details);
        }

        Grid1D.DataSource = list.ToArray();
        Grid1D.DataBind();

        return list.ToArray();
    }

And here is my js file:

function retrieveReportData() {
    var columnName = $("#ddlFilters").val();
    var input = $("#tags").val();

    if (columnName != "Select") {

        var Data = JSON.stringify({ columnname: columnName, inputVal: input });

        alert(Data);

        $.ajax({

            url: "Default.aspx/getDetails",
            data: Data,
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (mydata) {

                alert(mydata.d);
            }
        });

    }
    else 
        alert("Please choose search filter");
}

You may notice that I'm alerting my data to ensure that I have the right values to send to my webmethod. But just like I said, it fails to call my webmethod and don't proceed to my success function within my ajax. Help! Thanks! :)

Answer 1

You webmethod needs to be static.

[WebMethod]
public static Details[] getDetails(string columnname, string inputVal)

Answer 2

This one is a complete sample, which shows the whole process at the beginning until at the end of how to call a server side "webmethod" via ajax request using asp.net page.

http://www.codeproject.com/Questions/374136/Call-Page-Method-From-Jquery-Ajax-Call

Answer 3

Try to set type to "Get" and send the parameters in the URL instead of Data

url: "Default.aspx/getDetails/?colunmname="+colname+"&inputVal="+inputValue,
type: "GET"