不能保存數據第二次淘汰賽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>