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），但仍然无法正常工作... < / p>

这是控制器中的方法：

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

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

这是创建服务时（从View）的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>

提交Fom返回400状态

2 个答案: