Home > DeveloperSection > Forums > How to Insert Data in database using Knockout.js.
Ankit Singh

Total Post:341

Points:2389
Posted on    October-26-2015 10:22 PM

 .NET Knockout.js  Knockout mvc 
Ratings:


 1 Reply(s)
 971  View(s)
Rate this:
Can anyone please help me how to solve this problem.


aditya kumar Patel

Total Post:244

Points:1736
Posted on    October-26-2015 10:35 PM



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();

            }

        }

    }

}


Don't want to miss updates? Please click the below button!

Follow MindStick