Kendo grid posting the data back to controller as null

Question

When I try to post the entire kendo grid back , I am not receiving the object in the controller, it is coming as null. I have added a custom button on the tool bar and when I click on it , it should do a post back. The fiddler request shows the data being posted back but I am not able to receive it in controller?

This is captured from fiddler, the HTTP POST request

POST http://localhost:59457/api/data/SaveBill HTTP/1.1 Host: localhost:59457 Connection: keep-alive Content-Length: 24 Accept: application/json, text/plain, / Origin: http://localhost:59457 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 Content-Type: application/json;charset=UTF-8 Referer: http://localhost:59457/ Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.8

[{"Id":1,"Name":"John"}]

Code on my controller

  public IHttpActionResult SaveBillingGroupMap([FromBody]test models)
        {
            var x = HttpContext.Current.Request.InputStream;
            //var employees = this.DeserializeObject<IEnumerable<test>>("models");
            throw new NotImplementedException();
        }

  public class test
        {
            public int Id { get; set; }

            public string Name { get; set; }
}

Code on JS (angular)

     $scope.mockdata = new kendo.data.ObservableArray([{
            "Id": 1,
                "Name": "John"
                }, {
                "Id": 2,
                "Name": "Joe"
                }, {
                "Id": 3,
                "Name": "Jack"
                }]);

                    $scope.sportsGrid = new kendo.data.DataSource({
                    // data: $scope.mockdata,
                    transport: {
                        read: function (e) {
                            e.success($scope.mockdata);
                },
                    update: function (e) {
                                console.log("Update", e);
                                },
                                        destroy: function(e) {
                                console.log("Destroy", e);
                        },
                                    create: function(e) {
                        console.log("Create", e);
                    },
                                    parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {
                                        models: kendo.stringify(options.models)
                        };
                        }
                        }
                        },
                            batch: false,
                                            pageSize: 5,
                            change: function (e) {
                        console.log("change: " +e.action);
                        if (e.action === "remove") {
                                                    this.sync();
                                        }
                            // do something with e
                        },
                                schema: {
                                            model: {
                                    id: "Id",
                                    fields: {
                                    Id: {
                                        type: "number"
                                        },
                                        Name: {
                                        type: "string"
                                        }

                                    }
                                    }
                                        }
                                    });



   $scope.options = {
                sortable: true,
                    pageable: true,
                editable: true,
                toolbar: ["create", "cancel", {
                    text: "Custom"
            }],
                columns: [{
                field: "Id",
                    title: "ID"
        }, {
            field: "Name",
            title: "Name"
        }, {
                    command: ["destroy"],
                        title: " ",
                            width: "150px"
                        }],
                    edit: function(e) {
            if (e.model.Name == "Joe") {
                this.closeCell();
                }

        }

                };
    $("#sportsSetupGrid").on("click", ".k-grid-Custom", function (e) {
        var models = JSON.stringify($("#sportsSetupGrid").data().kendoGrid._data);


        $http({
        method: 'POST',
        url: 'api/data/SaveBill',
        data: models,
        contentType: "application/json",
            dataType:"JSON"

    });
            e.preventDefault()
            });

this is on html

     <div kendo-grid k-options="options" k-data-source="sportsGrid" id="sportsSetupGrid" ></div>

Answer 1

You are calling the action method SaveBill in the javascript and your action method name in the controller is SaveBillingGroupMap . Correct this and it will the method in the controller