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

Question

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 Database</button>
    <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