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

Question

I want to send multiple forms in one form and send that form with post request to controller method. But collection comes null and it can not get. My form like this:

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

Answer 1

You will need to have a form structure as shown below

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

Also you should use different form field names, since the field names will conflict with each other when the form is submitted to a specific controller method if used same in every 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>

You can use any javascript utility for sending an Ajax request.