.Net Core 3.0 Angular 应用程序发布请求参数始终为 NULL

Question

我想指出这是我的第一个.Net Core Angular 项目，如果问题看起来很明显，我深表歉意，我查看了类似的问题，但我的问题仍然存在，所以我想我做错了什么。

So i have created a.Net Core 3.0 Angular project in Visual Studio and created a select menu that on change sends a POST request with the selected value, however on the controller the received POST is always NULL

这是我的 HTML

<select class="form-control" (change)="languageChanged($event.target.value)">
  <option *ngFor="let language of languages | keyvalue:returnZero" value="{{language.key}}">{{language.value}}</option>
</select>

对于客户端的 POST 请求，我尝试了以下两种方法：

    this.http.post("Language", lang).subscribe(result => {
  console.log(result);
}, error => console.error(error));

和

this.http.post<LanguageInterface>("Language", lan).subscribe(result => {
  console.log(result);
}, error => console.error(error));

在哪里

export interface LanguageInterface { language: string; }

在服务器端

public class Language
{
  public string language { get; set; } 
}

在 HTTP 帖子上，我还尝试了两件事

public IActionResult Post(Language lan)
{
  // logic
  return Ok();
}

我试图将方法更改为

public async Task<IActionResult> Post([FromForm]Language lan)

任何帮助，将不胜感激！ 感谢您的时间！

Answer 1

您的帖子中有几个不同的问题，我很乐意为您解决：

为什么您的 controller 方法中没有填充语言？

您指出 API controller 上的方法如下所示：

public IActionResult Post(Language lan)
{
  // logic
  return Ok();
}

您没有说明您是否在设置中配置端点，所以我假设没有。 您应该将其更新为如下所示。 这将做两件事：1）第一行将通知 ASP.NET 核心此方法应匹配带有命名模板的 POST 请求，2）参数中的[FromBody]属性告诉 ASP.NET 核心从哪里填充值（您的 POST身体）。

[HttpPost("Language")] //Handles a call to /language as you attempt in both your first and second calls from Angular.
public IActionResult Post([FromBody]Language lan)
{
  //logic
  return Ok();
}

您是否应该在上一个 controller 示例中使用async和Task<T>

除非您在//logic注释中执行异步活动，否则没有理由用async装饰方法或让它返回Task<IActionResult> 。 上面的例子绰绰有余。

你甚至填充任何要发送的数据吗？

这值得一看您的网络请求以进行验证，但除非您在 Angular 组件中进行一些映射，否则您将选项字段的值设置为“language.key”，但在您this.http.post ，你传入lang和随后的lan ，这两者都没有在你的示例代码中使用。 因此，我无法深入了解那里可能发生的情况，但值得在浏览器中打开网络工具并确认对服务器的 POST 请求实际上填充了来自 Angular 组件的预期数据。

在调用this.http.post时，您可能会误解 Angular 端的 TypeScript 语法

您表示您正在尝试使用以下方式发送数据：

this.http.post<LanguageInterface>("Language", lan).subscribe(result => {
  console.log(result);
}, error => console.error(error));

我在这里的担忧仅源于您给出的第二个示例，因为您正在从LanguageInterface传入数据，大概以某种方式传入lan参数，但您也在this.http.post<LanguageInterface>引用了它。 在方法上使用 <> 是为了键入您期望从调用中获得的响应，并且在此处未正确使用。 相反，因为 ASP.NET Core 中的 controller 方法都简单地返回Ok() ActionResult ，所以没有预期的响应类型，所以这在这里没有多大意义。

在这种情况下，您从 Angular 发出的第一个帖子调用使用正确的语法：

this.http.post("Language", lang).subscribe(result => {
  console.log(result);
}, error => console.error(error));

结果将仅包含HttpResponse并且不希望在响应中包含正文，更不用说应该键入任何内容的正文。

结论

同样，我无法说明您如何在表单和您的 POST 数据调用之间进行映射，但请随时提供更多示例代码并在评论中通知我，我很乐意将其审核为出色地。

在您的 Angular 组件中

this.http.post("Language", lang).subscribe(result => {
  console.log(result);
}, error => console.error(error));

你的 ASP.NET 内核 controller 方法

[HttpPost("Language")] //Handles a call to /language as you attempt in both your first and second calls from Angular.
public IActionResult Post([FromBody]Language lan)
{
  //logic
  return Ok();
}

为什么[HttpPost("Language")]会破坏这个？

您最初没有在您的问题中提供 controller 签名，所以这在以前并不明显。 Because your [Route] attribute on the controller is set as [Route("[controller]")] , it is using an ASP.NET Core convention to use the name of the controller before "Controller" - in your case, your class is " LanguageController”，因此对 /Language 的任何请求都将指向此处作为有效选项。

由于我随后在[HttpPost("Language")]上建议了一条路线，这进一步增加了匹配所需的模式。 如果您向localhost:<port>/Language/Language发送 POST 请求，您会看到它与预期的方法匹配。

为了解决这个问题，只需将方法上的属性更改为[HttpPost]并消除模板参数将意味着这将匹配对localhost:<port>/Language的调用，假设这是唯一具有此签名的 POST 方法controller。

Answer 2

因此，通过 Xaniff 的有用回答和一些阅读，我设法让它发挥作用！ 我做了以下更改

在 angular 组件内：

let post: LanguageInterface = {
  language: this.currentLanguage,
}
this.http.post("Language", post).subscribe(result => {
  console.log(result);
  this.data.changeLanguage(this.currentLanguage);
  this.toastr.success("Ok");
 }, error => console.error(error));

我正在使用我创建的界面来设置接收值并将其发布到 controller controller 代码：

[ApiController]
[Route("[controller]")]
public class LanguageController : Controller
{

    [HttpPost]
    public IActionResult Post([FromBody]Language lan)
    {
        // logic
        return Ok();
    }

}

即使认为这是可行的，我也会很感激为什么“ [HttpPost("Language")] ”会使其损坏。

真诚的问候！

Answer 3

我在这里遇到了类似的问题，但没有人提供我自己得到的答案，所以我写这篇文章希望它可以帮助像我这样的下一个流浪汉。

It turns out, in .net core model binding(any version) for POST, regardless of if its angular, jquery, or what have you, the variable NAME of the post method matters.

你有这个：

public IActionResult Post(Language lan)
{
  // logic
  return Ok();
}

但你需要的是这个

public IActionResult Post(Language language)
{
  // logic
  return Ok();
}

强调变量名称与 class 名称相同，但首字母较低。

这花了我太长时间来解决它是什么，我希望它可以帮助您或其他处理相同情况的人。