1.  Create a View 
<script src="/Scripts/jquery-2.1.4.js"></script>  
    <script src="/Scripts/bootstrap.js"></script> 
 <script src="/Scripts/knockout-3.1.0.js"></script>
<div class="modal fade" id="AddNewModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog
modal-lg" role="document">
<divclass="modal-content"id="model-confirmation-content">
  <divclass="modal-header">
   <buttontype="button"class="close"data-dismiss="modal"aria-label="Close">
   <spanaria-hidden="true">&times;</span></button>
   <h4class="modal-title">Add New Product</h4>
   </div>
    <divclass="modal-body">
     <divclass="form-horizontal">
      <divclass="form-group">
      <labelfor="concept"class="col-sm-3 control-label">Category</label>
      <divclass="col-sm-9">
      <selectclass="form-control"id="category"data-bind="options:CategoryList,        optionsText:'CategotyName',optionsValue:'CategoryId', value:CategotyId , optionsCaption: 'Choose...', event:{ change:ChangeCategory}">
          </select>
           </div>
          </div>
          <divclass="form-group">
         <labelfor="description"class="col-sm-3 control-label">Product Name</label>
          <divclass="col-sm-9">
          <selectclass="form-control"data-bind="options: ProductList,optionsText: 'ProductName',
optionsValue: 'ProductId',value:ProductId,optionsCaption: 'Choose...',event:{ change:
ProductCategory}">
           </select>
          </div>
          </div>
           <divclass="form-group">
             <labelfor="amount"class="col-sm-3 control-label">Price</label>
              <divclass="col-sm-9">
 <inputtype="text"  class="form-control"  data-bind="value:Price"  readonlyid="price"name="Price">   </div>
   </div>
    <divclass="form-group">
    <labelfor="status"class="col-sm-3 control-label">Quntity</label>
    <divclass="col-sm-9">
     <inputtype="number"id="Qty"class="form-control"data-bind="value:
                                 Quantity"id="Quntity"name="Quntity"required">
                            </div>
                        </div>
                        <divclass="form-group">
 <labelfor="date"class="col-sm-3 control-label">Amount</label>
                            <divclass="col-sm-9">
                                <inputtype="text"class="form-control"data-bind="value:  
TotalAmount"readonlyid="amount"name="amount">
                            </div>
                        </div>
                        <divclass="form-group">
                            <divclass="col-sm-12 text-right">
                                <buttontype="button"class="btn btn-default preview-add-button" data-bind="click:$root.Insert">
                                    <spanclass="glyphicon glyphicon-plus"></span>Add
                                </button>
                            </div>
                        </div>
                    </div>
                  <divclass="table-responsive">
                            <tableclass="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ProductId</th>
                                        <th>Product Name</th>
                                        <th>Category</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Amount</th>
                                    </tr>
                                </thead>
                                <tbodydata-bind="foreach: Products">
                                    <tr>
                                        <tddata-bind="text: ProductId"></td>
                                        <tddata-bind="text: ProductName"></td>
                                        <tddata-bind="text: CategotyName"></td>
                                        <tddata-bind="text: Price"></td>
                                        <tddata-bind="text: Quantity"></td>
                                        <tddata-bind="text: TotalAmount"></td>
                                        <td> <buttondata-bind="click: $root.delete"  
class="btn btn-danger">Delete</button>
                                        </td>
                                    </tr>
                                </tbody>
                                <!-- preview content goes here-->
                            </table>
                        </div>
                </div>
                <divclass="modal-footer">
                    <buttontype="button"class="btn btn-primary "data-bind="event:{ 
                     click:Save}">Save</button>&nbsp;&nbsp;
                    <buttontype="button"class="btn btn-danger "data-bind="event:{ 
                       click:Cancel}">Cancel</button>
                </div>
            </div>
        </div>
    </div>

<script>
function Product(data) {
    this.Id = ko.observable(data.Id);
    this.ProductId = ko.observable(data.ProductId);
    this.CategotyName = ko.observable(data.CategotyName);
    this.ProductName = ko.observable(data.ProductName);
    this.Price = ko.observable(data.Price);
    this.CategotyId = ko.observable(data.CategotyId);
    this.Quantity = ko.observable(data.Quantity)
    this.TotalAmount = ko.observable(data.TotalAmount);
}

function ProductViewModel() {
    //Make
the self as 'this' reference
    var self = this;
    self.Id = ko.observable();
    self.ProductId = ko.observable();
    self.CategotyName = ko.observable();
    self.ProductName = ko.observable();
    self.Price = ko.observable(0);
    self.CategotyId = ko.observable();
    self.Quantity = ko.observable();
    self.TotalAmount = ko.computed(function () {
        returnthis.Quantity() * this.Price();
    }, this);
    self.Products = ko.observableArray();
    self.ProductList = ko.observableArray();
    self.CategoryList = ko.observableArray();
    self.CustomerProducts =ko.observableArray();
    self.errors = ko.validation.group(this, { deep: true, observable: false });
    $.getJSON("/Product/GetCategoty", function (data) {
        self.CategoryList(data);
    });
    self.ChangeCategory = function () {
        $.getJSON("/Product/GetProduct", { categoryId: self.CategotyId }, function (data) {
            self.ProductList(data);
        });
    }
    self.ProductCategory = function () {
        $.getJSON("/Product/GetProductDetails", { ProductId: self.ProductId }, function (data) {
            self.Price(data[0].Price);
            self.ProductName(data[0].ProductName);            self.CategotyName(data[0].CategotyName);
        });
    }
    // Calculate Total of Price After Initialization
    self.Total = ko.computed(function () {
        var sum = 0;
        var arr = self.Products();
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i].Price();
        }
        return sum;
    });
    }
    //Add New Item in List
   self.Insert = function () {       if (self.errors().length > 0) {
            self.errors.showAllMessages();
            return;
        }
        self.Products.push(new Product({
            Id: self.Id(),
            ProductId: self.ProductId(),
            ProductName: self.ProductName(),
            CategotyName: self.CategotyName(),
            CategotyId: self.CategotyId(),
            Price: self.Price(),
            Quantity: self.Quantity(),
            TotalAmount: self.TotalAmount()
        }));
        self.Id(null);
        self.ProductId(null);
        self.CategotyName(null);
        self.ProductName(null);
        self.Price(null);
        self.CategotyId(null);
        self.Quantity(null);
        self.errors.showAllMessages(false);
    }
// save product in database
         self.Save = function () {
        var data = ko.toJSON(self.Products());
        $.ajax({
            url: '/Product/Insert',
            cache: false,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: data,
            success: function (data) {
                self.Products.removeAll(); 
             $('#AddNewModel').modal('hide');
            }
        }).fail(

 function (xhr, textStatus, err) {
     alert(err);
 });
   //
Delete product details
    self.Cancel = function () {
        self.Products.removeAll();  
    }
}
$(function () {
    var productViewModel = new ProductViewModel();
    ko.applyBindings(productViewModel);
});
</script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ProductManagement.Models;
namespace ProductManagement.Controllers
{
    public class GenericController : Controller
    {
        IGenericReposity<ProductDetail> _productDetails;
        public GenericController()
        {
            _productDetails = newGenericReposity<ProductDetail>(newProductDBEntities());
        }
        publicActionResult Index()
        {
            return View();
        }
        publicvoid Insert(IList<ProductDetail> obj)
        {
            foreach (ProductDetail o in obj)
            {
                _productDetails.Add(o);
                _productDetails.Save();
            }
        }
    }
}