CODEWITHSUNDEEP
asp.net-mvc-3jquerykendo-ui
user1304444
user1304444

Reputation: 1753

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

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

Upvotes: 2

Views: 8684

Answers (3)

Logard
Logard

Reputation: 1513

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!

Upvotes: 1

The Internet
The Internet

Reputation: 8103

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

Upvotes: 0

G-Man
G-Man

Reputation: 7241

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

Upvotes: 10

Related Questions