如何从Vue.js向ASP.NET Core API传递DateTime数组参数？

相关代码 #

后端.NET接口代码 #

[HttpGet("/GetBusinessDaysWithPublicHolidayDates/")]
public int GetBusinessDays(DateTime startDate, DateTime endDate,[FromQuery] IList<DateTime> publicHolidays)
{
    var noOfDays = _dayCalculatorService.BusinessDaysBetweenTwoDates(startDate, endDate, publicHolidays);
    return noOfDays;
}

前端Vue调用代码 #

var arr = JSON.stringify(this.publicHolidays);
axios.get('https://localhost:7054/GetBusinessDaysWithPublicHolidayDates', {
    params: {
      startDate: this.startdate,
      endDate:this.enddate,
      publicHolidays:JSON.parse(arr)
    }
})

问题表现 #

• Axios默认生成的请求URL格式：

https://localhost:7054/GetBusinessDaysWithPublicHolidayDates?publicHolidays[]=2022-06-16T14:39:00.000Z&publicHolidays[]=2022-06-20T14:39:00.000Z

• .NET接口可正常识别的URL格式：

https://localhost:7054/GetBusinessDaysWithPublicHolidayDates?publicHolidays=2022-06-16T14:39:00.000Z&publicHolidays=2022-06-20T14:39:00.000Z

核心原因是Axios默认序列化数组参数时，会自动给参数名追加[]后缀，和.NET默认的[FromQuery]集合绑定规则不匹配。

修复方案 #

方案1：调整Axios序列化配置（推荐） #

直接在请求配置中添加paramsSerializer规则，指定数组序列化为重复key不带下标的格式，同时去掉多余的JSON.stringify/parse转换，直接传原始数组即可。
Axios 0.22及以上版本可使用简化配置：

axios.get('https://localhost:7054/GetBusinessDaysWithPublicHolidayDates', {
    params: {
      startDate: this.startdate,
      endDate: this.enddate,
      publicHolidays: this.publicHolidays
    },
    paramsSerializer: {
      indexes: null
    }
})

低版本Axios可自定义序列化函数：

axios.get('https://localhost:7054/GetBusinessDaysWithPublicHolidayDates', {
    params: {
      startDate: this.startdate,
      endDate: this.enddate,
      publicHolidays: this.publicHolidays
    },
    paramsSerializer: (params) => {
      const searchParams = new URLSearchParams();
      Object.entries(params).forEach(([key, val]) => {
        if(Array.isArray(val)) val.forEach(item => searchParams.append(key, item));
        else searchParams.append(key, val);
      });
      return searchParams.toString();
    }
})

配置后生成的URL会自动匹配.NET接口的参数绑定规则，数组可以被正常识别。

方案2：调整后端绑定规则兼容前端格式 #

如果不方便修改前端配置，可以在后端参数上指定绑定的参数名，适配带[]的参数格式：

[HttpGet("/GetBusinessDaysWithPublicHolidayDates/")]
public int GetBusinessDays(
    DateTime startDate, 
    DateTime endDate,
    [FromQuery(Name = "publicHolidays[]")] IList<DateTime> publicHolidays)
{
    var noOfDays = _dayCalculatorService.BusinessDaysBetweenTwoDates(startDate, endDate, publicHolidays);
    return noOfDays;
}

注意：如果传递的时间带Z后缀表示UTC时间，.NET后端接收时会自动转换为服务器本地时间，如果需要保留UTC时间，建议将参数类型改为DateTimeOffset或者明确指定时间的Kind属性，避免时间计算偏差。

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