asp.net - not updating entity in viewmodel after post request using ajax -
i new knockout.js , using post method update data database . here code
<%@ page language="c#" autoeventwireup="true" codefile="sproduct.aspx.cs" inherits="sproduct" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="http://knockoutjs.com/downloads/knockout-2.2.1.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="body"> <h2> knockout crud operations asp.net form app</h2> <h3> list of products</h3> <table id="products1"> <thead> <tr> <th> id </th> <th> name </th> <th> category </th> <th> price </th> <th> actions </th> </tr> </thead> <tbody data-bind="foreach: products"> <tr> <td data-bind="text: id"> </td> <td data-bind="text: name"> </td> <td data-bind="text: category"> </td> <td data-bind="text: formatcurrency(price)"> </td> <td> <button data-bind="click: $root.edit"> edit</button> <button data-bind="click: $root.delete"> delete</button> </td> </tr> </tbody> <tfoot> <tr> <td> </td> <td> </td> <td> total : </td> <td data-bind="text: formatcurrency($root.total())"> </td> <td> </td> </tr> </tfoot> </table> <br /> <div style="border-top: solid 2px #282828; width: 430px; height: 10px"> </div> <div data-bind="if: product"> <div> <h2> update product</h2> </div> <div> <label for="productid" data-bind="visible: false"> id</label> <label data-bind="text: product().id, visible: false"> </label> </div> <div> <label for="name"> name</label> <input data-bind="value: product().name" type="text" title="name" /> </div> <div> <label for="category"> category</label> <input data-bind="value: product().category" type="text" title="category" /> </div> <div> <label for="price"> price</label> <input data-bind="value: product().price" type="text" title="price" /> </div> <br /> <div> <button data-bind="click: $root.update"> update</button> <button data-bind="click: $root.cancel"> cancel</button> </div> </div> <div data-bind="ifnot: product()"> <div> <h2> add new product</h2> </div> <div> <label for="name"> name</label> <input data-bind="value: $root.name" type="text" title="name" /> </div> <div> <label for="category"> category</label> <input data-bind="value: $root.category" type="text" title="category" /> </div> <div> <label for="price"> price</label> <input data-bind="value: $root.price" type="text" title="price" /> </div> <br /> <div> <button data-bind="click: $root.create"> save</button> <button data-bind="click: $root.reset"> reset</button> </div> </div> </div> <script type="text/javascript"> function formatcurrency(value) { return "$" + value.tofixed(2); } function productviewmodel() { //make self 'this' reference var self = this; //declare observable bind ui self.id = ko.observable(""); self.name = ko.observable(""); self.price = ko.observable(""); self.category = ko.observable(""); var product = { id: self.id, name: self.name, price: self.price, category: self.category }; self.product = ko.observable(); self.products = ko.observablearray(); // contains list of products // initialize view-model $.ajax({ url: 'sproduct.aspx/getallproducts', cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data: {}, success: function (data) { // debugger; $.each(data.d, function (index, prd) { self.products.push(prd); }) //put response in observablearray } }); // calculate total of price after initialization self.total = ko.computed(function () { var sum = 0; var arr = self.products(); (var = 0; < arr.length; i++) { sum += arr[i].price; } return sum; }); //add new item self.create = function () { product.id="333"; if (product.name() != "" && product.price() != "" && product.category() != "") { $.ajax({ url: 'sproduct.aspx/add', cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data:"{item:" + ko.tojson(product) + "}", success: function (data) { self.products.push(data.d); self.name(""); self.price(""); self.category(""); }, error:function(data) { alert("error"); console.log(data.d); } }); } else { alert('please enter values !!'); } } //delete product details self.delete = function (product) { if (confirm('are sure delete "' + product.name + '" product ??')) { var id = product.id; $.ajax({ url: 'sproduct.aspx/delete', cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data:"{id:" + ko.tojson(id) + "}", success: function (data) { self.products.remove(product); }, error:function(data){ console.log(data.d); alert('error'); } }) } } // edit product details self.edit = function (product) { self.product(product); } // update product details self.update = function () { var product = self.product(); $.ajax({ url: 'sproduct.aspx/update', cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data:"{product:" + ko.tojson(product) + "}", success: function (data) { alert("success"); console.log(data.d); // self.products.removeall(); // self.products(data.d); //put response in observablearray self.product(null); alert("record updated successfully"); }, error: function (data) { console.log(data); } }) } // reset product details self.reset = function () { self.name(""); self.price(""); self.category(""); } // cancel product details self.cancel = function () { self.product(null); } } var viewmodel = new productviewmodel(); ko.applybindings(viewmodel); </script> </form> </body> </html> updated 
here screen shot of page . when click on update ajax success function called, no change in above table field .
why have update item list? you're not doing properties of object on server side you?
your edit method should this:
self.edit = function(item) { self.product(item); }; and remove following code nemesv said.
self.products.removeall(); self.products(data.d); //put response in observablearray my first post gentle ;)
response comment:
change success to:
success: function (data) { var product = ko.utils.arrayfirst(self.products(), function(item) { return (item.id == data.d.id); }); // either update product object new values data.d or delete , add new product object. (var p in product ) { product [p] = data.d[p]; } self.product(null); alert("record updated successfully"); }, found bug, replacing observables native values.
(var p in product ) { product [p](data.d[p]); } i took liberty of simplifying code , removing hasn't update function. following code example should work. ( used knockout 2.3.0 , jquery 1.9.1)
<script type="text/javascript"> function product(id, name, price, category) { var self = this; self.id = ko.observable(id); self.name = ko.observable(name); self.price = ko.observable(price); self.category = ko.observable(category); } function productviewmodel() { var self = this; self.product = ko.observable(); self.products = ko.observablearray(); // contains list of products $.ajax({ url: 'sproduct.aspx/getallproducts', cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data: {}, success: function (data) { $.each(data.d, function (index, prd) { var p = new product(prd.id, prd.name, prd.price, prd.category); self.products.push(p); }); } }); self.total = ko.computed(function () { var sum = 0; var arr = self.products(); (var = 0; < arr.length; i++) { sum += arr[i].price; } return sum; }); self.edit = function(product) { self.product(product); }; self.update = function() { var product = self.product(); $.ajax({ url: 'sproduct.aspx/update', cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data: "{product:" + ko.tojson(product) + "}", success: function (data) { (var p in product) { product[p](data.d[p]); } self.product(null); alert("record updated successfully"); }, error: function(data) { console.log(data); } }); }; self.reset = function() { self.name(""); self.price(""); self.category(""); }; self.cancel = function() { self.product(null); }; } $(document).ready(function() { var viewmodel = new productviewmodel(); ko.applybindings(viewmodel); }); </script>
Comments
Post a Comment