How to loop through POST variables sent to ASP.NET WebMethod from JQuery $.ajax method?

I have a checklist created with HTML buttons that toggle between 'selected' and 'unselected' classes on click. Each option has an ID related with it and also an optional comment input.

I am trying to use the JQuery $.ajax() method with POST to send the IDs of the selected buttons and the related comment. The idea I have is to create a key/value collection of the IDs selected and their respective Comments when 'Save' is clicked like so:

selections = "{id1: 'comment1', id2: 'comment2', ...}"

Then pass it to the data portion of the $.ajax() method like so:

$.ajax({
     type: "POST",
     url: "MyPage.aspx/MyMethod"
     data: selections,
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(msg) {
       onSuccess(msg);
     }
});

And finally access the selections in MyMethod by looping through HttpContext.Current.Request.Form.

But when I try this, HttpContext.Current.Request.Form is always empty. Is my approach wrong? If so, why? Can anyone suggest another approach?

Any help would be greatly appreciated. 开发者_JS百科Thanks in advance!

Also, I know of 4 ways to call a server method from the JQuery AJAX API:

1. Page Method (static method in a .aspx page with the [WebMethod] modifier)
2. Switch statement between methods in Page_Load of a .aspx page
3. Switch statement between methods in ProcessRequest of a .ashx page
4. Web Service

Which way is most efficient? I assume 2 would involve an unnecessary instance of a Page, so that shouldn't be the one.

---

The selections variable should be an object not a string.

var selections = { id1: 'a', id2: 'b' };

---

First, make sure your selections variable is valid JSON, what you wrote in your question is not valid JSON notation.

Second, in your webmethod definition, have the MyMethod receive a string as parameter; lets say you declare it as

[WebMethod]
public MyMethod(string selections)
{
    //Do processing here
}

In the body of your method., deserialize the string in a Dictionary<string,string> using the JavascriptSerializer, for example:

JavascriptSerializer js = new JavascriptSerializer(); 
Dictionary<string,string> result = js.Deserialize<Dictionary<string,string>>(selections);

Now you can loop through the elements in your dictionary.

Just to clarify, your selections variable needs to have every property enclosed in quotes; in your case, id1, id2... need to be 'id1':'comment','id2':'comment', etc.

EDIT

Adding code to demonstrate how the web service should be called.

var selections = "{'id1': 'comment1', 'id2': 'comment2'}";

$.ajax({
     type: "POST",
     url: "MyPage.aspx/MyMethod"
     data: JSON.stringify(selections),
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(msg) {
       onSuccess(msg);
     }
});

As a last advice, get familiar with jsFiddle, it allows you to test things quickly. See this, for example.