提交Fom返回400状态

Question

在视图中，我正在创建一个项目。在表格中，我正在填写项目数据。该项目有服务，对于他们我正在使用jQuery模式表单来进行服务上的CRUD操作。对于CRUD操作，我正在使用AJAX。在此视图中，我有2个部分视图 - 用于输入服务数据的表单和用于更新服务数据的另一个部分视图。 CRUD操作正在运行，我可以创建，更新或删除服务。我可以在不创建项目的情况下做到这一点但是，当我单击“提交”按钮创建项目时，看起来似乎没有调用正确的方法，我无法创建项目，我只是得到白屏。 URL与我正在填充项目形式localhost：/ Project / Create的URL相同。我已经尝试删除jQuery，我正在使用AJAX添加服务，然后看起来数据被提交到项目控制器中的正确方法。这是什么原因 - 为什么当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调用（来自View）：

<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，text等.jQuery将使用它来弄清楚如何填充success函数的参数。

此外，请确保您的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>