I get "Get" web service instead of "POST" web service - asp.net

Question

I have used this post Jquery Ajax Posting json to webservice to send data to the server via "POST" web service,but it has been traited like a "Get"
in "Network" section of the browser,this is what I get:
this is my code for the web service(ASP.net):
// Insert Student
[Route("api/Students/ajout")]
[System.Web.Http.ActionName("Create")]
public async Task<HttpResponseMessage> Post(Student value)
{
try
{
if (ModelState.IsValid)
{
_StudentService.Insert(value);
var response = Request.CreateResponse<Student>(HttpStatusCode.Created, value);
await _unitOfWorkAsync.SaveChangesAsync();
return response;
}
else
{
return Request.CreateResponse(HttpStatusCode.InternalServerError, "Model state is invalid");
}
}
catch (Exception ex)
{
return Request.CreateResponse(HttpStatusCode.InternalServerError, ex.Message);
}
}
and this is my code (AngularJS)
$.ajax({
type: 'POST',
url : 'http://localhost:50001/api/Students/ajout',
dataType: 'jsonp',
contentType: "application/json; charset=utf-8",
data: { FirstName: ''+$scope.FirstName+'', LastName: ''+ $scope.LastName+'' , Email: ''+ $scope.Email+'' , DropOut:'' +$scope.dropout.value1+'' , Live: ''+$scope.live.value2+'' , ClassId:2, ImageId:1}, // On fait passer nos variables, exactement comme en GET, au script more_com.php
success: function(data){
console.log("success");
},
failure: function(errMsg) {
console.log(errMsg);
}
});
have you please any idea how can I deal with this problem,thanks a lot for help
Update:
I have changed the code like that:
$.ajax({
type: 'POST',
url : 'http://localhost:50001/api/Students/ajout',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: { FirstName: ''+$scope.FirstName+'', LastName: ''+ $scope.LastName+'' , Email: ''+ $scope.Email+'' , DropOut:'' +$scope.dropout.value1+'' , Live: ''+$scope.live.value2+'' , ClassId:2, ImageId:1}, // On fait passer nos variables, exactement comme en GET, au script more_com.php
success: function(data){
$rootScope.usersData = angular.toJson(data);
console.dir($rootScope.usersData);
console.log("success");
},
failure: function(errMsg) {
console.log(errMsg);
} });
but I get this error:
XMLHttpRequest cannot load http://localhost:50001/api/Students/ajout. Response for preflight has invalid HTTP status code 405

Answer 1

In your api try to remove [Route("api/Students/ajout")] and instead of [System.Web.Http.ActionName("Create")] put [HttpPost].
In your controller, I advise you to use angularjs queries rather than the ajax requests.
this request should run if you edit your api controller:
var request = $http({
url:"api/students/",
dataType:"json",
method:"POST",
data:JSON.stringify(student),//you can send directly the object student if is well-trained or use params:{'name':value, ...}
contentType:"application/json; charset=utf-8"
});
And in your Api controller to recovered your object if you use JSON.stringify change your method for :
[HttpPost]
public void CreateStudent([FromBody]Student value)
{
...
}
I don't know if you do, but in your html instead of bind the property firstname on your input, bind student.firstName. Like this, you can recover directly $scope.student with the property $scope.student.firstName instead of recover each property one by one. And so send directly the object like I put in example.
So I hope this will helpfull.
Keep me informed of your progress. Have nice day.