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

G-Man · Accepted Answer · 2012-07-25 19:02:11Z

10

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()
             }
         });

answered Jul 25, 2012 at 19:02

G-Man

7,25118 gold badges74 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Over a year ago

point of interest here: dataType is for the expected return type where as contentType is the data being sent to the server. api.jquery.com/jQuery.ajax

Logard · Accepted Answer · 2012-07-26 12:00:55Z

1

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!

answered Jul 26, 2012 at 12:00

Logard

1,5131 gold badge13 silver badges27 bronze badges

1 Comment

user1304444 Over a year ago

Thanks for the answer. GX noticed that I didn't have dataType or contentType specified. Once I did that, it all worked as expected. I didn't need to parse the data. I was even able to get rid of (string, string, string) and just use my view model for the controller parameters.

The Internet · Accepted Answer · 2012-07-25 19:11:04Z

0

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

answered Jul 25, 2012 at 19:11

The Internet

8,11312 gold badges59 silver badges92 bronze badges

1 Comment

user1304444 Over a year ago

Sorry, I just mis-typed it. I wasn't able to copy/paste the alert message. Good catch, though.

Collectives™ on Stack Overflow

MVC3 jquery ajax parameter data is null at controller

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related