MVC3 jquery ajax parameter data is null at controller

Question

I have a controller action that I want to update via a jquery call. The action runs, but there is no data in the parameters.

I am using a kedoui grid with a custom command in a column that I want to run some server code.

kendoui grid in view
...
columns.Command(command =>
{
    command.Custom("ToggleRole").Click("toggleRole");
});
...

The model is of type List<_AdministrationUsers>.

public class _AdministrationUsers
{
    [Key]
    [ScaffoldColumn(false)]
    public Guid UserID { get; set; }

    public string UserName { get; set; }

    public string Role { get; set; }
}

Here is my toggleRole Script:

<script type="text/javascript">
     function toggleRole(e) {
         e.preventDefault();
         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
         alert(JSON.stringify(dataItem));

         $.ajax({
             type: "POST",
             url: '@Url.Action("ToggleRole", "Administration")',
             data: JSON.stringify(dataItem),
             success: function () {
                 RefreshGrid();
             },
             error: function () {
                 RefreshGrid()
             }
         });
     }
</script>

Here is my controller action:

[HttpPost]
public ActionResult ToggleRole(string UserID, string UserName, string Role)
{
    ...
}

The controller action fires, but there is no data in any of the parameters.

I put the alert in the javascript to verify that there is indeed data in the "dataItem" variable. Here is what the alert text looks like:

{"UserID":"f9f1d175...(etc.)","UserName":"User1","Role","Admin"}

Answer 1

Did you try specifying the dataType and contentType in you ajax post ?

$.ajax({
             type: "POST",
             url: '@Url.Action("ToggleRole", "Administration")',
             data: JSON.stringify(dataItem),
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             success: function () {
                 RefreshGrid();
             },
             error: function () {
                 RefreshGrid()
             }
         });

Answer 2

It looks like you are posting the whole object as one Json string, while the controller expects three strings. If you are using MVC3 the parameter names also have to match the controllers signature. Try to parse up your data object so that it matches the input expected from the controller. Something like this:

$.ajax({
             type: "POST",
             url: '@Url.Action("ToggleRole", "Administration")',
             data: { UserID: dataItem.UserID, UserName: dataItem.UserID, Role: dataItem.Role },
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             success: function () {
                 RefreshGrid();
             },
             error: function () {
                 RefreshGrid()
             }
         });

Hope that helps!

Answer 3

{"UserID":"f9f1d175...(etc.)","UserName":"User1","Role","Admin"}

Seems incorrect to me. Wouldn't you want this?

{"UserID":"f9f1d175...(etc.)","UserName":"User1","Role" : "Admin"}

Notice the "Role" : "Admin"