So legen Sie die ID für das neu erstellte Element mit Knockout

Question

Das Problem ist, dass ich ein neu erstelltes Element nicht aktualisieren kann, weil auf dem Server ich keine ID erhalte.

Ich versuche, Knockout zu lernen, und ich bin nicht in der Lage, eine Möglichkeit zu finden, die ID für neu erstellte Elemente bereitzustellen.

Ich habe ein Objekt mit ID und Name, mit Knockout kann ich alle Crud-Operationen machen, aber nach dem Einfügen eines neuen Elements, wenn ich versuche, seinen Namen zu ändern, bin ich nicht in der Lage, weil dieses Element keinen Id-Wert hat.

Meine Frage ist: Jedes Mal, wenn ich einen neuen Artikel hinzufügen, muss ich eine neue Sammlung von Elementen zurück in die Ansicht, und die Ansicht erneut binden?

oder gibt es einen Weg zu einer anderen Möglichkeit, die ID für die neu eingefügten Elemente bereitzustellen?

ist hier mein Code:

function Person(id, name) { 
    var self = this; 
    self.Id = ko.observable(id); 
    self.nume = ko.observable(name); 


} 

function PersonVm() { 
    var self = this; 



self.Persons = ko.observableArray([]); 


self.newPerson = ko.observable(new Person()) 
self.isModificare = false; 

self.addPerson = function() { 

    if (!self.isModificare) { 
     $.ajax("/Person/AddPerson", { 
      data: ko.toJSON({ Person: self.newPerson }), 
      type: "post", contentType: "application/json", 
      success: function (result) { alert(result.mesaj); } 
     }); 
    } else { 
     $.ajax("/Person/UpdatePerson", { 
      data: ko.toJSON({ Person: self.newPerson }), 
      type: "post", contentType: "application/json", 
      success: function (result) { alert(result) } 
     }); 
    } 
    self.isModificare = false; 


    if (!self.isModificare) self.Persons.unshift(self.newPerson()); 
    self.newPerson(new Person()); 


} 
self.removePerson = function() { 
    $.ajax("/Person/DeletePerson", { 
     data: ko.toJSON({ Person: self.newPerson }), 
     type: "post", contentType: "application/json", 
     success: function (result) { alert(result) } 
    }); 
    self.Persons.remove(self.newPerson()); 
    self.newPerson(new Person()); 


} 

self.ModificaPerson = function (person) {   
    self.newPerson(person); 
    self.isModificare = true; 

} 

$.getJSON("/Person/GetPersons", function (allData) { 
    var mapPerson = $.map(allData, function (item) { return new Person(item.Id,item.Name) }); 
    self.Persons(mapPerson); 
}); 
} 

ko.applyBindings(new PersonVm()); 

Edit:

die Ansicht Dies ist:

<div class="input-group"> 

     <input type="text" class="form-control" data-bind="value: newPerson().name"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" data-bind="click:addPerson"> 
       <span class="glyphicon glyphicon-plus-sign" style="color:green"></span> 
      </button> 
     </span> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" data-bind="click:$root.removePerson"> 
       <span class="glyphicon glyphicon-trash" style="color:red"></span> 
      </button> 
     </span> 
    </div> 



<ul data-bind="foreach: Perons" class="list-group" id="content"> 
    <li class="list-group-item" data-bind="text: name,click:$root.ModificaPerson"></li> 
</ul> 

Answer 1

Zwei Schritte zu bekommen, was Sie wollen:

1. Stellen Sie sicher, dass Ihr "Person/AddPerson" -Webdienst die ID des erstellten Objekts zurückgibt.

2. Ihre Update-Methode ändern, so dass es eine ID auf der newPerson Eigenschaft legt:

   $.ajax("/Person/AddPerson", { 
       data: ko.toJSON({ Person: self.newPerson }), 
       type: "post", contentType: "application/json", 
       success: function (result) { 
        self.newPerson().Id(result.Id); 
       } 
   }); 
   

Beachten Sie, dass der obige Code setzt voraus, dass Ihre Dienste ein JSON-Objekt mit einer ID-Eigenschaft gibt den Namen ‚Id ".