从 Angular 发布到 .net WebAPI
Posted
技术标签:
【中文标题】从 Angular 发布到 .net WebAPI【英文标题】：POSTing from Angular to .net WebAPI 【发布时间】：2013-05-13 08:51:48 【问题描述】：我使用 Angular $resource 将模型发布到 webapi 端点，但 Angular 在请求负载中发送数据，而不是 JSON 正文或表单参数。结果，模型总是以 null 结束。
我的API如下：
public class UserController : APIController
[HttpPost]
public void Disconnect(Models.Users.User model)
请求头是：
POST /siteapi/User/Disconnect HTTP/1.1
Host: rouge2
Connection: keep-alive
Content-Length: 125
Accept: application/json, text/plain, */*
Origin: http://rouge2
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.31 (Khtml, like Gecko) Chrome/26.0.1410.64 Safari/537.31
Content-Type: application/json;charset=UTF-8
Referer: http://rouge2/Users
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: .ASPXAUTH=115C6015BDD5C1A9D111B0A9FBF05294B73287328566F65CB1BCB457DF206EF0916D4615B5914EB443AA567E860742AC14EAA2951B9C327260C4F00649694260A1B3960771FB6675FEE8F3E68B0BB46436020ACAB33ECE0D3E70B50D6569E52B27F69161762C10C19A806A12D3254DF60EF4758DEDCA529A91CB36C74B7FA7F4; __RequestVerificationToken=Rp4Vu8R67ziDNc36DoOLZH7KmEfumig1zFDmYiFWHTsWyf2I037xJQydcmLtOfaJ3ccc8GEZXmHoa8LBRusxKFRYVoy27GuFEfNhKKYS_hUysjwCjmsxw5OCK3RKsiXIAh1Gbi0PxcdqBfzctSJn9g2
以及请求负载：
"Id":3,"FirstName":"Test","LastName":"User","Username":"testuser","IsApproved":true,"IsOnlineNow":true,"IsChecked":true
如果我在 Fiddler 中进行测试，在正文中发布相同的 JSON 字符串，则模型会按预期正确填充。
是否有可以在这种情况下使用的内置模型绑定器，或者在我可以使用的某个地方预先构建的东西？
或者有人可以指出一个工作示例的方向吗？
【问题讨论】：
入门示例：codeproject.com/Articles/737030/… 【参考方案1】：对我来说，这很好用。 下面是服务端代码
[HttpPost]
public void Disconnect([FromBody] Models.Users.User model) ...
请求的客户端代码将是，
var dataToPost = id : 3, firstName : 'Test', lastName : 'User', username : 'testuser', isApproved : true, isOnlineNow : true, isChecked: true ;
var config =
headers :
'Content-Type': 'application/json;charset=utf-8;'
$http.post(thisIsUrl, dataToPost, config).then(......
【讨论】：
【参考方案2】：您可以使用$http module。
这是一个例子：
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-controller="TestController">
<ul ng-model="person">
<li>FirstName: person.FirstName</li>
<li>LastName: person.LastName</li>
<li>UserName: person.Username</li>
<li>IsApproved: person.IsApproved</li>
<li>IsOnlineNow: person.IsOnlineNow</li>
<li>IsChecked: person.IsChecked</li>
</ul>
</div>
<script type="text/javascript" src="~/scripts/angular.min.js"></script>
<script type="text/javascript">
function TestController($scope, $http)
var data = "Id": 3, "FirstName": "Test", "LastName": "User", "Username": "testuser", "IsApproved": true, "IsOnlineNow": true, "IsChecked": true ;
$http.post(
'/api/values',
JSON.stringify(data),
headers:
'Content-Type': 'application/json'
).success(function (data)
$scope.person = data;
);
</script>
</body>
</html>
假设以下控制器：
public class ValuesController : ApiController
[HttpPost]
public User Post(User model)
return model;
【讨论】：
WebAPI 似乎也希望发布的数据也被包装为“用户”对象，例如用户：data。 @mattdwen 我不认为如果你使用[FromBody] 会这样，尽管我发誓我不会那样做，没有它它仍然可以正常工作。
如果您想要或需要使用$resource怎么办？ “修复” POST 最干净的方法是什么？使用全局过滤器属性？以上是关于从 Angular 发布到 .net WebAPI的主要内容，如果未能解决你的问题，请参考以下文章
如何从 asp.net core webapi 获取数据到连接到数据库的 angular 11.0.0。我试图这样做，但它返回空记录
.Net WebAPI Post 方法在 Angular2 服务中不起作用
从 Angular 到 Net Core HTTP 404 发布错误
如何将数据表从 .net core 5.0 web api 作为 json 传递到 Angular 前端？