jquery Ajax call - data parameters are not being passed to MVC Controller action

Question

I'm passing two string parameters from a jQuery ajax call to an MVC controller method, expecting a json response back. I can see that the parameters are populated on the client side but the matching parameters on the server side are null.

Here is the javascript:

$.ajax({  
type: "POST",  
contentType: "application/json; charset=utf-8",  
url: "List/AddItem",  
data: "{ ListID: '1', ItemName: 'test' }",  
dataType: "json",  
success: function(response) {alert("item added");},  
error: function(xhr, ajaxOptions, thrownError) {alert(xhr.responseText);}});

Here is the controller method:

Function AddItem(ByVal ListID As String, ByVal ItemName As String) As JsonResult
   'code removed for brevity
   'ListID is nothing and ItemName is nothing upon arrival.
   return nothing
End Function

What am I doing wrong?

Answer 1

I tried:

<input id="btnTest" type="button" value="button" />

<script type="text/javascript">
    $(document).ready(
            $('#btnTest').click(
                function() {
                    $.ajax({
                        type: "POST", 
                        url: "/Login/Test",
                        data: { ListID: '1', ItemName: 'test' },
                        dataType: "json",
                        success: function(response) { alert(response); },
                        error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
                    });
                }
           );
        }
    );
</script>

and C#:

[HttpPost]
public ActionResult Test(string ListID, string ItemName)
{
    return Content(ListID + " " + ItemName);
}

It worked. Remove contentType and set data without double quotes.