Angular2 Http 发布请求未绑定到 ASP.NET 5 控制器的操作答案

【问题标题】：Angular2 Http post request not binding to ASP.NET 5 controller's actionAngular2 Http 发布请求未绑定到 ASP.NET 5 控制器的操作
【发布时间】：2016-05-27 17:31:36
【问题描述】：

我正在从 Angular2 向 ASP.NET 5 控制器操作发起发布请求。 Angular 正确地发布数据并点击控制器操作，但它没有映射到控制器操作中定义的参数，参数为null。同时通过Request对象检查Request.Form具有正确的文本数据但未绑定到模型。

角度

let body = JSON.stringify({ firstName: 'Ali' });
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

this.http.post(this.url, body, { headers: headers })
            .subscribe(
                (data) => {
                    console.log('Response received');
                    console.log(data);
                },
                (err) => { console.log('Error'); },
                () => console.log('Authentication Complete')
            );

ASP.NET

[HttpPost]
public IActionResult DemoAction(string firstName)
{
      var req = Request;

      return null;
}

Request.Form 有{\"firstName\":\"Ali\"} 这样的形式的数据，但参数firstName 是null

【问题讨论】：

你为什么要“字符串化”json？只需发布 json 对象。
http.post的body参数需要是字符串
你试过直接发布数据吗？
是的，它是一样的。 firstName 参数为空，Request.Form 的值类似于 [object Object]

标签： asp.net-mvc asp.net-core angular

【解决方案1】：

您尝试发送带有内容类型 url 编码形式的 JSON 内容（使用 JSON.stringify 方法创建）。

你应该尝试使用 application/json 之一：

let body = JSON.stringify({ firstName: 'Ali' });
let headers = new Headers({ 'Content-Type': 'application/json' });

this.http.post(this.url, body, { headers: headers })

编辑

如果您想提供表单内容，可以利用 URLSearchParams 类：

var params = new URLSearchParams();
params.set('firstName', 'Ali');
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

this.http.post(this.url, params.toString(), { headers: headers })

【讨论】：

同样与content-type application/json firstName 为null 甚至Form.Request 也为null
我有一个包含许多属性的完整模型，如何将它们设置为 URLSearchParams ？
单个参数使用 URLSearchParams 正确接收，但我如何发布对象（模型）
我明白了。 “参数”到底是什么意思？是查询参数还是请求负载的属性？
作为参数发送的请求负载的属性 params.set('firstName', 'Ali');现在我想发送一个带有一组属性的完整对象/模型。我应该手动设置 params.set 中的每个属性吗？

【解决方案2】：

在这种情况下，您不需要传递标头。看这里。你可以试试这个。

this.http.post('/api/ControllerName/DemoAction?firstName=Ali')
.subscribe(
                (data) => {
                    console.log('Response received');
                    console.log(data);
                },
                (err) => { console.log('Error'); },
                () => console.log('Authentication Complete')
            );

这肯定会奏效。

已编辑：

找出您的问题。

第一：当您在API端接收参数时，您必须使用上述部分。

第二：当你在API端接收object时，你必须使用下面的代码。

我正在向您展示我的设置，因为我不知道您在服务器端的对象。

let um=JSON.stringify({ Username: "Hello1",Password:"Hello2"});

let headers = new Headers({ 'Content-Type': 'application/json'});

this.http.post(this.url+'/Authentication',um,{ headers: headers })
                        .subscribe(...);

在服务器端我有以下设置。

public class UserModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

[HttpPost]
public IHttpActionResult Authentication(UserModel um)  // I m getting value here.
{
    if (um.Username == "a" && um.Password == "a")
    {
        um.Username = um.Username;
        um.Password = um.Password;
        return Ok(um);
    }
    return NotFound();
}

简单的解决方案！不是吗？

【讨论】：

我有一个完整的模型，有很多属性，firstName 只是为了演示。我不想手动创建查询字符串
我觉得它更简单，但不幸的是我用这个解决方案得到了 null
您使用了哪种内容类型？
对不起！忘了告诉你。正在更新答案。
仍然没有得到值

【解决方案3】：

对我来说它有效：

let headers = new Headers({ 'Content-Type': 'application/json' });
this.http.post(this.url, JSON.stringify({ firstName: 'Ali' }), { headers: headers })

【讨论】：