将动态添加的HTML表行作为参数发布到控制器是ASP.NET核心/MVC中的一个常见需求,可以通过以下步骤实现:
以下是一个示例代码:
前端页面:
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
<form action="/controller/action" method="post" id="myForm">
<input type="submit" value="Submit">
</form>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<input type='text' name='name'>";
cell2.innerHTML = "<input type='text' name='age'>";
}
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // Prevent form submission
var formData = new FormData(this); // Get form data
fetch("/controller/action", {
method: "POST",
body: formData
}).then(function(response) {
// Handle response
});
});
</script>
控制器:
[HttpPost]
public IActionResult Action([FromForm]List<PersonModel> persons)
{
// Handle submitted data
foreach (var person in persons)
{
// Process each person
// ...
}
return RedirectToAction("Index");
}
public class PersonModel
{
public string Name { get; set; }
public int Age { get; set; }
}
在这个示例中,我们通过JavaScript动态添加表行,并使用FormData对象收集表单数据。然后,我们将表单数据通过fetch函数发送到控制器的动作方法,并使用[FromForm]特性将表单数据绑定到名为"persons"的List<PersonModel>参数上。
对于这个示例,你可以根据具体的业务需求进行适当的修改和扩展。对于ASP.NET核心/MVC中的其他概念和名词,你可以参考官方文档或搜索引擎进行进一步了解和学习。
领取专属 10元无门槛券
手把手带您无忧上云