Jquery Ajax: Only Page_Load method is being execut

I'm supposed to return a csv file, so I added this method that I will be calling from the client side. For now, this method is returning a simple string.

public partial class ResourceEdit_PriceSheet : xCI.Site.Web.BasePage
{
    protected void Page_Load( object sender, EventArgs e )
    {
    }


    [WebMethod]
    public string GenerateVendorPriceSheet(int suppID)
    {
        return "Succes!!!";
    }

}

And this is the ajax

function exportVendorPriceSheet() {
 var suppID = getParameterByName('SuppID');
 var url = '/ResourceEdit/ResourceEdit_PriceSheet.aspx/GenerateVendorPriceSheet';
 var id = { "suppID": suppID };
 $.ajax({
     type: "POST",
     url: url,
     data: id,
     dataType: "application/json",
     cache: false,
     success: function (result) {
         alert(result)
    }
  });
};

When I run the application, nothing is happening. The break point is not being hit GenerateVendorPriceSheet while the one next to Page_Load is being executed. And the response contains the whole page instead of "Success!!!".

Yet, all the posts I've read says that's how to call a method from a aspx page. Am I missing something?

Thanks for helping.

====================

Here are some of the headers

Request URL:http://localhost/ResourceEdit/ResourceEdit_PriceSheet.aspx/GenerateVendorPriceSheet
Request Method:POST
Status Code:200 OK
Request Headersview source

Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:11
Content-Type:application/x-www-form-urlencoded; charset=UTF-8

Form Data
suppID=2974

Based on the header inspection (Chrome dev tools):

you are sending Content-Type:application/x-www-form-urlencoded; charset=UTF-8

So (contentType):

$.ajax({
         type: 'POST',
         url: url,
         data: id,
         contentType: 'application/json; charset=utf-8',
         dataType: 'json'

Hth....