Getting error when doing a jquery ajax function to a aspx page

Question

I want to send data using ajax from jQuery to c# (note: I'm sending request to the same page). I am following this tutorial http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ .

NOTE: This is a asp.net 3.5 on SharePoint 2010 webpart solution.

This is my jquery code:

$.ajax({
    type: "POST",
    url: getURLWithoutQuery() + "/saveOrder",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        alert(msg.d);
    }
});

// return the url of the current page without any query parameters
function getURLWithoutQuery() {
    return location.protocol + '//' + location.host + location.pathname;
}

and in c#, the main file is PDFLibraryUserControl.ascx.cs . This is the one that has the Page_Load function.

However I have another class file called SaveStructure.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.Services;

namespace PDFLibrary.PDFLibrary
{
    public partial class SaveStructure : Page
    {
        [WebMethod]
        public static int saveOrder()
        {
            return 1234;
        }
    }
}

I expect to get an alert saying 1234 , but instead I get this:

Does it have something to do with the function saveOrder being on another file than the main one? Or maybe my URL is not correct? I don't want to hardcode the URL in it, because the current page is the aspx page and also contains the jQuery code to send the POST (to the same page).

Does anyone know what's wrong and can fix this?

Answer 1

Putting page methods inside of a user control is a bad idea, because the biggest problem is that user controls are not directly accessible via script (read: jQuery) like .aspx pages are. If you are constrained to only putting this logic in a user control, then my recommendation is create a web service ( .asmx ) that will perform the logic the page method was going to do. A web service is directly accessible via the jQuery .ajax() method, like this:

Code from myService.asmx:
[WebMethod]
public static int saveOrder()
{
    return 1234;
}

Code in SharePoint .aspx page:
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "myService.asmx/saveOrder",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: "json",
            success: handleSuccess,
            error: handleError
        });
    });

    function handleSuccess(data, status) {
        // Do something with successful data retrieval
    }

    function handleError(xmlRequest) {
        // Do something with error
    }
</script>