asp.net mvc - Automatically update viewModel after save to db -

asp.net mvc - Automatically update viewModel after save to db -

what want accomplish 1 time info got saved database, when goes client, automatically update observable array. somehow couldn't create happen.

this server side code:

[httpget] public jsonresult gettasks() { var tasks = context.todotasks.tolist(); homecoming json(tasks.select(c => new taskviewmodel(c)).tolist(), jsonrequestbehavior.allowget); } [httppost] public jsonresult addtask(string text, string date) { var ntask = new todotask() { text = text, date = datetime.parseexact(date, "mm/dd/yyyy", system.globalization.cultureinfo.invariantculture), isdone = false, order = 1, }; context.todotasks.add(ntask); context.savechanges(); homecoming json(new taskviewmodel(ntask), jsonrequestbehavior.allowget); }

this cshtml file code:

<form> <div class="controls controls-row" style="margin-top:40px;"> <input class="span7" type="text" placeholder="task do" style="margin-right:4px;" id="otext"> <div id="task-date" class="input-append date"> <input data-format="mm/dd/yyyy" type="text" placeholder="mm/dd/yyyy" name="taskdate" id="odate" /> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> </span> </div> <button class="btn" type="submit" style="margin-top:-10px;" data-bind="click: save">+</button> </div> <div class="controls"> <label class="checkbox"> <input type="checkbox"> mark finish </label> </div> <div id="task-section" style="margin-top:20px;"> <ul data-bind="foreach: tasks"> <!-- ko if: isdone --> <li> <span><input type="checkbox" style="margin:-5px 5px 0px 0px;" data-bind="checked: isdone" /></span> <del><span data-bind="text: text"></span></del> <del><span class="task-date" data-bind="text: date"></span></del> </li> <!-- /ko --> <!-- ko ifnot: isdone --> <li> <span><input type="checkbox" style="margin:-5px 5px 0px 0px;" data-bind="checked: isdone" /></span> <span data-bind="text: text"></span> <span class="task-date" data-bind="text: date"></span> </li> <!-- /ko --> </ul> </div> <div class="clearfix" style="margin-top:30px;"> <span class="pull-left" style="font-weight:bold;"><span data-bind="text: oitemleft"></span> item left</span> <span class="pull-right badge" style="cursor:pointer;" data-bind="click: remove">clear # completed item</span> </div> </form>

and js:

var viewmodel = function (data) { var self = this; self.tasks = ko.mapping.fromjs(data, {}, self.tasks); self.oitemleft = ko.computed(function () { var = 0; data.foreach(function (entry) { if (!entry.isdone) i++; }); homecoming i; }); self.save = function () { $.ajax({ url: "home/addtask", type: "post", data: { text: $('#otext').val(), date: $('#odate').val() }, success: function (response) { ko.mapping.fromjs(response, viewmodel); } }); }; self.remove = function () { alert('delete'); } } $(function () { $.getjson("/home/gettasks/", null, function (data) { ko.applybindings(new viewmodel(data)); }); // datepicker $('#task-date').datetimepicker({ language: 'pt-br', picktime: false }); });

self.save = function () { $.ajax({ url: "home/addtask", type: "post", data: { text: $('#otext').val(), date: $('#odate').val() }, success: function (response) { var task = ko.mapping.fromjs(response); self.tasks.push(task); } }); };

also oitemleft should referring self.tasks instead of data:

self.oitemleft = ko.computed(function () { var = 0; self.tasks().foreach(function (entry) { if (!entry.isdone) i++; }); homecoming i; });

asp.net-mvc knockout.js knockout-mapping-plugin