MVC3 jquery ajax parameter data is null at controller
===

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)
    {
        ...
    }


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

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"}