namespace AngularJSDemo.Controllers
{
using Models;
using System.Web.Http;
public class DefaultController : ApiController
{
[HttpPost]
public Person GetPerson([FromBody] Person p)
{
return p;
}
}
}
Here's the module of Person:
namespace AngularJSDemo.Models
{
public class Person
{
public string Name { get; set; }
public string Sex { get; set; }
public string Love { get; set; }
}
}
Here's the Route for the webapi:
namespace AngularJSDemo
{
using Newtonsoft.Json.Serialization;
using System.Net.Http.Formatting;
using System.Web.Http;
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Formatters.Clear();
var jsonFormatInstance = new JsonMediaTypeFormatter();
jsonFormatInstance.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
config.Formatters.Add(jsonFormatInstance);
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional,controller="Default" }
);
}
}
}
But when I click the submit button, it always tells me "405" error……Why？
angular.js:10695 POST http://localhost:60031/api 415 (Unsupported Media Type)
Member
184 Points
187 Posts
Why cannot I send a post to my WebApi through AngularJS's POST？
Nov 04, 2016 09:31 AM|852EC327|LINK
Hello all,
I'm using AngularJS and here comes my code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <div ng-app="A" ng-controller="Test"> <form method='post' name='myForm'> <table width="100%"> <tr> <td>姓名：</td> <td><input type='text' ng-model='user.name' name='myname' required/> <span style='color:red' ng-show='myForm.myname.$dirty && myForm.myname.$invalid'>姓名不能为空！</span> </td> </tr> <tr> <td>性别：</td> <td> <div ng-repeat='s in sexs'> <input type='radio' ng-model='user.sex' name='mysex' value='{{s}}'> {{s}} </div> </td> </tr> <tr> <td>爱好：</td> <td> <select ng-model='user.love' name='selLove'> <option ng-repeat='l in loves' value='{{l}}'>{{l}}</option> </select> <span style='color:red' ng-show='selChoice(myForm.selLove.$dirty);'>爱好不能为“请选择”</span> </td> </tr> </table> <input type ='submit' value='提交' ng-click='isDisable();'/> </form> </div> <script> var app = angular.module('A',[],function($httpProvider){ //初始化 $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; }); app.controller('Test',function($scope,$http){ $scope.user = {}; $scope.sexs = ['男','女']; $scope.loves = ['请选择','编程','钢琴','游泳']; //初始化选择 $scope.user.sex = '男'; $scope.user.love = '请选择'; //下拉框判断 $scope.selChoice= function(isDirty){ var isFalse = (myForm.selLove.value == '请选择' && isDirty); $scope.myForm.selLove.$invalid = isFalse; $scope.myForm.$invalid |= isFalse; return isFalse; }; $scope.isDisable = function(){ //故意把下拉框渲染已经dirty，以便校验 $scope.selChoice(true); var requestData = $.param($scope.user); alert(requestData); if($scope.myForm.$invalid){ alert('表单不合法！'); } else{ //POST请求送出，调用WebApi $http({ method:'POST', data: requestData, url:'http://localhost:60031/api', success: function (data){ alert(JSON.stringify(data)); } }); } }; }); </script> </body> </html>And here come my WebApi modules:
namespace AngularJSDemo.Controllers { using Models; using System.Web.Http; public class DefaultController : ApiController { [HttpPost] public Person GetPerson([FromBody] Person p) { return p; } } }Here's the module of Person:
namespace AngularJSDemo.Models { public class Person { public string Name { get; set; } public string Sex { get; set; } public string Love { get; set; } } }Here's the Route for the webapi:
namespace AngularJSDemo { using Newtonsoft.Json.Serialization; using System.Net.Http.Formatting; using System.Web.Http; public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.Formatters.Clear(); var jsonFormatInstance = new JsonMediaTypeFormatter(); jsonFormatInstance.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); config.Formatters.Add(jsonFormatInstance); config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional,controller="Default" } ); } } }But when I click the submit button, it always tells me "405" error……Why？
angular.js:10695 POST http://localhost:60031/api 415 (Unsupported Media Type)
Member
20 Points
19 Posts
Re: Why cannot I send a post to my WebApi through AngularJS's POST？
Nov 04, 2016 10:57 AM|navakiran|LINK
It looks like an issue with content-type issue in http call. Change the content- type value to 'application/json' .
to
Member
184 Points
187 Posts
Re: Why cannot I send a post to my WebApi through AngularJS's POST？
Nov 05, 2016 12:36 AM|852EC327|LINK
No, it doesn't work:(
All-Star
18815 Points
3831 Posts
Re: Why cannot I send a post to my WebApi through AngularJS's POST？
Nov 07, 2016 05:38 AM|Nan Yu|LINK
Hi 852EC327,
Please try to infer the 'application/json' header:
$http({ method: 'POST', url: 'https://admin.example.com/api/v1/service', headers: { 'Content-Type': 'application/json' }, data: { test: 'test' } });See more about send objects from AngularJS to WebAPI :
http://www.dotnetcurry.com/aspnet/1049/crud-database-aspnet-webapi-angularjs
http://www.c-sharpcorner.com/uploadfile/cd7c2e/send-object-of-objects-from-angularjs-to-webapi/
Best Regards,
Nan Yu