将复杂的KO ViewModel返回给控制器

时间:2014-04-21 19:55:36

标签: json knockout.js

我试着在这里发帖POST a complex viewmodel to a controller,但这有点无益。

我有一个ViewModel,当我在页面上将模型转储为JSON时,如下所示:

{
  "selectedCatalog": 7,
  "catalogs": [
    {
      "name": "EDI Outbound",
      "catalogId": 7,
      "enabled": true,
      "aggregate": true
    },
    {
      "name": "CSV Aggregate Outbound",
      "catalogId": 8,
      "enabled": true,
      "aggregate": true
    },
    {
      "name": "CSV Non-Aggregate Outbound",
      "catalogId": 9,
      "enabled": true,
      "aggregate": false
    }
  ],
  "catalogConfiguration": [
    {
      "pdbColumnName": "Active",
      "outboundColumnName": "Active",
      "pdbColumnId": 2,
      "selectedColumn": 2
    },
    {
      "pdbColumnName": "Category",
      "outboundColumnName": "Category",
      "pdbColumnId": 3,
      "selectedColumn": 3
    },
    {
      "pdbColumnName": "Inventory",
      "outboundColumnName": "Inventory",
      "pdbColumnId": 4,
      "selectedColumn": 4
    },
    {
      "pdbColumnName": "Manufacturer",
      "outboundColumnName": "Manufacturer",
      "pdbColumnId": 5,
      "selectedColumn": 5
    },
    {
      "pdbColumnName": "ManufacturerSKU",
      "outboundColumnName": "ManufacturerSKU",
      "pdbColumnId": 6,
      "selectedColumn": 6
    },
    {
      "pdbColumnName": "MSRP",
      "outboundColumnName": "MSRP",
      "pdbColumnId": 7,
      "selectedColumn": 7
    },
    {
      "pdbColumnName": "Name",
      "outboundColumnName": "Name",
      "pdbColumnId": 8,
      "selectedColumn": 8
    },
    {
      "pdbColumnName": "Price",
      "outboundColumnName": "Price",
      "pdbColumnId": 9,
      "selectedColumn": 9
    },
    {
      "pdbColumnName": "SKU",
      "outboundColumnName": "SKU",
      "pdbColumnId": 10,
      "selectedColumn": 10
    },
    {
      "pdbColumnName": "UPC",
      "outboundColumnName": "UPC",
      "pdbColumnId": 11,
      "selectedColumn": 11
    },
    {
      "pdbColumnName": "Weight",
      "outboundColumnName": "Weight",
      "pdbColumnId": 12,
      "selectedColumn": 12
    }
  ]
}

我不知道怎么把它放到我的控制器里才能使用。我可以发回,但字符串从以下为空: 控制器

 [HttpPost]
        public void UpdateCatalog(string data)
        {
            var heh = data;
        }

查看

function CatalogConfigurationModel(data) {
    var self = this;
    self.pdbColumnName = ko.observable(data.PDBColumnName);
    self.outboundColumnName = ko.observable(data.OutboundColumnName);
    self.pdbColumnId = ko.observable(data.PDBColumnId);
    self.selectedColumn = ko.observable(data.ConfiguredColumnId);
}

function CatalogList(data) {
    var self = this;
    self.name = ko.observable(data.Name);
    self.catalogId = ko.observable(data.Id);
    self.enabled = ko.observable(data.Enabled);
    self.aggregate = ko.observable(data.Aggregate);
}


var ViewModel = function () {
    var self = this;
    self.submitChanges = function() {
        var data = ko.toJS(ViewModel);
        $.post('/PDBConfig/UpdateCatalog/',
            data,
            function(status) {
                alert(status);
            });
    };
    //self.catalogs = ko.observableArray([
    //new CatalogList('EDI Outbound', 2, 1),
    //new CatalogList('CSV Outbound', 1, 1)
    //]);

    self.selectedCatalog = ko.observable();
    self.catalogs = ko.observableArray([]);
    self.catalogConfiguration = ko.observableArray([]);

    $.getJSON(
        "/PDBConfig/GetCatalogList/",
        function (data) {
            var mappedTasks = $.map(data, function (item) { return new CatalogList(item) });
            self.catalogs(mappedTasks);
            self.selectedCatalog(self.catalogs[1]);
            $.getJSON(
            "/PDBConfig/GetCatalogConfig/",
            { id: data[0].Id },
            function (catalogData) {
                var mappedCatalog = $.map(catalogData, function (item) { return new CatalogConfigurationModel(item) });
                self.catalogConfiguration(mappedCatalog);
            });

        });


};
$(document).ready(function () {
    var model = new ViewModel();

    model.selectedCatalog.subscribe(function (newValue) {
        $.getJSON(
            "/PDBConfig/GetCatalogConfig/",
            { id: newValue },
            function (catalogData) {
                var mappedCatalog = $.map(catalogData, function (item) { return new CatalogConfigurationModel(item) });
                model.catalogConfiguration(mappedCatalog);
            });
    });

    ko.applyBindings(model);

所以问题是我从哪里开始在C#中映射它?我是否创建了一个具有相同命名约定的模型,该模型在我的JSON字符串中?

1 个答案:

答案 0 :(得分:0)

首先,如果你把它作为一个字符串传递给你的控制器,那就是它真的。 Newtonsoft JSonNet Convertor(http://www.newtonsoft.com/json)是我们用来处理这些转换的框架。

使用此库,您可以将字符串直接传递到对象中:

[HttpPost]
public JsonNetResult UpdateCatalog (UpdateCatalogModel data) { ... }

您也可以使用序列化程序方法将字符串传递给控件后将其转换为对象。

如果您对此库的实施有任何疑问,请访问SO组: https://stackoverflow.com/questions/tagged/json.net