Hi @Alick Wang
There is a problem. If I add a button so that client can remove the <tr> as he want ,then this code : name='employee[" + count + "].name' ,count maybe not be continuous,does if matter?
After testing, it seems that if remove the tr and the count is not continuous, when click the submit button we can only receive part of data in the controller.
For example, the name are: employee[0].name, employee[2].name, in the controller, we can only receive the value from employee[0].name.
So, if you want to remove the tr, you have to loop through the rows and change the count to continuous. or you can try to use JQuery Ajax to submit the data: loop through the rows and create JavaScript object, then submit the data to the controller.
I create a sample with the remove tr function and submit the data via JQuery ajax, you can refer to it:
@model WebApplication5.Models.vm
@{
ViewData["Title"] = "AddEmployeeView";
}
<h1>AddEmployeeView</h1>
<h4>vm</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="AddEmployeeView">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="departmentID" class="control-label"></label>
<input asp-for="departmentID" class="form-control" />
</div>
<div class="form-group">
<table id="tbemployee">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Action</td>
</tr>
</thead>
<tbody class="table" id="tbbody">
@if (Model == null || Model.employee == null || Model.employee.Count == 0)
{
<tr>
<td>
<input class="form-control" id="name" name="employee[0].name" />
</td>
<td>
<input class="form-control" id="age" name="employee[0].age" />
</td>
<td><input type="button" class="btnremove" value="remove"/></td>
</tr>
}
else if (Model.employee != null && Model.employee.Count > 0)
{
@for (var i = 0; i < Model.employee.Count; i++)
{
<tr>
<td>
<input class="form-control" asp-for="@Model.employee[@i].name" />
</td>
<td>
<input class="form-control" asp-for="@Model.employee[@i].age" />
</td>
<td></td>
</tr>
}
}
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" id="btnAddNew" value="Add New Employee" class="btn btn-primary" /></td>
<td><input type="button" id="btnAjaxSubmit" value="Submit Via Ajax" class="btn btn-primary" /></td>
</tr>
</tfoot>
</table>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
@section Scripts {
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
<script>
$(function () {
$("#btnAddNew").click(function () {
var count = $("#tbbody >tr").length;
$("#tbbody").append("<tr><td> <input class='form-control' id='name' name='employee[" + count + "].name'></td><td> <input class='form-control' id='age' name='employee[" + count + "].age'></td> <td><input type='button' class='btnremove' value='remove'/></td></tr>");
AddRemoveAction();
});
AddRemoveAction();
//add remove button click event
function AddRemoveAction(){
$(".btnremove").each(function(index, item){
$(item).click(function(){
$(this).closest('tr').remove();
});
})
}
//use Ajax to submit the data
$("#btnAjaxSubmit").click(function(){
//define a object.
var vm = {};
vm.departmentID = parseInt($("#departmentID").val());
var employees = [];
//loop through the rows and get the name and age.
$("#tbbody >tr").each(function(index, item){
var newemp = {};
newemp.name = $(item).find("#name").val();
newemp.age = parseInt($(item).find("#age").val());
employees.push(newemp);
});
vm.employee = employees;
//use jquery ajax to call the controller action.
$.ajax({
type: "POST",
url: "/Home/AddEmployeeView",
dataType: "json",
contentType: 'application/json',
headers: {
RequestVerificationToken:
$('input:hidden[name="__RequestVerificationToken"]').val()
},
data: JSON.stringify(vm),
success: function (data) {
//in the success function, you can redirect to other page via the windows.location property.
alert(data);
}
});
});
});
</script>
}
Controller:
public IActionResult AddEmployeeView()
{
//var vm = new vm()
//{
// departmentID=1001,
// employee = new List<employee>()
// {
// new employee(){ name="A", age=21 },
// new employee(){ name="B", age=22 },
// }
//};
//return View(vm);
return View();
}
[HttpPost]
public IActionResult AddEmployeeView([FromBody] vm vm)
{
return View();
}
The result as below:
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion