Insert Input Control,Grid Values on button click in Kendo UI

I have a small application created using Kendo UI MVC .

I have following UI as like

There are some fields on above UI. Some suppliers are supplying material.

Single supplier can supply n number of material.

When I click on Add to Kendo Grid then only product details are storing into a grid with foreign key reference of Supplier Master.

So how can I post whole data into two different tables on click event of Insert Into Database as like

Bellow is my code

@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions
@model KendoUIApp3.ViewModel.ProductViewModel
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-md-12">
<div class="input-group">
@Html.LabelFor(model => model.Id)
@Html.EditorFor(model => model.Id)
@Html.LabelFor(model => model.Name)
@Html.EditorFor(model => model.Name)
@Html.LabelFor(model => model.Mobile)
@Html.EditorFor(model => model.Mobile)
@Html.LabelFor(model => model.City)
@Html.EditorFor(model => model.City)
div>
<br />
<div class="col-md-12">
<div class="input-group">
@Html.LabelFor(model => model.Product_Name)
@Html.EditorFor(model => model.Product_Name)
@Html.LabelFor(model => model.Price)
@Html.EditorFor(model => model.Price)
@Html.LabelFor(model => model.Quantity)
@Html.EditorFor(model => model.Quantity)
@Html.LabelFor(model => model.Total)
@Html.EditorFor(model => model.Total)
div>
div>
<br />
<div class="col-md-6">
<div class="input-group">
<input type="button" value="submit" id="btnAddToGrid">
div>
div>
div>
<br />
<button name="btnSaveGrid" id="btnSaveGrid">Insert Into Databasebutton>
<br />
<br />
<div>
@(Html.Kendo().Grid<KendoUIApp3.ViewModel.ProductViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(20);
columns.Bound(c => c.Product_Name).Width(30);
columns.Bound(c => c.Price).Width(20);
columns.Bound(c => c.Quantity).Width(20);
columns.Bound(c => c.Total).Width(20);
})
.HtmlAttributes(new { style = "height: 350px;width: 800px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
)
)
div>
div>
<script>
$("#btnAddToGrid").click(function () {
var id = $('#Id').val();
var name = $('#Name').val();
var pName = $('#Product_Name').val();
var price = $('#Price').val();
var qty = $('#Quantity').val();
var total = $('#Total').val();
if (name == "" || pName == "") {
alert("Please fill all input fields");
}
var grid = $("#Grid").data("kendoGrid");
var datasource = grid.dataSource;
datasource.insert({ Id:id,Name: name, Product_Name: pName, Price: price, Quantity: qty, Total: total });
});
script>

My Model is

public class ProductViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Mobile { get; set; }
public string City { get; set; }
[Display(Name= "Product Name")]
public string Product_Name { get; set; }
public string Price { get; set; }
public string Quantity { get; set; }
public string Total { get; set; }
}

Please give me some suggestion