Calling Put method in Web API with asp.net MVC as client

Question

I have created a Web-api and ASP.NET MVC Client both in Different solutions with following put method in Web API
public HttpResponseMessage Put(int id, [FromBody]DataModel model)
in the put method i pass the object and it get updated in the database. Its working i have checked it with fiddler.

  Now in My MVC Application i call it using the following code
  [HttpPost] public JsonResult OrderSearch(DataModel model)
  {
  UpdateOrder(model).Wait();
  if (putresult != null && putresult != string.Empty)
  {
  return Json(putresult);
      }
  else
  {
  return Json("Error in getting result");
      }
  } 
  private async Task UpdateOrder(DataModel model) {
  string json = JsonConvert.SerializeObject(model);
  using (var client = new HttpClient())
  {
  client.BaseAddress = new Uri(url);
  client.DefaultRequestHeaders.Accept.Clear(); 
  client.DefaultRequestHeaders.Accept.Add(new
  MediaTypeWithQualityHeaderValue("application/json"));
  HttpResponseMessage response = client.PutAsync("api/values/"+ model.OrderNo,new StringContent(json)).Result;
  if (response.IsSuccessStatusCode)
    {
      putresult = await response.Content.ReadAsAsync<string>();
  }
  }
  }

But the code does not hit my Put method on the service and putresult remains blank. I try to search about PutAsync usage but could not find anything. So i replace this code with

<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {

var modelresult = {
Id: $("#Id").val(),
OrderNo: $('#OrderNo').val(),
TransportName: $('#TransportName').val(),
GRNumber: $("#GRNumber").val(),
LRNumber: $('#LRNumber').val(),
ProductCode: $('#ProductCode').val(),
QtyOrdered: $("#QtyOrdered").val(),

};

$.ajax({
url: 'http://localhost:10471/Api/Values/' + $('#OrderNo').val(),
//type: 'POST',
type: 'PUT',
data: JSON.stringify(modelresult),
headers: {
"Content-Type": "application/json"
// ,"X-HTTP-Method-Override": "PUT"
},
success: function (data) {
alert(data.responseText);
},
error: function (data) {
alert('Problem in updating Purchase Order:' + data.responseText);
}
});
return false;
});
});
</script>

and comment out the action method it seem to hit as fiddler suggest but giving this
{"Message":"The requested resource does not support http method 'OPTIONS'."}

In my web api i also set these settings 

i had done these settings as well in my web config

<system.webServer>
<modules runAllManagedModulesForAllRequests="true"></modules>
</system.webServer>

but even after that it does not seem to hit the correct method.