.Net Core 3.0 Angular应用后请求参数总是NULL。

问题描述 投票:0回答:1

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

所以我在Visual Studio中创建了一个.Net Core 3.0 Angular项目,并创建了一个选择菜单,在变化时发送一个带有选择值的POST请求,但是在控制器上,收到的POST总是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)

任何帮助将是感激的!感谢您的时间。

c# typescript post .net-core angular8
1个回答
1
投票

在你的帖子中,有几个不同的问题,我很乐意为你解决。

为什么你的控制器方法中没有填充语言?

你指出你的API控制器上的方法看起来像。

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

你没有说明你在设置中是否配置了Endpoints 所以我假设没有 你应该更新这个方法,使其看起来像下面这样。这将做两件事。1)第一行会通知ASP.NET Core,这个方法应该与命名模板的POST请求相匹配;2)第一行会通知ASP.NET Core,这个方法应该与命名模板的POST请求相匹配。[FromBody] 属性告诉ASP.NET Core从哪里填充该值(您的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();
}

你是否应该使用 asyncTask<T> 在您上一个控制器样本中

除非你在你的应用程序中执行异步活动。//logic 注释,没有理由用该方法来装饰 async 或者让它返回一个 Task<IActionResult>. 上面的例子已经足够了。

你是否填充了任何数据来发送?

这将值得看一下你的网络请求来验证,但除非你在Angular组件中做了一些映射,否则你将选项字段的值设置为 "language.key",但在你对 this.http.post,你通过在 lang 并随后 lan 都没有在你的示例代码中使用。因此,我不能深究那里可能发生了什么,但值得在浏览器中打开你的网络工具,并确认向服务器发出的POST请求是否真的从Angular组件中填充了预期的数据。

你可能是误解了Angular方面的TypeScript语法,在你对 this.http.post

你表示你正试图用发送数据。

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

我的关注点仅仅是来自于你举的第二个例子 因为你要传递的数据是来自于一个... LanguageInterface,大概是进入 lan 参数,但你也在 this.http.post<LanguageInterface>. 在方法上使用<>是为了键入你期望从调用中得到的响应,在这里没有正确使用。相反,因为你在ASP.NET Core中的控制器方法都是简单地返回一个 Ok() ActionResult,没有预期的响应类型,所以这在这里没有什么意义。

在这种情况下,你的第一个来自Angular的post调用使用了正确的语法。

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核心控制器方法

[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")] 突破这个?

你原来在问题中没有提供控制器的签名,所以这个之前并不明显。因为你的 [Route] 属性设置为 [Route("[controller]")]在你的例子中,你的类是 "LanguageController",所以任何对Language的请求都会指向这里作为一个有效的选项。

由于我当时建议在 [HttpPost("Language")],这进一步增加了匹配所需的模式。如果你发送一个POST请求到 localhost:<port>/Language/Language,你会看到它在方法上与预期的匹配。

要解决这个问题,只需将方法的属性改为 [HttpPost] 并去掉模板参数,意味着这将匹配对 localhost:<port>/Language,假设这是唯一的POST方法与此签名在控制器。


0
投票

因此,在Xaniff的帮助下,我从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));

我正在使用我创建的接口来设置接收值并将其发布到控制器上控制器代码。

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

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

}

即使认为这是工作的,我将感谢一个答复,为什么"[HttpPost("Language")]"使它打破。

真诚的,谢谢

© www.soinside.com 2019 - 2024. All rights reserved.