无法使用jQuery ajax调用Page Method

Question

I have created a sortable ListView using jQueryUI and now I am stuck in trying to save it back to the database. Here's how I have created the ListView:

<asp:ListView ID="ListViewItems" runat="server">
<LayoutTemplate>
    <div id="sortable1" class="connectedSortable">
        <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
    </div>
</LayoutTemplate>
<ItemTemplate>
    <li class="ui-state-default" id='id_<%# Eval("Item_ID") %>'><%# Eval("Item_Name") %></li>
</ItemTemplate>

There is a button(div) under the ListView which upon being clicked should save the reordered list back to db:

<div class="btn-info" id="UpdateOrder" onclick="SendUpdatedOrder()">Update Order</div>  

JS File content:

function SendUpdatedOrder() {
var order = $('#sortable1').sortable('toArray').join(',').replace(/id_/gi, '');
//alert(order);
$.ajax({
    type: "POST",
    url: "~/AdminEditItems.aspx/UpdateRuleOrder",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function (response) {
        alert(response.d);
    }
});} 

I have created a page method in AdminEditItems.aspx.cs -

 [WebMethod]
    public static void UpdateRuleOrder(string order)
    {
        ....do something...
    }   

Upon execution the UpdateRuleOrder method is not getting called at all. Any alerts put by me in UpdateRuleOrder function of JS is getting called successfully but the ajax method somehow is not working. I am not able to find out where I am going wrong.

Answer 1

Three things:

Remove the tilde and forward slash from your url ie

url: "AdminEditItems.aspx/UpdateRuleOrder",

Add your argument in the data ie

data: '{ "order" : "' + order + '"}',

You also need to EnablePageMethods in your ScriptManager ie

<asp:ScriptManager runat="server" EnablePageMethods="true">

Update

I also noticed that you are not returning anything, change your UpdateRuleOrder method to return your object and you will be able to access it like this:

var myObject = response.d;

As it is within a directory above the url would be:

url: "../AdminEditItems.aspx/UpdateRuleOrder",