Value of foreign key in not coming in the foreign table

Question

I have two database tables i.e "Sales" and "SaleItems". SaleId is a foreign key in SaleItems but i'm not getting the value. I'm pushing the "Product" database table's data to both "Sales" and "Saleitems". SaleId is generating in "Sales" table but i'm not getting it in "SaleItems" table. kindly help.

 

Here's my View Code

<table id="table" class="table">
<thead>
<tr>
<th scope="col">Product Id</th>
<th scope="col">Company</th>
<th scope="col">Product Name</th>
<th scope="col">User Name</th>
<th scope="col">User Mobile</th>
<th scope="col">Price per product</th>
<th scope="col">Quantity</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody></tbody>
<tfoot><tr><td colspan="2">Grand Total : </td><td id="GrandTotal"></td></tr></tfoot>
</table>
<script>
$('#productSelect').change(function () {
var id = $(this).val();
if (id > 0) {
$.get("GetProduct", { productId: id }, function (result) {
console.log(result)
$("tbody").append("<tr><td>" + result.ProductId + "</td><td>" + result.CompanyName + "</td><td>" + result.ProductName + "</td><td>" + result.UserName + "</td><td>" + result.UserMobile + "</td><td>" + result.ProductPrice + "</td><td><button type='button' class='btn btn-primary' onClick='subtract(" + id + "," + result.ProductPrice + ")'>-</button><button type='text' class='btn btn-dark' id='" + id + "' value='0'>0</button><button type='button' class='btn btn-primary' onClick='add(" + id + "," + result.ProductPrice + ")'>+</button></td><td id='sum" + id + "'>0</td><td><a onclick='removeRow(this)'>x</a></td></tr>")
CalculateGrandTotal();
});
}
})
$("body").on("click", "#btnSave", function () {
//Loop through the Table rows and build a JSON array.
var sales = new Array();
var saleitems = new Array();
$(".table tbody tr").each(function () {
var row = $(this);
var Sale = {};
Sale.UserName = row.find("td").eq(3).html();
Sale.UserMobile = row.find("td").eq(4).html();
Sale.NetTotal = $('#GrandTotal').html();
sales.push(Sale);
var SaleItem = {};
SaleItem.ProductId = row.find("td").eq(0).html();
SaleItem.ProductName = row.find("td").eq(2).html();
SaleItem.ProductQuantity = row.find("td").eq(7).find('button[type=text]').html();
saleitems.push(SaleItem);
});
var model = { sales:sales , saleitems:saleitems };
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: "/Product/Insertsales",
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " records inserted.");
}
});
});
</script>

And Here's my Controller Code

public JsonResult InsertSales(List<Sale> sales , List<SaleItem> saleitems)
{
using (sampledb6Entities sampledb6Entities = new sampledb6Entities())
{
//Truncate Table to delete all old records.
//sampledb6Entities.Database.ExecuteSqlCommand("TRUNCATE TABLE [Sales]");
//Check for NULL.
if (sales == null)
{
sales = new List<Sale>(); }
//Loop and insert records.
foreach (Sale sale in sales)
{
sampledb6Entities.Sales.Add(sale);
sampledb6Entities.SaveChanges();
}
//Check for NULL.
if (saleitems == null) {
saleitems = new List<SaleItem>();
}
var SaleIds = sales.Select(x => x.SaleId).ToList();
int Counter = 0;
foreach (SaleItem saleitem in saleitems)
{
SaleItem si = new SaleItem();
si.SaleId = SaleIds[Counter];
si.ProductName = saleitem.ProductName;
si.ProductQuantity = saleitem.ProductQuantity;
si.ProductId = saleitem.ProductId;
sampledb6Entities.SaleItems.Add(saleitem);
Counter++;
}
int insertedRecords = sampledb6Entities.SaveChanges();
return Json(insertedRecords);
}
}