asp.net mvc 6 web api + angular资源发布数组作为对象属性
Posted
技术标签:
【中文标题】asp.net mvc 6 web api + angular资源发布数组作为对象属性【英文标题】：asp.net mvc 6 web api + angular resource post array as object property 【发布时间】：2015-12-04 17:43:54 【问题描述】：我正在尝试将一个复杂的对象从 Angular 发布到我的 webapi 对象看起来像这样
Name: "test",
Tax: 23,
Addresses: [
country: "ro",
city: "bucharest"
,
country: "fr",
city "paris"
]
和来自服务器的对象
public class Model
public Model ()
Addresses = new List<Address>();
public string Name get; set;
public int Tax get; set;
public List<Address> Addresses get; set;
并且地址有 2 个字符串属性
我的旧应用程序是用 MVC5 webapi2 编写的，并使用 angularjs $http 服务 并且对象映射完美，现在我更改为 MVC6 (asp.net 5) 和 如果我从我的 javascript 对象中删除数组，它可以正常工作，但我没有数组，如果我添加它而不是服务器上的对象为 NULL。
我的问题是：如何使用 $resource 服务将数组作为对象属性从 angularjs 发送到 mvc6 控制器？
【问题讨论】：
您需要展示本期最重要的部分。向服务器发送此数据的代码，以及在服务器上接收此数据的代码。 您是否将 JSON 发布到服务器？contentType 是什么？
【参考方案1】：
最后我成功了，我的例子如下：
test1.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="test1.js"></script>
<div ng-controller="TestController">
<div>Test</div>
</div>
</body>
</html>
test1.js
var myApp = angular.module('myApp', []);
myApp.controller('TestController', ['$scope', '$http', function ($scope, $http)
var dataObj =
Name: "test",
Tax: 23,
Addresses: [
country: "ro",
city: "bucharest"
,
country: "fr",
city: "paris"
]
$http(
url: 'http://localhost:1522/api/values',
method: 'POST',
data: JSON.stringify(dataObj),
dataType: 'json'
).success(function (data)
debugger;
alert("OK");
//TODO.....
).error(function (data)
//TODO....
);
]);
在屏幕截图上，您可以在 POST 后看到我的解决方案文件夹和断点：
用您的域替换 URL 并通过浏览器导航到 http://yourdomain/test.html 以运行您的 Angular 应用程序。
P.S.：当您的 Angular 应用程序和 Web api 在同一个域中时，它的示例有效。如果您想将它们分开（将 Angular 应用程序移动到另一个域或项目），您应该配置 CORS - How do you enable cross-origin requests (CORS) in ASP.NET 5 & MVC 6。
【讨论】：
我终于做到了，错误是因为我的数组中的属性之一是日期时间，并且格式不正确。它也适用于 ngResource 服务，但我通过创建另一个项目来解决这个问题，该项目具有更简单的对象，就像您在帖子中展示的那样。非常感谢，与您的讨论非常有帮助。以上是关于asp.net mvc 6 web api + angular资源发布数组作为对象属性的主要内容，如果未能解决你的问题，请参考以下文章
Asp.net MVC 与 Asp.net Web API 区别
asp.net mvc 6 web api + angular资源发布数组作为对象属性
Web API系列教程2.1 — ASP.NET Web API中的路由机制