提交表单返回 400 状态

Question

在视图中，我正在创建一个项目。在表格中，我正在填写项目数据。该项目有服务，对于他们，我使用 jQuery 模态表单来进行服务上的 CRUD 操作。对于 CRUD 操作，我使用 AJAX。在此视图中，我有 2 个部分视图 - 用于输入服务数据的表单和用于更新服务数据的另一个部分视图。 CRUD 操作正在运行，我能够创建、更新或删除服务。我可以在不创建项目的情况下做到这一点。但是，当我单击提交按钮创建项目时，似乎没有调用正确的方法并且我无法创建项目，我只是得到白屏。该 URL 与我填写项目表单 localhost:/Project/Create 的 URL 相同。我尝试删除要使用 AJAX 添加服务的 jQuery，然后看起来数据已提交到项目控制器中的正确方法。这是什么原因 - 为什么当有 jQuery 代码时我无法处理表单数据？

我已尝试更改 AJAX 调用（它始终有效并且我能够创建服务）以及 BigViewModel（如此处建议 - Passing multiple models from View to Controller in asp MVC 5），但这仍然无法正常工作...

这是控制器中的方法：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(ProjectViewModel model)
{

    int audianceId = model.ProjectModel.AudienceId;
    int categoryId = model.ProjectModel.CategoryId;
    //...............................................
    //CREATE THE PROJECT AND ADD TO DATABASE
 }

这是创建服务时的 AJAX 调用（来自视图）：

<script>
    var name = $("#ServiceModel_Name").val();
    var price = $("#ServiceModel_Price").val();
    var discount = $("#ServiceModel_Discount").val();
    var quantity = $("#ServiceModel_Quantity").val();
    var description = $("#ServiceModel_Description").val();
    var ir = $("#ServiceModel_IR").val();

    var details = { "name": name, "quantity": quantity, "price": price, "discount": discount, "description": description, "ir": ir };
    $.ajax({
        type: "POST",
        url: "/Project/RegisterService",
        data: details,
        datatype: "json",
        async: "true",
        success: function (response) {
            var serviceId = response;                
            $("#confirmationMessage").text("Service successfully created!");
            $(function () {
                $("#dialogMessage").dialog({
                        modal: true,
                        title: "Success!",
                        buttons: {
                            Ok: function () {
                                    $(this).dialog("close");
                                    //BindData(response);
                                    //ClearForm();
                                    $("#service1").dialog("close");
                            }
                        }
                });
            });
        },
        error: function (response) {
            alert(response.status + ' ' + response.statusText);
        }
    });
</script>

以及 ProjectViewModel 定义：

 public class ProjectViewModel
    {
        public CreateProjectViewModel ProjectModel { get; set; }

        public CreateServiceViewModel ServiceModel { get; set; }
    }

Answer 1

由于您在发布操作中添加了[ValidateAntiForgeryToken] 属性，因此如果您需要添加防伪验证，则需要从标头发送 RequestVerificationToken。

1.在您的表单代码中添加@Html.AntiForgeryToken()。

2.在你的ajax中添加标题：

$.ajax({
    type: "POST",
    url: "/Project/RegisterService",
    data: details,
    headers: {
        RequestVerificationToken:
            $('input:hidden[name="__RequestVerificationToken"]').val()
    }, 
    async: "true",
    success: function (response) {

    }       
});

dataType 是您期望从服务器返回的内容：json、html、文本等。jQuery 将使用它来确定如何填充成功函数的参数。

此外，请确保您的 ajax 数据与操作参数相对应。

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult RegisterService(Project model)

Answer 2

试试怎么样

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create([FromBody] ProjectViewModel model)
{

    int audianceId = model.ProjectModel.AudienceId;
    int categoryId = model.ProjectModel.CategoryId;
    //...............................................
    //CREATE THE PROJECT AND ADD TO DATABASE
    return CreatedAtAction("Create", model);
 }


<script>
    var name = $("#ServiceModel_Name").val();
    var price = $("#ServiceModel_Price").val();
    var discount = $("#ServiceModel_Discount").val();
    var quantity = $("#ServiceModel_Quantity").val();
    var description = $("#ServiceModel_Description").val();
    var ir = $("#ServiceModel_IR").val();

    var details = { "name": name, "quantity": quantity, "price": price, "discount": discount, "description": description, "ir": ir };
    $.ajax({
        type: "POST",
        url: "/Project/RegisterService",
        data: JSON.stringify(details),
        datatype: "json",
        contentType:"application/json; charset=utf-8",
        async: "true",
        success: function (response) {
            var serviceId = response;                
            $("#confirmationMessage").text("Service successfully created!");
            $(function () {
                $("#dialogMessage").dialog({
                        modal: true,
                        title: "Success!",
                        buttons: {
                            Ok: function () {
                                    $(this).dialog("close");
                                    //BindData(response);
                                    //ClearForm();
                                    $("#service1").dialog("close");
                            }
                        }
                });
            });
        },
        error: function (response) {
            alert(response.status + ' ' + response.statusText);
        }
    });
</script>