如何通过HTTPGET将Angular选中年份传递至ASP.NET MVC控制器

看起来你遇到的核心问题是GET请求不应该通过请求体传递参数，再加上前端绑定和控制器参数配置的小问题，导致参数无法正确接收。咱们一步步来修复：

1. 先修复前端下拉框和按钮的绑定问题 #

你的HTML里下拉框的选项绑定和按钮传参都有问题，先把这部分改对，确保能拿到用户选中的年度：

修改Admin.component.html：

<form>
  <!-- 移除formControlName（如果用模板驱动表单的话），修正ngValue为选中的exportyear.id -->
  <select [(ngModel)]="reportyear" name="exportyear">
    <option *ngFor="let exportyear of exportyears" [ngValue]="exportyear.id">
      {{ exportyear.id }}
    </option>
  </select>
</form>
<!-- 按钮点击时传递选中的reportyear，而非固定的第一个选项 -->
<button class="btn btn-primary" type="button" (click)="exportOk(reportyear)">
  <i class="glyphicon glyphicon-ok"></i>&nbsp;OK
</button>

这样用户选择不同年度时，reportyear变量会正确更新，点击按钮时就能把选中的年度传递给exportOk方法。

2. 修正Service中的GET请求构造 #

GET请求的规范里不建议携带请求体，而且ASP.NET Core的[FromBody]也不会解析GET请求的body。咱们把参数放到URL的查询字符串里：

修改Service.ts（推荐使用Angular的HttpClient替代旧的Request类，更符合最佳实践）：

import { HttpClient, HttpParams } from '@angular/common/http';

export(reportyear: string): Observable<Blob> {
  // 构建查询参数
  const params = new HttpParams().set('reportyear', reportyear);
  
  return this.http.get(environment.baseUrl + "/api/stations/export", {
    params: params,
    responseType: 'blob' as 'json' // 指定响应类型为Blob
  });
}

如果你坚持使用旧的Request类，也可以直接拼接URL：url: environment.baseUrl + "/api/stations/export?reportyear=" + encodeURIComponent(reportyear)，但HttpClient的写法更简洁安全。

3. 调整ASP.NET MVC控制器的参数绑定 #

把[FromBody]改成[FromQuery]，这样控制器就能从URL的查询字符串里获取参数了：

修改Controller.cs：

[HttpGet("export")]
public async Task<IActionResult> Export([FromQuery]string reportyear) {
  var obj = reportyear; // 现在应该能拿到正确的年度了
  var stations = await stationRepository.GetExportAsync();
  // 后续业务逻辑...
}

为什么之前不行？ #

• GET请求默认不会发送请求体，浏览器和服务器对GET带body的支持都不统一，规范里推荐用查询字符串传参。
• 你的前端按钮之前传的是固定的exportyears[0].id，不是用户选中的年度，即使请求逻辑正确也拿不到对应值。
• 控制器用了[FromBody]，它只会解析POST/PUT等带请求体的请求，GET请求的body不会被解析，所以参数一直为null。

这样修改后，点击OK按钮时，选中的年度会作为查询参数拼到URL里，控制器就能正确接收并使用了。

内容的提问来源于stack exchange，提问作者Michael