如何将数组从 angular 8 发送到 web api 核心？答案

【问题标题】：How to send an array from angular 8 to web api core?如何将数组从 angular 8 发送到 web api 核心？
【发布时间】：2019-10-10 20:35:44
【问题描述】：

我在 typeScript 文件中有方法：

searchUsers() {
    this.filterParams = [
        { parameterName: 'FirstName', filterOperator: 'Like', parameterValue: this.firstName },
        { parameterName: 'LastName', filterOperator: 'Like', parameterValue: this.lastName },
        { parameterName: 'UserName', filterOperator: 'Like', parameterValue: this.userName },
        { parameterName: 'Email', filterOperator: 'Like', parameterValue: this.email }
    ];
    this.service.getUsers(this.id, this.filterParams);
}

调用服务方法：

getUsers(id, filterParams) {
  let params = new HttpParams()
    .set('id', id);
    .set('filterParams', filterParams);
  this.http.get(this.rootURL + '/user/getUsers', { params: params })
    .subscribe((res: any) => {
      this.users = res.users;
    };
  });
}

Web api核心中的FilterParameter模型是：

public class FilterParameter
{
    public string ParameterName;
    public FilterOperator FilterOperator;
    public string ParameterValue;
}

单击 Angular 中的搜索按钮后，我的 web api 核心方法正在触发。这是我在 web api 核心中的方法：

[Route("getUsers/{id?}/{filterParams?}")]
[HttpGet]
public ActionResult GetUsers(int id, [FromQuery] List<FilterParameter> filterParams)
{
    try
    {
        _logger.LogInformation("Geting all users from the database");
        var users = _baseBL.GetUsers(id, filterModel);
        return Ok(new { users = users.Results, usersCount = users.RowCount});
    }
    catch (Exception ex)
    {
        _logger.LogError($"Something went wrong: {ex}");
        return StatusCode(500, "Internal server error");
    }
}

Id 很好，但问题是我的 filterParams 是空列表。知道为什么吗？

【问题讨论】：

您是否尝试使用 POSTMAN（或类似方法）向 API 发送此类请求并查看参数是否正常？我问是因为第一件事是确定问题出在哪里（后端或前端）。如果后端合同在 Angular 中定义明确，您只需格式化请求以履行该合同。
@lealceldeiro 我不确定我是否知道如何使用邮递员发送 filterParams ......我之前做过，它仍然是空列表，但我在发送参数时可能是错误的。我现在将搜索如何正确发送参数，然后我会回来......

标签： c# angular asp.net-core-webapi angular8

【解决方案1】：

你应该使用HttpPost来实现它。

角度：

this.http.post(this.rootURL + '/user/getUsers/' + id, filterParams)
    .subscribe((res: any) => {
      this.users = res.users;
    };
});

.NET

[Route("getUsers/{id?}")]
[HttpPost]
public ActionResult GetMembersInGym(int gymId, [FromBody] List<FilterParameter> filterParams)
{
 ...
}

要使用 Get，请使用 FromUri 尝试如下：

public ActionResult GetUsers(int id, [FromUri] List<FilterParameter> filterParams)
{
}

【讨论】：

为什么？ GET 旨在检索信息（POST 没有）....这就是 OP 需要的（获取信息）？为什么要改成POST？
随着这篇文章获得越来越多的支持......请任何人向我解释一下为什么要用于检索信息的端点应该映射到POST 方法？
你给了我你链接这篇文章的原因，绝对不应该把它改成POST，只是为了检索信息！。从该链接引用：但一般而言，GET 用于服务器向客户端返回一些数据并且对服务器没有任何影响，而POST 用于在服务器上创建一些资源。所以一般不应该是一样的。
我已经提到了一个特定的答案，让我重写而不是发送链接。用户在 uri 中传递名字、电子邮件等参数，假设电子邮件和名字很长，则存在 URL 最大长度异常的风险。此外，由于传递了参数，因此响应并不总是相同的。如果我们想要一个幂等请求 URI（即响应始终相同），则使用 GET，否则使用 POST。
我已经发表了我的观点..我可能是错的，请提出你自己的观点，辩论没有意义:)

【解决方案2】：

首先你的id 应该附加 url 作为参数，第二个发送查询参数使用{params:yourparamsobject} 所以你的代码应该是

  getUsers(id, filterParams) {
      let params = {filterParams:filterParams};
      this.http.get(this.rootURL + '/user/getUsers'+id, { params: params })
        .subscribe((res: any) => {
          this.users = res.users;
        };
      });
    }

还要注意您的 api 模型中 FilterOperator 的类型为 FilterOperator 并且在 ui 上您正在发送字符串，因此要么将 FilterOperator 更改为在 api 上键入字符串，要么更改 filterOperator 以匹配 ui 上的类型

【讨论】：