Getting null while passing JSON from toolbar create button to C# controller

2 posts, 0 answers
  1. Дмитрий
    Дмитрий avatar
    3 posts
    Member since:
    Jul 2016

    Posted 14 Aug Link to this post

    Hello, need help:

    I'm getting null in all fields of an incoming parameter (class that has all same fields as the JSON) while passing JSON from toolbar "create" button to C# controller. And If I try to add some additional properties in kendo like: contentType: "application/json; charset=utf-8", I get nothing at all in the controller.  

    How can I pass JSON correctly? 

    Kendo/Jquery:

    $(document).ready(function () {
        //var arrayOfCheckedCheckBoxes = [];
        var crudServiceBaseUrl = "/api/Grid/",
                           dataSource = new kendo.data.DataSource({
                               transport: {
                                   read: {
                                       url: crudServiceBaseUrl + "GetContacts",
                                       dataType: "json"
                                   },
                                   create: {
                                       url: crudServiceBaseUrl + "CreateContacts",
                                       type: "POST",
                                       dataType: "json"
                                   }
                               },
                               batch: true,
                               pageSize: 20,
                               schema: {
                                   model: {
                                       id: "ID",
                                       fields: {
                                           ID: { editable: true},
                                           Name: { type: "string" },
                                           Number: { type: "number" },
                                           Status: { type: "string" },
                                           Discontinued: {
                                               type: "boolean",
                                              value: false
                                           }
                                       }
                                   }
                               }
                           });
     
        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            toolbar: ["create",
            {
                template: '<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>'
                  
            }
            ],
            columns: [
                { field: "ID", title: "ID" },
                { field: "Name", title: "Имя"},
                { field: "Number", title: "Номер" },
                { field: "Status", title: "Статус" },
                { template: '<input type="checkbox" class="chkbx" />', width: 40 },
                { command: ["edit"], title: " ", width: "250px" }],
            editable: "popup"
        });
     
     
     
        $(".k-grid-delete").click(function () {
            var grid = $("#grid").data("kendoGrid");
            var arrOfCheckedCheckboxes = new Array();
            
            // put all checked rows ID in to an array
            $("#grid")
                .find("input:checked")
                .each(function () {
                    var rowId = grid.dataItem($(this).closest('tr')).ID;  
                    arrOfCheckedCheckboxes.push(rowId);
                     
                });
           
             //pass array to controller
            $.ajax({
                type: "POST",
                url: "/api/Grid/DestroyContacts",
                data: JSON.stringify(arrOfCheckedCheckboxes),
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
     
                success: function(result) {
     
               
                var grid = $("#grid").data("kendoGrid");
                grid.dataSource.read();
                     
     
                }
     
            });
            
     
             
        });
     
    });

     

    C# controller:

    namespace taskColoredGrid.Controllers
    {
        public class GridController : ApiController
        {
             [HttpPost]
            public HttpResponseMessage CreateContacts([FromBody] Contacts contacts)
            {
     
                return Request.CreateResponse(HttpStatusCode.OK);
            }
      }
    }

     

    C# model:

    namespace taskColoredGrid.Models
    {
        public class Contacts
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public int Number { get; set; }
            public string Status { get; set; }
            public string Discontinued { get; set; }
        }
    }

    PrintScreen of data I'm receiving in controller in attachment:

     

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 17 Aug Link to this post

    Hello,

    The data will not be bound with the code that you provided because the batch option is enabled. In this case the dataSource by default will sent a collection named models and not a single record. Disabling the batch option should fix the problem.
    Also, if you wish to post the data as JSON then you should set the contentType and use the parameterMap function to serialize the data as JSON:
    transport: {
       read: {
           url: crudServiceBaseUrl + "GetContacts",
           dataType: "json"
       },
       create: {
           url: crudServiceBaseUrl + "CreateContacts",
           type: "POST",
           dataType: "json",
           contentType: "application/json; charset=utf-8"
       },
       parameterMap: function (data, type) {
           if (type !== "read") {
               return kendo.stringify(data);
           }
       }
    }


    Regards,
    Daniel
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top