如何将数据从 Angular $http 服务发布到 Web API 控制器？答案

【问题标题】：How can I POST data to a WebAPI controller from Angular's $http service?如何将数据从 Angular $http 服务发布到 Web API 控制器？
【发布时间】：2013-08-07 14:35:01
【问题描述】：

我尝试关注this example。

这是我的 C# 代码：

public class MyModel
{
    int? ID { get; set; }
}

public class MyResourceController : ApiController
{
    [HttpPost]
    public MyModel MyPostAction(MyModel model)
    {
        return model;
    }
}

这是我的 JavaScript：

var data = { model: { ID: 1 } };
$http.post(
    '/api/MyResource/MyPostAction',
    JSON.stringify(data),
    {
        headers: {
            'Content-Type': 'application/json'
        }
    }
);

当我在操作中设置断点并且model.ID 是null 而不是1。如何发布复杂的对象？

【问题讨论】：

您可以通过在标题中使用 [FromBody] 来跳过字符串化。见stackoverflow.com/questions/27869763/…

标签： c# javascript angularjs asp.net-web-api

【解决方案1】：

将public 添加到MyModel 上的属性修复了它（facepalm）。

我最终在客户端上使用了这个：

var data = { ID: 1 };
$http.post('/api/MyResource/MyPostAction', data);

谢谢大家。

【讨论】：

【解决方案2】：

$http.post('/api/MyResource/MyPostAction', data);

删除 JSON.stringify 并按原样发布数据。

您也不需要指定 json 标头，因为它是 post 的默认值。

在服务器上：

如果您只使用 json，请从 webapi 中删除 Xml

//WebApiConfig.js
var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);

【讨论】：

那行不通。 :/ （我取出了头配置对象并取出了 JSON.stringify）
哦，我已经使用包管理器来获取 Ninject 和 Newtonsoft 的 JSON.NET。也许这会以某种方式干扰？
只有在提供了数据并且没有未定义的情况下，JSON 才是默认的。否则它是 XML。如果您的 Web API 控制器没有用于 XML 的媒体格式化程序，这一点很重要。
@WordsLikeJared 奇怪。已经更新了从 webapi 中删除 xml 格式化程序的答案，尽管当 http 标头状态为 json 时尝试 xml 不应该那么愚蠢
我在我的财产上丢失了public。感谢所有的帮助。

【解决方案3】：

您无需将数据包装到model 属性中：

var data = { ID: 1 };
$http.post('/api/MyResource/MyPostAction', data);

【讨论】：

我在我的财产上错过了public...不过这有帮助。谢谢。