Question

我是javascript和MVC 3的新手。我正在开发一个示例应用程序来熟悉KnockoutJs。我将带有一些属性的c＃对象传递给控制器。将此对象传递给序列化为JSon的View。然后我在我的视图中使用Knockout的数据，并希望将此数据返回给服务器。但是对于我的属性，与服务器数据的绑定失败了。这是我的代码：

型号：

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

带有样本数据的控制器将JSon返回给View：

 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
        }

当我以Json格式将它们发送回服务器时，全名和短名称属性与c＃模型正确绑定，但是作为数组的ServerIps属性无法绑定。我认为因为它的格式为{name：ip}，而模型属性ServerIps的类型为List。我怎样才能解决这个问题？任何有关工作示例的帮助将不胜感激。感谢。

Answer 1

我在Java Spring中遇到了同样的问题。我们通过将ViewModel序列化为请求字符串来解决它。

我们自己写了这个函数（虽然你可能想检查'value'是否是一个数组并且有点递归）：

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

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

});

return returnValue;
}

另一种选择是解析服务器端： link

更新：

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

您仍然需要编辑序列化功能以检查数组。

无法使用KnockoutJS将JSon与MVC 3控制器数据绑定

1 个答案: