How to submit related entities in asp.net core razor page form? - asp.net-core

Question

I have two models Invoice and Product, one invoice can have many products as usual.
public class InvoiceModel
{
public string Name { get; set; }
public string Description { get; set; }
[Required(ErrorMessage = "Products are required!")]
public List<ProductModel> Products { get; set; }
}
public class ProductModel
{
public string Name { get; set; }
public string Model { get; set; }
public string Brand { get; set; }
}
and i want to create a new invoice with products.
so when i generate razor page for invoice create, it only generate input fields for Name and Description,
then i added product table, and button to the form, when the user clicks on add product button, a new row is added to the table using jsscript.
I have referred to this Url for binding complex object lists, but when I submit the form newly added products are not posted to the server-side.
Can anyone point me to the right way to resolve this issue,
Thanks

Answer 1

Try my codes bellow and my test result in screenshot.
#page
#model IndexModel
#{
}
<h3>#ViewData["confirmation"]</h3>
<form class="form-horizontal" method="post">
<div class="form-group">
<label for="Name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input asp-for="CC.Name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="Description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input asp-for="CC.Description" type="text" class="form-control">
</div>
</div>
<script type="text/javascript">
var mytab = document.getElementById("myTable");
var i = 0;
function myfunction() {
document.getElementById("myTable").style.display = "block";
document.getElementById("myTable").insertRow(-1).innerHTML =
'<td> <input type="text" name="cc.Products[' +i + '].Name" /> </td><td> <input type="text" name="cc.Products[' + i + '].Model" /> </td><td> <input type="text" name="cc.Products[' + i + '].Brand" /> </td>';
i++;
}
</script>
<button type="button" onclick="myfunction()">Add Product</button>
<table id="myTable" style="display: none;" class="table table-striped">
<tr>
<th>Name</th>
<th>Model</th>
<th>Brand</th>
</tr>
</table>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Create</button>
</div>
</div>
</form>
enter image description here
enter image description here

Answer 2

According to your description ,I guess you used the wrong input tag's name this is the reason why you coulnd't get the ProductModel's vaule.
If your post method's parameter name like public InvoiceModel ProductModels { get; set; }, then the table's name should like this ProductModels.Products[0].Name and ProductModels.Products[1].Name.
More details, you could refer to below codes:
<form class="form-horizontal" method="post">
<div class="form-group">
<label for="Name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input asp-for="ProductModels.Name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="Description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input asp-for="ProductModels.Description" type="text" class="form-control">
</div>
</div>
<button type="button" onclick="myFunction()">Add Product</button>
<table id="myTable">
<tr>
<td>Name</td>
<td>Model </td>
<td>Brand</td>
</tr>
<tr>
<td>
<input type="text" name="productModels.Products[0].Name" />
</td>
<td>
<input type="text" name="productModels.Products[0].Model" />
</td>
<td>
<input type="text" name="productModels.Products[0].Brand" />
</td>
</tr>
<tr>
<td>
<input type="text" name="productModels.Products[1].Name" />
</td>
<td>
<input type="text" name="productModels.Products[1].Model" />
</td>
<td>
<input type="text" name="productModels.Products[1].Brand" />
</td>
</tr>
</table>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Create</button>
</div>
</div>
</form>
Backend:
[BindProperty]
public InvoiceModel ProductModels { get; set; }
public void OnGet()
{
}
public void OnPost(InvoiceModel productModels)
{
//var Name = Request.Form["Name"];
//var Description = Request.Form["Description"];
var Name = Request.Form["Name"];
var Model = Request.Form["Model"];
var Brand = Request.Form["Brand"];
ViewData["confirmation"] = $"{Name},{Model},{Brand}";
}
Result: