Javascript 如何在一个Post请求中发送嵌套表单？

我想在一个表单中发送多个表单，并将该表单与post请求一起发送给控制器方法。但是集合为空，它无法获取。我的表格是这样的：

<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>

grid.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();

const form=document.createElement（'form'）；
form.method='post'；
form.action='PageView/Create'；
对于（变量i=0；i

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");
    }
}

[HttpPost]
公共操作结果创建（列表集合）
{
尝试
{ 
_pageCategoryPageService.DeletePageCategoryPage（）；
collection.ForEach（x=>_pageCategoryPageService.CreatePageCategoryPage（x））；
返回视图（“成功页面”）；
}
抓住
{
返回视图（“错误页面”）；
}
}

您需要一个如下所示的表单结构

<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>

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

<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>

//创建表单数据对象
var formData=new formData（）；
len=document.queryselectoral（“表单”）.length；
var形式、数据、对；
所有表格=document.queryselectoral（“表格”）；
对于（i=0；i

---

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

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

<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>

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

<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>

//创建表单数据对象
var formData=new formData（）；
len=document.queryselectoral（“表单”）.length；
var形式、数据、对；
所有表格=document.queryselectoral（“表格”）；
对于（i=0；i

---

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

为什么您有多个表单？因为我必须在单击一个按钮@Sourabhsomania时发送所有表单？您是否试图在一次提交中创建多个记录？@YuryTarabanko我也无法通过Ajax发送。列表集合为空，为什么您有多个表单？因为我必须在单击一个按钮@Sourabhsomania时发送所有表单？您是否试图在一次提交中创建多个记录？@YuryTarabanko我也无法通过ajax发送。列表集合为空