Ajax call always returning error 500 client side

Question

Im trying to post data back to a webmethod located in Default.aspx

jquery code:

data = "{'saveData':'testtestest'}"

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Default.aspx/SavePins",
        data: data,
        dataType: "json",
        success: function (response) {
            if (response.d) {
                //    var obj = JSON.parse(response.d);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $('#modalContentBox').html('Whoops! There was an error saving!').removeAttr('class').attr('class', 'alert alert-error');
            $('#myModal').modal();
        }
    });

Web Method:

[WebMethod]
public bool SavePins(string saveData)
{
    try
    {
        File.WriteAllText(string.Format("{0}{1}.shane", file_location, "pinsData"), saveData);
        return true;
    }
    catch (Exception)
    {
        return false;
    }
}

The issue is that the Ajax call always returns an error 500 client side. It does not actually post to the server. there is a <form> element with runat="server" in the page. I've added <asp:ScriptManager EnablePageMethods="True" runat="server"/>

Answer 1

You need to ScriptMethod to your web method because you needs to send the response as json.

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]      
public bool SavePins(string saveData)
{
     try
      {
           File.WriteAllText(string.Format("{0}{1}.shane", file_location, "pinsData"),     saveData);
           return true;
      }
     catch (Exception)
     {
        return false;
      }
 }