Angular POST to Web API不传递数据

时间:2014-05-29 04:07:33

标签: angularjs asp.net-web-api

我已经使用jQuery编写针对ASP.NET Web API的代码了一段时间,并且我在Angular中开始了一些新的东西(针对相同的Web API后端编写。)

我正在发布一个方法,该方法将返回系统中某个实体的一些搜索结果。它看起来像这样:

public IEnumerable<dynamic> Post(string entity, FormDataCollection parameters)
{
    // entity is passed on the route.
    // parameters contains all the stuff I'm trying to get here.
}

如果我使用jQuery.post调用该方法:

$.post('api/search/child', {where : 'ParentID = 1'}, function(d){ foo = d });

它运作正常并返回我期望的结果。

我已经在我的角应用程序中提供了一个类似的电话服务:

$http.post('api/search/child', { where: 'parentID = ' + parent.ID })
.success(function (data, status, headers, config) {
    // etc.
})

但当它击中我的&#34; Post&#34;服务器上的方法,&#34;参数&#34;是空的。

经过一些谷歌搜索后,我尝试添加内容类型标题以确保它作为JSON传递,并尝试使用JSON.stringify-ing和$ .param() - &#34;数据& #34;争论,但那并没有做任何事情(从我所读到的那些不应该做的事情。)我在这里做错了什么?谢谢你的帮助!

更新: 这是来自(工作)jQuery示例的原始请求:

POST http://localhost:51383/api/search/child HTTP/1.1
Accept: */*
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost:51383/mypage.aspx
Accept-Language: en-US
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: localhost:51383
Content-Length: 23
DNT: 1
Connection: Keep-Alive
Pragma: no-cache
Cookie: (etc)
Authorization: (etc)

where=ParentID+%3D+1

来自(失败的)Angular样本的原始请求:

POST http://localhost:51383/api/search/parent HTTP/1.1
Content-Type: application/json;charset=utf-8
Accept: application/json, text/plain, */*
Referer: http://localhost:51383/mypage.aspx
Accept-Language: en-US
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Connection: Keep-Alive
Content-Length: 27
DNT: 1
Host: localhost:51383
Pragma: no-cache
Cookie: (etc)

{"where":"ScorecardID = 1"}

非常奇怪。即使我添加了&#39; json&#39;数据类型参数到jQuery调用结束时,它仍然会创建www-form-urlencoded请求。那是有效的。我的Web API应用程序已经为JSON设置(但感谢Dalorzo)。

3 个答案:

答案 0 :(得分:3)

检查您的配置中是否包含JSON Formatter。它应该是这样的:

    System.Web.Http.GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();
    config.Formatters.Insert(0, new System.Net.Http.Formatting.JsonMediaTypeFormatter());

Content-Type=application/json仅在您设置正确的格式化程序时才有效。

您也可以尝试在参数类型旁边使用[FromBody]。

答案 1 :(得分:2)

解决!发现了这个问题:

AngularJs $http.post() does not send data

指着这篇可爱的文章:

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

结果表明,Angular不会像jQuery那样发布数据,但你可以通过一些调整来覆盖它。

答案 2 :(得分:2)

我通过以下代码解决了这个问题:

客户端:

     $http({
                url: me.serverPath,
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).
                success(function (serverData) {
                    console.log("ServerData:", serverData);
    ......

请注意,数据是一个对象。

在服务器上(ASP.NET MVC):

[AllowCrossSiteJson]
        public string Api()
        {
            var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
            if (data == null) return "Null Request";
            var bl = Page.Bl = new Core(this);

            return data.methodName;
        }
跨域请求需要

和'AllowCrossSiteJsonAttribute':

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
    }