Javascript 如何在没有[FromBody]模型绑定的情况下使用Axios将列表数据发布到.net mvc

我正在尝试使用

Axios

将对象列表发布到后端

但后端无法获取任何对象列表参数

代码：

发布数据
函数postData（）{
让mockData=[]；
mockData.push（{ID:0，名称：“John”}）；
mockData.push（{ID:1，名称：“Mary”}）；
mockData.push（{ID:2，名称：“Alex”}）；
mockData.push（{ID:3，名称：“July”}）；
mockData.push（{ID:4，名称：“Steve”}）；
console.log（mockData）；
const formData=new formData（）；
formData.append（'model'，mockData）；
axios.post（'/Home/Receive'，formData）
.then（res=>console.log（res.data））
.catch（（错误）=>{console.error（错误）}）；
}

[HttpPost]
公共IActionResult接收（列表模型）
{
var itemList=模型；
返回视图（）；
}
公共类成员信息
{
公共int ID{get；set；}
公共字符串名称{get；set；}
}

在上面的代码中，后端总是获取null

结果:

发布到此函数时，Awayls将获取null

甚至我在函数中添加了

[FromQuery]

或

[FromForm]

。

---

我知道我可以使用

[FromBody]

获取对象列表。那么，在没有像下面这样调用post操作的情况下，如何获取对象列表呢

axios.post('/Home/Receive', formData)

将始终将数据放在请求正文中

例如，如果希望从查询中获取，则必须调整后端和客户端javascript调用：

        [HttpGet]
        public IActionResult Receive([FromQuery]List<MemberInfo> model)
        {
            var itemList = model;
            return View();
        }


... JS

        axios.get('/Home/Receive', formData)
            .then(res => console.log(res.data))
            .catch((error) => { console.error(error) });

[HttpGet]
公共IActionResult接收（[FromQuery]列表模型）
{
var itemList=模型；
返回视图（）；
}
... JS
axios.get（'/Home/Receive'，formData）
.then（res=>console.log（res.data））
.catch（（错误）=>{console.error（错误）}）；

更新：

---

如果希望将其作为后期操作，而不使用

[FromBody]

属性，则可以向控制器添加

[ApicController]

属性-这是第二个选项，您可以根据控制器操作和模型类的代码使用来发布数据并将值绑定到模型的属性，您可以尝试：

方法1：在JavaScript客户端生成并发布如下所示的formdata

function postData() {
    let mockData = [];
    mockData.push({ ID: 0, Name: "John" });
    mockData.push({ ID: 1, Name: "Mary" });
    mockData.push({ ID: 2, Name: "Alex" });
    mockData.push({ ID: 3, Name: "July" });
    mockData.push({ ID: 4, Name: "Steve" });
    console.log(mockData);


    const formData = new FormData();
    //formData.append('model', JSON.stringify(mockData));
    for (var i = 0; i < mockData.length; i++) {
        formData.append(`model[${i}].ID`, mockData[i].ID);
        formData.append(`model[${i}].Name`, mockData[i].Name);
    }


    axios.post('/Home/Receive', formData)
        .then(res => console.log(res.data))
        .catch((error) => { console.error(error) });
}

测试结果

---

我希望

将
对象数组发布到此函数，而不是使用get方法。我希望它能自动绑定模型。第一种方法是工作！我终于可以将对象列表发布到后端了。
public class MemberInfoModelBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
        {
            throw new ArgumentNullException(nameof(bindingContext));
        }

        // ...
        // implement it based on your actual requirement
        // code logic here
        // ...

        //var options = new JsonSerializerOptions
        //{
        //    PropertyNameCaseInsensitive = true
        //};

        var model = JsonSerializer.Deserialize<List<MemberInfo>>(bindingContext.ValueProvider.GetValue("model").FirstOrDefault());

        bindingContext.Result = ModelBindingResult.Success(model);
        return Task.CompletedTask;
    }
}

[HttpPost]
public IActionResult Receive(
    [ModelBinder(BinderType = typeof(MemberInfoModelBinder))]List<MemberInfo> model)
{
    var itemList = model;
    return View();
}

const formData = new FormData();
formData.append('model', JSON.stringify(mockData));