ASP.NET Core Action接收VUE中Axios提交Form表单参数方法及示例代码

1､使用Axios提交表单

与JQuery的不同，使用Axios提交POST请求，要求注意设置一下Content-Type为application/x-www-form-urlencoded;charset=UTF-8 和 qs.stringify(data)。

通用组件示例代码如下，

import axios from 'axios'
import qs from 'qs'
// create an axios instance
const service = axios.create({
  //baseURL: process.env.BASE_API, // api的base_url
  headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, // `headers` 是即将被发送的自定义请求头
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return qs.stringify(data)
  }],
  timeout: 5000 // request timeout
})
export default service

1) 执行get请求

//导入组件，from后面要接照实际写
import service from '@/utils/request'
      let that = this;
      service.get('/api/service/GetLotteryInfo', {
          params: {
            status: 1
          }
        })
        .then(function(response) {
          if (response.data.status == "ok") {
            //alert(response.data.message);
            debugger;
            for (var item in response.data.data) {
              that.lottery.push({
                label: response.data.data[item].name,
                value: response.data.data[item].id
              });
            }
            //that.$message.success('提交成功！')
          } else {
            that.$message.error(response.data.message);
          }
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });

2) 执行POST请求

 service.post('/api/service/SaveAwards',{name:'cjavapy',title:'cjavapy',lId:1,desc:'lottery'})
          .then(function(response) {
            if (response.data.status == "ok") {
              that.$message.success('提交成功！')
            } else {
              that.$message.error(response.data.message);
            }
            console.log(response);
          })
          .catch(function(error) {
            console.log(error);
            that.$message.error(error);
          });

2､ASP.NET Core后台接收参数

1) get请求参数比较少

public ActionResult GetAwardsList(int id)

2) get请求参数或较复杂

public ActionResult  Get([FromQuery(Name = "identifier")] int id, [FromServices] IOrderService orderService) 

或者

public ActionResult  Get([FromQuery(Name = "identifier")] int id, [FromRoute]  int orderId) 

或者

public ActionResult  Get([FromQuery(Name = "identifier")] int id, [FromHeader] string token) 

2) post请求参数

public class Pet
{
    public string Name { get; set; }
    [FromQuery] // Attribute is ignored.
    public string Breed { get; set; }
}

public ActionResult<Pet> Create([FromBody] Pet pet)

或者

public ActionResult<Pet> Create([FromForm] Pet pet)

[FromQuery]: 从查询字符串中获取值。

[FromRoute] : 从路线数据获取值。

[FromForm] : 从发布的表单字段中获取值。

[FromBody] : 从请求主体获取值。

[FromHeader] : 从HTTP的header中获取值。

相关文档：model-binding