Put Request in chrome is not binding DTO

Question

I am facing strange problem although spent much time but still unable to resolve it

Previously put request was working fine i had an issue with

Failed to load resource: the server responded with a status of 404 (Not Found) fontawesome-webfont.woff2?v=4.3.0

I resolved it by adding

<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/x-woff" />
</staticContent>

although it resolve the issue but my put method wasn't working after scratching my head i came to know its not binding model to my DTO although ModelState.IsValid == true but my DTO model is null and this happens only with put request all other request are working fine such as get, getall, delete, post and this is happening only in chrome. In Firefox put request is working fine.

I am unable to understand if ModelState is true then why chrome is not binding data to my DTO following are header request of chrome and Firefox respectively

Chrome

PUT /api/AddressTypeAPI/1 HTTP/1.1
Host: localhost:xxxx
Connection: keep-alive
Content-Length: 194
Accept: application/json, text/plain, */*
Origin: http://localhost:xxxx
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Authorization: Bearer xxxx
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:xxxx/AddressType/Index
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

Firefox

Host: localhost:xxxx
Connection: keep-alive
Content-Length: 179
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0
Authorization: Bearer xxxx
Content-Type: application/json;charset=utf-8
Referer: http://localhost:xxxx/AddressType/Index
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.5

I wonder why content length is different

Following are details as required

My angular JS function which calls webapi

 service.put = function (ID, DataBundle) {
    var request = $http({
        method: "put",
        url: url + "/" + ID,
        data: { DataBundle: DataBundle }
    }).catch(exceptionHandler);
    return request;
}

DataBundle-->
Active:"Y"
Code:"0002"
CreateDate:null
CreateUser:null
Description:"Office Address"
ID:2
ModifyDate:"2015-10-19T02:15:06.6241496"
ModifyUser:1
Name:"Office"
__proto__:Object

Sever side code for put request from chrome enter image description here

DTO class to bind incoming model

public class ParamDTO
    {
        public int ID { get; set; }
        public string Code { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Active { get; set; }
        public Nullable<int> CreateUser { get; set; }
        public Nullable<System.DateTime> CreateDate { get; set; }
        public Nullable<int> ModifyUser { get; set; }
        public Nullable<System.DateTime> ModifyDate { get; set; }
        public bool Deleted { get; set; }
        public Nullable<int> UserLevelID { get; set; }
        public string StatusType { get; set; }
    }

Answer 1

Got it done my angularJS calling function was having problem this line

data: { DataBundle: DataBundle }

should be

 data: DataBundle 

I am not sure why it was sometimes working with firefox. If anyone can contribute to explain this that would be appreciating