無法將JSon與MVC 3控制器數據綁定使用KnockoutJS

Question

我是JavaScript和MVC 3的新手。我正在開發示例應用程序以熟悉KnockoutJs。 我傳遞一個C＃對象的一些屬性到控制器。比這個對象傳遞給視圖序列化爲JSon。然後我在視圖中使用Knockout中的數據，並希望將此數據返回給服務器。但與服務器數據的綁定因我的屬性而失敗。 這裏是我的代碼：

型號：

public class FranchiseInfo 
    { 
     public string FullName { get; set; } 
     public string ShortName { get; set; } 
     public List<string> ServerIps = new List<string>(); 
    } 

控制器與樣本數據返回JSON的視圖：

public JsonResult Data() 
     { 
      FranchiseInfo franchiseInfo = new FranchiseInfo(); 
      franchiseInfo.FullName = "PokerWorld"; 
      franchiseInfo.ShortName = "PW"; 
      franchiseInfo.ServerIps.Add("192.111.1.3"); 
      franchiseInfo.ServerIps.Add("192.112.1.4"); 

      return Json(franchiseInfo, JsonRequestBehavior.AllowGet); 
     } 

JavaScript文件使用淘汰賽：

$(function() { 

function viewModel() { 
    var self = this; 
    self.FullName = ko.observable(); 
    self.ShortName = ko.observable(); 
    self.optionValues = ko.observableArray([]); 
    self.ServerIps = ko.observableArray([]); 

    $.getJSON("Home/Data", function (data) { 
     self.FullName(data.FullName); 
     self.ShortName(data.ShortName); 
     self.optionValues([data.FullName, data.ShortName]); 
     for (var i = 0; i < data.ServerIps.length; i++) { 
      self.ServerIps.push({ name: ko.observable(data.ServerIps[i]) }); 
     } 
    }); 

    self.addIp = function() { 
     self.ServerIps.push({ name: ko.observable("0.0.0") }); 
    } 

    self.showIps = function() { 
     alert(self.ServerIps[name]); 
    } 

    self.save = function() { 
     $.ajax({ 
      url: "Home/Save", 
      type: "post", 
      data: ko.toJSON({ FullName: self.FullName, ShortName: self.ShortName, ServerIps: self.ServerIp }), 
      contentType: "application/json", 
      success: function (result) { alert("result") } 
     }); 
    } 
}; 
ko.applyBindings(new viewModel); 

查看：

Full Name: 
<span data-bind="text: FullName"></span> 
<input data-bind="value: FullName" /> 
</div> 

<div> 
Short Name: 
<span data-bind="text: ShortName"></span> 
</div> 

<select data-bind="options: optionValues"></select> 

<div data-bind="foreach: ServerIps"> 
    Name: 
    <input data-bind="value: name" /> 
    <span data-bind="text: name" /> 
</div> 

<div data-bind="text: ko.toJSON(ServerIps)"></div> 


<button data-bind="click: addIp">Add IP</button> 

<button data-bind="click: save">Save</button> 

當點擊保存按鈕將數據發送到JSON格式的服務器：

這裏是控制器：

public JsonResult Save(FranchiseInfo franchiseInfo) 
     { 
      //some data here 
      //return Json result 
     } 

全名和短名稱的屬性與C＃模型時正確綁定我將它們以Json格式發送回服務器，但數組的ServerIps屬性無法綁定。我想是因爲它的格式是{name：ip}，而模型屬性ServerIps是List類型。我怎樣才能解決這個問題 ？任何有關工作示例的幫助將不勝感激。謝謝。

Answer 1

我在Java Spring中遇到了同樣的問題。 我們通過序列化ViewModel作爲請求字符串來解決它。

我們寫的函數自己（雖然你可能要檢查的「價值」是一個數組，走位遞歸）：

function serializeViewModelToPost(dataString) { 
var data = ko.toJS(dataString); 
var returnValue = ''; 
$.each(data, function (key, value) { 

     returnValue += key + '=' + value + '&'; 

}); 

return returnValue; 
} 

另一種選擇是分析它的服務器端： link

UPDATE：

self.save = function() { 
    $.ajax({ 
     url: "Home/Save", 
     type: "post", 
     data: serializeViewModelToPost(this)), 
     success: function (result) { alert("result") } 
     }); 

你仍然需要編輯序列化功能來檢查數組。