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

【问题标题】：How can I send nested forms in one Post request?如何在一个 Post 请求中发送嵌套表单？
【发布时间】：2019-11-14 08:43:24
【问题描述】：

我想在一个表单中发送多个表单，然后将该表单与 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();

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

【问题讨论】：

为什么会有多个表格
因为当我点击一个按钮@SourabhSomani 时我必须将它们全部发送出去
您是否尝试在一次提交中创建多个记录？
stackoverflow.com/questions/379610/can-you-nest-html-forms
@YuryTarabanko 我也无法通过 ajax 发送。 List 集合为空

标签： javascript asp.net-mvc model-view-controller

【解决方案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>

另外你应该使用不同的表单字段名称，因为如果在每个表单中使用相同的表单，当表单提交到特定的控制器方法时，字段名称会相互冲突。

<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 请求。

【讨论】：