通过 HTTPGET 将 Angular Observable 传递给 ASP MVC答案

【问题标题】：Pass Angular Observable to ASP MVC via HTTPGET通过 HTTPGET 将 Angular Observable 传递给 ASP MVC
【发布时间】：2020-12-08 11:47:24
【问题描述】：

在 HTML 中，当您单击下面的 exportok() 按钮时，我希望将当前年份（aka.2020）从选定的下拉列表发送到名为 EXPORT 的 .NET MVC 控制器函数HTTPGET 调用"/api/stations/export”.

Admin.component.ts

exportyears = [
    {name: '1 July 2019 to 30 June 2020', id: '2019-2020'},
    {name: '1 July 2020 to 30 June 2021', id: '2020-2021'},
  ];

Admin.component.html

<form>
  <select formControlName="exportyear" [(ngModel)]="reportyear"(change)="onClickMe()">
    <option 
      *ngFor="let exportyear of exportyears" [ngValue]="exportyears"
    >
      {{ exportyear.id }}
    </option>
  </select>
</form>

<button class="btn btn-primary" type="button" (click)="exportOk(exportyears[0].id)">
<i class="glyphicon glyphicon-ok"></i>&nbsp;OK</button>

服务.ts

export(reportyear: string): Observable<Response> {
  
//  let headers = new Headers();
  //   headers.append('Content-Type', 'application/json');
 // headers.append('reportyear', reportyear);

  let request = new Request({
    method: RequestMethod.Get,
    url: environment.baseUrl + "/api/stations/export",
    responseType: ResponseContentType.Blob,
    body: {reportyear}
  }
);

Station.ts

exportOk(reportyear: string) {
  this.exporting = true;
  this.exportMessage = null;

  this.stationsService.export(reportyear)
    .subscribe(
      (res: Response) => {
        this.exporting = false;
        this.exportModal.hide();
        Utils.launchAttachment(res);
      },
      error => {
        this.exporting = false;
        if (error.error) {
          this.exportMessage = error.error;
        }
        else {
          this.exportMessage = error;
        }
      }
    );

ASP.NET MVC 控制器控制器.cs

[HttpGet("export")]
  public async Task<IActionResult> Export([FromBody]string reportyear)
  {
    var obj = reportyear; //show me the year so I can use it further down the line…..
    var stations = await stationRepository.GetExportAsync();
    ......
  }

【问题讨论】：

你有像 500 或 400 这样的错误吗？如果不是，那么它必须在您发送的内容（url/data）和控制器操作之间。最后你应该有这样的东西：“/api/stations/export/2019-2020”对吗？试试这个 [HttpGet("year")] public async Task Export(string year) { ... }
HttpGet括号中的内容必须与函数参数中的相同。尝试使用大括号：[HttpGet("{year}")]。
谢谢思南。我得到的错误是：5000/api/stations/export:1 加载资源失败：服务器响应状态为 415（不支持的媒体类型）。将尝试 [HttpGet("export {year}")]。我认为这是因为它无法识别标题。
好的，现在我更新到 [HttpGet("export{reportyear}")] 并得到 404 Not Found。
在您的 url -> localhost:5000/api/stations/export，站是您的控制器名称，导出是操作。所以你的函数名必须是Export，直到这里一切都好。它不是 [HttpGet("export {year}")] 而是 [HttpGet("{year}")]。

标签： angular asp.net-mvc

【解决方案1】：

我有这样的东西，可能对你有帮助。

        /// <summary>
    /// Find a product by name
    /// </summary>
    /// <param name="Name"></param>
    /// <returns></returns>
    [HttpGet("{name}")]
    [ProducesResponseType(StatusCodes.Status200OK)]
    [ProducesResponseType(StatusCodes.Status404NotFound)]
    public async Task<IActionResult> GetByName(string name)
    {
        try
        {
            var item = await _productService.GetOneByName(name);

            if (item != null)
            {
                return Ok(item);
            }
            return NotFound();
        }
        catch (System.Exception ex)
        {
            return StatusCode(StatusCodes.Status500InternalServerError, ex.Message.ToJson());
        }
    }

您可以看到大括号 [HttpGet("{name}")] 中的内容与函数参数 GetByName(string name) 中的内容相匹配。顺便说一句，如果你不这样做，我建议你使用 postman 来调试你的 api。

更新
试试这个：

export(reportyear: string): Observable<Response> {

let request = new Request(
   {
      method: RequestMethod.Get,
      url: environment.baseUrl + "/api/stations/export" + "/" + reportyear,
      responseType: ResponseContentType.Blob
   }
);

【讨论】：

谢谢西安。我现在明白你的意思了。我已将 MVC 控制器更新为 [HttpGet("{reportyear}")] public async Task Export(string reportyear) 但我仍然得到 404。也会检查 Postman
好的，所以这意味着数据库中没有与您的请求相匹配的内容。
还没有，我仍然得到 404。Angular 函数是 (click)="exportOk(exportyears[0].id)。但我明白你的意思，它需要 {reportyear}
完全正确！你离得够近了。
我想我需要修改这个导出（reportyear: string）：Observable { let headers = new Headers(); headers.append('reportyear', reportyear); let request = new Request({ method: RequestMethod.Get, url: environment.baseUrl + "/api/stations/export", responseType: ResponseContentType.Blob } );