[英]How can I send nested forms in one Post request?
我想以一種形式發送多個 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");
}
}
您將需要具有如下所示的表單結構
<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 請求。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.