asp.net-mvc - データを保存できません 2 回目のノックアウト 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 はコンストラクターではありません City = new City(item);

私の質問は、このコードで何が間違っていたのかということです。編集ボタンをクリックしたときにテキストボックスと隠しフィールドに入力しようとしていますが、どうすればよいですか? 前もって感謝します。