通过 JS（ajax）放置方法 - 后端返回 badRequest（无效模型）/C#/WebAPI/MVC答案

【问题标题】：Put method via JS (ajax) - backend returns badRequest (invalid model) / C#/WebAPI/MVC通过 JS（ajax）放置方法 - 后端返回 badRequest（无效模型）/C#/WebAPI/MVC
【发布时间】：2017-01-21 11:30:16
【问题描述】：

我有以下问题：我的 MVC 控制器中有工作的 PUT 方法

[HttpPut, Route("{id:int}")]
    public IHttpActionResult Update(int id, [FromBody]Student student)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        using (var ctx = new EfDbContext())
        {
            student.Id = id;
            ctx.Students.Attach(student);
            var dbEntry = ctx.Entry(student);
            dbEntry.State = EntityState.Modified;
            if (student.Grades != null)
            {
                foreach (var grade in student.Grades)
                {
                    ctx.Grades.Attach(grade);
                    var entry = ctx.Entry(grade);
                    entry.State = grade.Id == 0 ? EntityState.Added :
                        EntityState.Modified;
                }
            }

            ctx.SaveChanges();
        }
        return Ok();
    }

我的 javascript 也可以在 localhost 网站上处理 HTML 表单。

function addStudent() {
console.log($("#newStudent").serializeArray())
$.ajax({
    url: 'http://localhost:56658/api/api/students',
    type: 'post',
    dataType: 'json',
    data: $("#newStudent").serializeArray(),
    success: function (data) {
        $('#students').append(listItem(data));
    }
});

}

还有我的 editStudent 脚本（问题出在这里）

function editStudent(id) {
console.log($("#newStudent").serializeArray())
$.ajax({
    url: 'http://localhost:56658/api/api/students/' + id,
    type: 'put',
    dataType: 'json',
    data: { id: id,student: $("#newStudent").serializeArray() },
    success: function (data) {
        $('#students').append(listItem(data));
    }
});

}

如您所见，我有两个几乎相同的脚本。现在，问题出在 editStudent 上——只要我按下 Web 上的提交按钮（所有文本字段都填充了有效数据），我的后端就会返回 badrequest。添加学生工作得很好（我也在 POST 方法中检查模型的有效性）。 “编辑”操作的表单是现在添加学生的表单的精确副本（确保我避免了字段 ID 等中的任何拼写错误，所以我没想到会出现问题。

问题可能出在哪里？使用 Postman 进行测试时，Put 工作正常，但我无法使用 JS。

如有任何帮助，我将不胜感激干杯

【问题讨论】：

为什么在url 和data 中需要id？
我认为，editStudent 中发布的数据不适合 Student 类。请提供 Student 类的定义以及 Postman 的 JSON 数据与您的脚本发送的 JSON。我敢打赌会有一些不同。
尝试在第二个 ajax 调用中从数据中删除 id，因为您已经通过查询参数传递了它

标签： javascript c# jquery ajax asp.net-web-api

【解决方案1】：

您在 body 中传递 id，但在 action 方法中，您只期望来自 body 的 Student。

更改datain ajax:

data: $("#newStudent").serializeArray(), // pass only student

【讨论】：

谢谢，这解决了我的问题——但我想如果我的 put 方法中需要两个参数，我应该将两个参数都作为“数据”。我是 JS 新手。
@macck，是的，你必须这样做。但是你应该在第二个参数中添加[FromBody]。
再次感谢您，所以假设我需要同时通过两者，id 旁边的 [FromBody] 也应该可以解决我的问题？
是的，但是如果您将[FromBody] 放在id 之前，那么在ajax 中您应该从url 中删除id。

【解决方案2】：

为什么要使用 put？

使用 put，您想在服务器上放置/替换特定资源。
在此 url 下找不到资源，因此您收到错误请求。

基本上，请求根本不会路由到您的控制器方法。

【讨论】：