How to Edit data using pop-up modal in knockout js and MVC?


How can I edit/update value using pop-up modal in knockout js and MVC?

My data is being displayed in a table using knockout but when the user clicks on edit button, text boxes, values should prefill with data in pop up model against particular id, but I am not able to achieve this.


Asked by:- SnehalSawant
0
: 7217 At:- 12/13/2017 1:43:07 PM
Asp.Net mvc knockout js







1 Answers
profileImage Answered by:- pika

I suppose you have bind data like

<ul data-bind="foreach: Employees">
     <li data-bind="text: fullName, click: showEmployee"/>
</ul>

Now your recommend way for your view model should look like this(here Employee is your Model):

function EmployeeModal() {
     var self = this;
     self.Employees = ko.observableArray([]);

     self.currentEmployee = ko.observable(null);
     self.showEmployee = function(vm){
         self.currentEmployee(vm);
         $('#myModal').modal('show');
     };
     .... // rest of your view model here
}
//from : https://stackoverflow.com/questions/34193238/knockout-js-geting-a-modal-popup-to-edit-items

The last piece will be using KO's with binding to wrap your modal

<div class="modal" id="myModal" data-bind="with: currentEmployee">
    <h1 data-bind="text: fullName"></h1>
</div>

What this does is listen for the click event on an individual element and automatically pass the view model bound to that element to the click handler you defined. We're then taking that view model, storing it in its own observable and then showing the modal like normal. The key here is the with binding which only executes when there's data stored in the observable, and also sets the context of all nested code to be the employee stored in currentEmployee

Take a look at the complete  example working fiddle here

Another helpful link http://aboutcode.net/2012/11/15/twitter-bootstrap-modals-and-knockoutjs.html

0
At:- 12/14/2017 11:51:07 AM Updated at:- 12/14/2017 11:55:44 AM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use