Insert multiple rows to Html table at once - asp.net-core

Question

I am working on a Master Detail CRUD operations in an ASP.NET Core MVC project. I am trying to perform the Create operation of both Master and Detail models at once, i want to save an order and its order lines (the number of the order lines is the value of the input quantite):
public class Order
{
[Key]
public int OrderId { get; set; }
[Required]
public DateTime OrderDate { get; set; }
[Required]
public int Quantity { get; set; }
public virtual List<OrderLine> OrderLines { get; set; } = new List<OrderLine>();
}
public class OrderLine
{
[Key]
public int OrderLineId { get; set; }
[Required]
public string Designation{ get; set; }
[Required]
public string Serial{ get; set; }
[Required]
public string State { get; set; }
[ForeignKey("OrderId")]
public int OrderId { get; set; }
public virtual Order Order { get; set; }
}
OrderController:
public IActionResult Create()
{
Order order= new Order();
order.OrderLines.Add(new OrderLine() { OrderLineId = 1 });
return PartialView("_AddOrderPartialView", order);
}
[HttpPost]
public IActionResult Create(Order order)
{
if (order != null)
{
_dbcontext.Order.Add(order);
_dbcontext.SaveChanges();
return RedirectToAction("Index");
}
return View();
}
_AddOrderPartialView.cshtml:
#model Order
#{
ViewData["Title"] = "_AddOrderPartialView";
}
<div class="modal fade" role="dialog" tabindex="-1" id="addOrder" aria-labelledby="addOrderLabel" aria-hidden="true">
<div class="modal-dialog role="document">
<div class="modal-content">
<div class="modal-header">
<h3>Order</h3>
</div>
<div class="modal-body">
<form asp-action="Create" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
.......
<div class="form-group">
<label asp-for="Quantity" class="control-label">Quantity</label>
<input asp-for="Quantity" class="form-control" id="quantite" />
<span asp-validation-for="Quantity" class="text-danger"></span>
</div>
.......
<h3>Order Lines</h3>
<table class="table table-bordered" id="orderLinesTable">
<thead>
<tr>
<th>Designation</th>
<th>Serial</th>
<th>State</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.OrderLines.Count; i++)
{
<tr>
<td>
#Html.EditorFor(x => x.OrderLines[i].Designation, new { htmlAttributes = new { #class = "form-control" } })
</td>
<td>
#Html.EditorFor(x => x.OrderLines[i].Serial, new { htmlAttributes = new { #class = "form-control" } })
</td>
<td>
#Html.EditorFor(x => x.OrderLines[i].State, new { htmlAttributes = new { #class = "form-control" } })
</td>
</tr>
}
</tbody>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="javascript:window.location.reload()">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$("#quantite").on('change', function () {
var RowNumber = document.getElementById('quantite').value;
var table = document.getElementById('orderLinesTable');
var rows = table.getElementsByTagName('tr');
var rowOuterHtml = rows[rows.length - 1].outerHTML;
$("#orderLinesTable tbody").find("tr:not(:first)").remove();
for (var i = 0; i < RowNumber-1; i++) {
var newRow = table.insertRow();
newRow.innerHTML = rowOuterHtml;
}
});
</script>
The problem is that this code saves only the first order line in the database. any help?