OpenAccess Web API entities null on POST/PUT

[Brett]

Hi-  I am scratching my head as to why I can't get entity data when making  a POST using jQuery.  I'm using the Sample Application from the Sample Kit.  WebAPIKendoUI.11 and when I try to extend the Categories controller with this  code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using WebAPIKendoUI.DataLayer;

namespace WebAPIKendoUI.Web.Controllers
{
    public partial class CategoriesController
    {
        /// <summary>
        /// Updates single entity.
        /// </summary>
        /// <remarks>Replaces the whole existing entity with the provided one</remarks>
        /// <param name="entity">Entity with the new updated values</param>
        public virtual HttpResponseMessage Put(Category entity)
        {
            var modelState = this.ModelState;

            if (entity == null)
            {
                throw new HttpResponseException(HttpStatusCode.BadRequest);
            }

            return this.Put(entity.CategoryID, entity);
        }


        /// <summary>
        /// Create single entity.
        /// </summary>
        /// <remarks>Creates new car</remarks>
        /// <param name="entity">Car entity</param>
        /// <returns>HttpStatusCode.MethodNotAllowed if Car is invalid
        /// or HttpStatusCode.NoContent if the operation was successful</returns>
        public virtual HttpResponseMessage Create(Category entity)
        {
            if (entity == null)
                throw new HttpResponseException(HttpStatusCode.BadRequest);

            this.Post(entity);

            return Request.CreateResponse(HttpStatusCode.NoContent);
        }

    }
}

jQuery:

$('.update').click(function () {
    $.ajax({
        url: "/api/categories/Put",
        type: "PUT",
        contentType: "application/json",
        success: function (result) {
            //setMarkers(map, result.d);
            console.log(result);
        },
        data: {
            CategoryID: 1, CategoryName: 'tester', ImageFileName: 'test.png'
        },
        error: function (xhr, desc, err) {
            if (xhr.status == 400) { // BadRequest
                alert('400');
            }
            else if (xhr.status == 409) { // Conflict
                alert('409');
            }
        }
    });


})

$('.create').click(function () {
    $.ajax({
        url: "/api/categories/Create",
        type: "POST",
        contentType: "application/json",
        success: function (result) {
            //setMarkers(map, result.d);
            console.log(result);
        },
        data: {
            CategoryID: '', CategoryName: 'tester', ImageFileName: 'test.png'
        },
        error: function (xhr, desc, err) {
            if (xhr.status == 400) { // BadRequest
                alert('400');
            }
            else if (xhr.status == 409) { // Conflict
                alert('409');
            }
        }
    });

I get the 400 status codes on both PUT and POST. 

Is there something I'm missing?  I followed the steps in the tutorial as well and it just isn't working for me.  Any direction would be great!! 

[Dimitar Tachev]

Hello Brett,

 
Please accept our apologies for the inconvenience caused.

Based on the details that you provided us and a little help from the Fiddler tool I was able to reproduce this behavior.

You are getting the HTTP Error 400 Bad request because of the NULL validation in the methods like the one below:

if (entity == null)
{
    throw new HttpResponseException(HttpStatusCode.BadRequest);
}

The reason for the null value is that the application/json format is specified in the AJAX request but the content data is not a valid JSON string. In order to fix this issue I suggest you change your requests parsing the data to JSON as below:

$.ajax({
        url: "/api/categories/Create",
        type: "POST",
        contentType: "application/json",
        success: function (result) {
            //setMarkers(map, result.d);
            console.log(result);
        },
        data: JSON.stringify({
            CategoryID: '', CategoryName: 'tester', ImageFileName: 'test.png'
        }),
        error: function (xhr, desc, err) {
            if (xhr.status == 400) { // BadRequest
                alert('400');
            }
            else if (xhr.status == 409) { // Conflict
                alert('409');
            }
        }
    });

Thanks to your report we found that we have an issue in the ASP.NET Web API with Kendo UI example of our Samples Kit which we already fixed and you could find it updated in our next official build.

There was a typo mistake in the row which is specifying the content type - it was in lower instead of camel case:

contenttype: "application/json",

In this way the JSON format is not really set for the request and it is using the default format where the data is valid without the JSON.stringify method.

Please find your Telerik Points updated.

I hope this is applicable for you.

Regards,
Dimitar Tachev
Telerik

[Dan]

 ---updated--
problem solved, pls ignore below.
-------
Hi,

I have similar problem, when I adapt the code for my database.
I am trying to insert very simple organization entity. Fiddler shows that data is formatted properly.
However at at /api/Organization/Create/, the entity has all values = null.

Fiddler Output format.
{"OrganizationID":"","OrgName":"new","City":"St. Peters","State":"MO"}

Pls advice.

Regards,