HOW TO INSERT DATA IN DATABASE USING KNOCKOUT.JS.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 2362  View(s)
Ratings:
Rate this:
Can anyone please help me how to solve this problem.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to Insert Data in database using Knockout.js.

    
    
    

    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">

    <div class="modal-content" id="model-confirmation-content">

      <div class="modal-header">

       <button type="button" class="close" data-dismiss="modal" aria-label="Close">

       <span aria-hidden="true">&times;</span></button>

       <h4 class="modal-title">Add New Product</h4>

       </div>

        <div class="modal-body">

         <div class="form-horizontal">

          <div class="form-group">

          <label for="concept" class="col-sm-3 control-label">Category</label>

          <div class="col-sm-9">

          <select class="form-control" id="category" data-bind="options:CategoryList,        optionsText:'CategotyName',optionsValue:'CategoryId', value:CategotyId , optionsCaption: 'Choose...', event:{ change:ChangeCategory}">

              </select>

               </div>

              </div>

              <div class="form-group">

             <label for="description" class="col-sm-3 control-label">Product Name</label>

              <div class="col-sm-9">

              <select class="form-control" data-bind="options: ProductList,optionsText: 'ProductName',

    optionsValue: 'ProductId',value:ProductId,optionsCaption: 'Choose...',event:{ change:

    ProductCategory}">

               </select>

              </div>

              </div>

               <div class="form-group">

                 <label for="amount" class="col-sm-3 control-label">Price</label>

                  <div class="col-sm-9">

     <input type="text"  class="form-control"  data-bind="value:Price"  readonly id="price" name="Price">   </div>

       </div>

        <div class="form-group">

        <label for="status" class="col-sm-3 control-label">Quntity</label>

        <div class="col-sm-9">

         <input type="number" id="Qty" class="form-control" data-bind="value:

                                     Quantity" id="Quntity" name="Quntity" required">

                                </div>

                            </div>

                            <div class="form-group">

     <label for="date" class="col-sm-3 control-label">Amount</label>

                                <div class="col-sm-9">

                                    <input type="text" class="form-control" data-bind="value:  

    TotalAmount" readonly id="amount" name="amount">

                                </div>

                            </div>

                            <div class="form-group">

                                <div class="col-sm-12 text-right">

                                    <button type="button" class="btn btn-default preview-add-button"  data-bind="click:$root.Insert">

                                        <span class="glyphicon glyphicon-plus"></span>Add

                                    </button>

                                </div>

                            </div>

                        </div>

                      <div class="table-responsive">

                                <table class="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>

                                    <tbody data-bind="foreach: Products">

                                        <tr>

                                            <td data-bind="text: ProductId"></td>

                                            <td data-bind="text: ProductName"></td>

                                            <td data-bind="text: CategotyName"></td>

                                            <td data-bind="text: Price"></td>

                                            <td data-bind="text: Quantity"></td>

                                            <td data-bind="text: TotalAmount"></td>

                                            <td>   <button data-bind="click: $root.delete" 

    class="btn btn-danger">Delete</button>

                                            </td>

                                        </tr>

                                    </tbody>

                                    <!-- preview content goes here-->

                                </table>

                            </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary " data-bind="event:{

                         click:Save}">Save</button>&nbsp;&nbsp;

                        <button type="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 () {

            return this.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 = new GenericReposity<ProductDetail>(new ProductDBEntities());

            }

            public ActionResult Index()

            {

                return View();

            }

            public void Insert(IList<ProductDetail> obj)

            {

                foreach (ProductDetail o in obj)

                {

                    _productDetails.Add(o);

                    _productDetails.Save();

                }

            }

        }

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!