如何在一个 Post 请求中发送嵌套的 forms？

Question

我想以一种形式发送多个 forms 并将该表单与发布请求一起发送到 controller 方法。 但是收藏来了 null 却拿不到。 我的表格是这样的：

<form method="post" action="PageView/Create">
    <form>
        <input type="hidden" name="categoryID" value="1">
        <input type="hidden" name="pageID" value="1">
    </form>
    <form>
        <input type="hidden" name="categoryID" value="1">
        <input type="hidden" name="pageID" value="11">
    </form>
</form>

网格.js

const form = document.createElement('form');
form.method = 'post';
form.action = 'PageView/Create';
for (var i = 0; i < collection.length; i++) {
    const form2 = document.createElement('form');
    for (const key in collection[i]) {
        if (collection[i].hasOwnProperty(key)) {
            const hiddenField = document.createElement('input');
            hiddenField.type = 'hidden';
            hiddenField.name = key;
            hiddenField.value = collection[i][key];
            form2.appendChild(hiddenField);
        }
    }
    form.appendChild(form2);
}
document.body.appendChild(form);
form.submit();

PageView.cs

[HttpPost]
public ActionResult Create(List<PageCategoryPageViewModel> collection)
{
    try
    { 
        _pageCategoryPageService.DeletePageCategoryPage();
        collection.ForEach(x=>_pageCategoryPageService.CreatePageCategoryPage(x));
        return View("SuccessPage");
    }
    catch
    {
        return View("ErrorPage");
    }
}

Answer 1

您将需要具有如下所示的表单结构

<form method="post" action="PageView/Create">
        <input type="hidden" name="categoryID" value="1">
        <input type="hidden" name="pageID" value="1">
</form>
<form>
    <input type="hidden" name="categoryID" value="1">
    <input type="hidden" name="pageID" value="11">
</form>

此外，您应该使用不同的表单字段名称，因为如果在每个表单中使用相同的表单，当表单提交到特定的 controller 方法时，字段名称将相互冲突。

<script type="text/javascript">

    // Creating a form data object
    var formData = new FormData();


    len = document.querySelectorAll("form").length;

    var form, data, pair;

    all_forms =     document.querySelectorAll("form");

    for(i = 0; i < len; i++){


        form = all_forms[i];

        data = new FormData(form);

        for (pair of data.entries()) {
            formData.append(pair[0], pair[1]);
        }

    }

    // get all values related to a form field
    // console.log(formData.getAll('pageID'));

    // For ajax request
    var req = new XMLHttpRequest();

    req.open("POST", "http://localhost/", true);

    req.send(formData);



</script>

您可以使用任何 javascript 实用程序来发送 Ajax 请求。