不能保存数据第二次淘汰赛mvc

Question

我是新淘汰赛和asp.net mvc两个。 我想插入更新删除数据与数据库中的淘汰赛。我的淘汰赛模式是

function City(data) { 
    this.CityId = ko.observable(data.CityId); 
    this.CityName = ko.observable(data.CityName); 
} 
function CityViewModel() { 
    var self = this; 
    self.Citys = ko.observableArray([]); 
    self.CityId = ko.observable(); 
    self.CityName = ko.observable(); 
    self.selectedCity = ko.observable(); 
    // self.City = ko.observable(); 

    selectCity = function (item) { 
     self.selectedCity(item); 
    } 
    //load 
    loadCitys = function() { 
     $.getJSON("/Admin/GetCitys", {}, function (result) { 
      var mappedCitys = ko.utils.arrayMap(result.Data, function (item) { 
       return new City(item); 
      }); 
      self.Citys([]); 
      self.Citys.push.apply(self.Citys, mappedCitys); 
     }); 
    } 
    //edit 
    EditCity = function (item) { 
     //what need to do here 
     // is it possible to fill the hidden fild and the text box ?? 
    } 
    //save 
    SaveCity = function (item) { 
     City = new City(item); 
     $.ajax({ 
      type: "POST", 
      url: "/Admin/SaveCity", 
      data: ko.toJSON({ City: City }), 
      contentType: "application/json", 
      success: function (result) { 
       if (result.Edit) { 
        City.CityId = result.Success; 
        City.CityName = item.CityName; 
        self.Citys.push(City); 
        toastr.success('City Information Save Successfully', 'Success'); 
       } 
       else if (result.Edit == false) { 
        toastr.success('City Information Update Successfully', 'Success'); 
       } 
       else { 
        toastr.error('There is an error please try again later', 'Errror'); 
       } 
      } 
     }); 
    } 
    //delete 
    DeleteCity = function (City) { 
     $.ajax("/Admin/DeleteCity", { 
      data: ko.toJSON({ CityId: City.CityId }), 
      type: "POST", contentType: "application/json", 
      success: function (result) { 
       if (result.Success) { 
        self.Citys.remove(City); 
        toastr.success('City Remove Successfully', 'Success'); 
       } 
       else { 
        alert("Error.."); 
       } 
      } 
     }); 
    } 
} 
(function() { 
    ko.applyBindings(new CityViewModel, document.getElementById("Citys")); 
    loadCitys(); 
}); 

而且我的HTML代码

<table class="table table-striped"> 
      <thead> 
      <tr> 
       <th>City Id</th> 
       <th>City Name</th> 
       <th></th> 
       <th></th> 
      </tr> 
      </thead> 

      <tbody data-bind="foreach: $root.Citys"> 
      <tr data-bind="click: selectCity"> 
       <td><span data-bind="text:CityId"></span></td> 
       <td><span data-bind="text:CityName"></span></td> 
       <td><button data-bind="click: EditCity" class="btn btn-primary">Edit</button></td> 
       <td><button data-bind="click: DeleteCity" class="btn btn-danger">Delete</button></td> 
      </tr> 
      </tbody> 
     </table> 

<fieldset> 
       <legend>Add new/Edit City</legend> 
       <label>City name</label> 
       <input type="hidden" data-bind="value: CityId" /> 
       <input type="text" data-bind="value: CityName" placeholder="Type city name…"> 
       <button type="submit" data-bind="click: SaveCity" class="btn">Submit</button> 
      </fieldset> 

有了这个代码，我可以得到的数据形式的数据库在我看来，成功将文件显示它们， 我从数据库中删除数据，和我也可以插入数据到数据库，但这里是一个问题，我可以保存数据只有当我改变文本框的值（无页面刷新），并尝试保存城市信息，然后它说（在我的JavaScript代码的Firebug）：

TypeError：城市不是构造函数 City = new City（item）;

我的问题是我在这段代码中做了什么错误，我试图在编辑按钮单击时填充文本框和隐藏字段，我该怎么做？ 在此先感谢。

Answer 1

有许多与你的JavaScript故障，其中包括：

• 您的视图模型的方法，如SaveCity，DeleteCity，EditCity都被没有“这个/自”前缀定义的，因此，他们正被添加到全局名称空间。
• 在您的SaveCity方法中，您正在将一个City类的新实例分配给名为'City'的变量，因此会破坏City类。这将是第一次，但任何其他尝试创建一个城市的例子将产生一个例外。

无论如何，这应该是你的脚本和HTML的工作版本没有ajax的东西。你需要自己去适应。我也创建了一个工作JsFiddle here.。

function City(data) { 
    this.CityId = ko.observable(data.CityId); 
    this.CityName = ko.observable(data.CityName); 
} 
function CityViewModel() { 
    var self = this; 
    self.Citys = ko.observableArray([]);  
    self.SelectedCity = ko.observable();  
    self.EditingCity = ko.observable(new City({CityId: null, CityName: ''})); 

    self.EditCity = function(city){ 
     self.EditingCity(new City(ko.toJSON(city))); 
    }; 

    //load 
    self.loadCitys = function() { 
     self.Citys().push(new City({CityId: '1245', CityName: 'Los Angeles'})); 
     self.Citys().push(new City({CityId: '45678', CityName: 'San Diego'})); 
    }; 

    //save 
    self.SaveCity = function() { 
     var city = self.EditingCity(); 

     if(city.CityId()){   
      var cityIndex; 

      for(var i = 0; i < self.Citys().length; i++) { 
       if(self.Citys()[i].CityId() === city.CityId()) { 
        cityIndex = i; 
        break; 
       } 
      } 

      self.Citys[cityIndex] = city; 
     } 
     else{ 
      city.CityId(Math.floor((Math.random()*1000000)+1)); 
      self.Citys.push(city); 
     } 

     self.EditingCity(new City({CityId: null, CityName: ''})); 
    } 
    //delete 
    self.DeleteCity = function (city) {   
     self.Citys.remove(city); 
    }; 
} 


var viewModel = new CityViewModel(); 
viewModel.loadCitys(); 
ko.applyBindings(viewModel, document.getElementById("Citys")); 

HTML

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>City Id</th> 
     <th>City Name</th> 
     <th></th> 
     <th></th> 
    </tr> 
    </thead> 

    <tbody data-bind="foreach: Citys"> 
    <tr data-bind="click: $root.SelectedCity"> 
     <td><span data-bind="text:CityId"></span></td> 
     <td><span data-bind="text:CityName"></span></td> 
     <td><button data-bind="click: $root.EditCity" class="btn btn-primary">Edit</button></td> 
     <td><button data-bind="click: $root.DeleteCity" class="btn btn-danger">Delete</button></td> 
    </tr> 
    </tbody> 
</table> 

<fieldset data-bind='with:EditingCity'> 
    <legend>Add new/Edit City</legend> 
    <label>City name</label> 
    <input type="hidden" data-bind="value: CityId" /> 
    <input type="text" data-bind="value: CityName" placeholder="Type city name" /> 
    <button type="submit" data-bind="click: $root.SaveCity" class="btn">Submit</button> 
</fieldset>