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

Posted 2023-02-27

【中文标题】Angular2 Http 发布请求未绑定到 ASP.NET 5 控制器的操作

【英文标题】：Angular2 Http post request not binding to ASP.NET 5 controller's action

【发布时间】：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]

【参考方案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 )