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! :)

Solution 1

You webmethod needs to be static.

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

Solution 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

Solution 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"

Comments

[Luke Villanueva]

Sorry but I didn't understood what you just said.

[Luke Villanueva]

There's an errror when I put static on my webmethod. Error 2 An object reference is required for the non-static field, method, or property 'SearchMember_Updated.Default.Grid1D'

[Asif Mushtaq]

I mean that you should pass the parameters in the URL, and set the type to GET. Please check my updated answeer

[Alexei Levenkov]

+1. @ljpv14, So don't reference it... Makes no sense to update some UI in web method in your case as there is no corresponding HTML page.

[Claudio Redi]

You can't bind a server control on a webmethod. Use it for loading/saving data from/to server. I'm afraid you'll need to change that logic

[Luke Villanueva]

I finally able to call my webmethod. By why isn't it stopping at the line where I set a breakpoint? Does it mean it is not proceeding to the webmethod?

[Asif Mushtaq]

You can also use Data: "?colunmname="+colname+"&inputVal="+inputValue

[Luke Villanueva]

@AlexeiLevenkov I believe I said that my webmethod is within my default.aspx.cs

[Luke Villanueva]

So does if mean that I need to pass it in another method in order to bind it with my gridview? How could I pass a list to another method? @Claudio Redi. Thanks!

[Luke Villanueva]

Oops. I checked again and still I got an internal server error.

[Claudio Redi]

@ljpv14: you have to bind the grid on the normal page flow, you can't do it on the webmethod call.

[Luke Villanueva]

@ClaudioRedi THANKS! I just set to static and at my success function in my ajax, I appended it to my gridview and it works. Thank you so much for that idea. Another question, how can I remove the last appended set of data? Because when I try to click my button the last appended data are still there and just added at the bottom the new ones. Thanks!

[StuartLC]

Watch out for: ASPX Static, ASMX Non Static