将Knockout.js视图模型发布到.Net Core（2.0）MVC Controller

Question

概述 ：

当前，我尝试创建一个ASP.NET Core MVC网站，该网站在页面加载时从服务器获取数据。 之后，该页面使用淘汰表.js维护一个视图模型以更新从服务器发送的数据（第一步）。 最后，有一个按钮可以将已编辑的数据（通过AJAX请求）发送回服务器。 但是我的服务器方法中的相应值始终为空。

当前方法 ：

首先，有我的模型课。

    public class Order
    {
        public string Name { get; set; }
        public int TemplateId { get; set; }
        public decimal Price { get; set; }

        public int Contingent { get; set; }
        public int MaximumOrder { get; set; }
        public int UserOrderCount { get; set; }

        public Order() { }
        public Order(SnackOffer offer)
        {
            Name = offer.Template.Name;
            TemplateId = offer.Template.SnackTemplateId;
            Price = offer.Price;
        }
    }

在我看来，我将模型类用作列表（列表），并像这样加载数据：

var model = new viewModel();
    @(Json.Serialize(Model.Offers)).forEach(function (item, index) {
        model.offers.push({
            name: item.name,
            templateId: item.templateId,
            contingent: ko.observable(item.contingent),
            userOrderCount: ko.observable(item.userOrderCount),
            price: item.price,
            maximumOrder: item.maximumOrder
        });
    })

viewModel的定义如下（可读性的缩写）：

function viewModel() {
        var self = this;
        self.offers = ko.observableArray();
}

现在，当有人按下提到的更新按钮后，我将这个javascript函数称为：

self.ConfirmOrder = function () {
            var data = ko.toJSON(self.offers);

            $('#overlay').css('display', 'block');
            $.ajax({
                type: 'post',
                url: '/Snack/ConfirmOrder',
                data: data,
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    $('#overlay').css('display', 'none');
                },
                error: function (result) {
                    console.log(result);
                    $('#overlay').css('display', 'none');
                }
            });
        }

在这里，您可以看到我使用ko.toJSON方法将observableArray转换为JSON字符串，并将此字符串用作ajax帖子的数据参数。

MVC控制器中的ConfirmOrder方法当前如下所示：

    [HttpPost]
    public void ConfirmOrder(List<OrderSnackViewModel.Order> offers)
    {
        foreach (var item in offers)
        {
            _logger.LogInformation(item.Name);
        }            
    }

尚无逻辑，因为创建了要约列表（因此不能为null），但是列表项的计数始终为0。

在一个具体的示例中，这是我在加载视图时从服务器收到的JSON字符串：

[{“ name”：“ Test”，“ templateId”：1，“ price”：1.94，“ contingent”：4，“ maximumOrder”：7，“ userOrderCount”：0}，{“ name”：“ Test 1” ，“ templateId”：2，“ price”：1.50，“ contingent”：30，“ maximumOrder”：7，“ userOrderCount”：0}]]

这是我通过ajax调用生成的字符串：

[{“ name”：“ Test”，“ templateId”：1，“ contingent”：4，“ userOrderCount”：0，“ price”：1.94，“ maximumOrder”：7}，{“ name”：“ Test 1” ，“ templateId”：2，“或有”：30，“ userOrderCount”：0：“ price”：1.5，“ maximumOrder”：7}]

我已经尝试了什么：

• 我试图在我的MVC控制器中使用FromBody
• 我尝试用名称offer前缀JSON输出，以便我的控制器方法可以将JSON字符串项映射到对象。 （例如data ='{“ offers”：'+ data +'}';）
• 我试图重命名模型的属性以完全匹配JSON名称。 因此，我将Name重命名为name并将Contingent重命名为contingent，依此类推。
• 我试图在MVC控制器操作中使用数组而不是列表

那里有个大师可以帮助我解决这个问题吗？ （如果您需要更多信息，请随时询问）

Answer 1

感谢@adiga的输入，我找到了（我）错误的解决方案。

[HttpPost]
public JsonResult ConfirmOrder([FromBody]List<Order> offers)
{        
    _logger.LogInformation("COUNT -> " + offers.Count());
    foreach (var item in offers)
    {
        _logger.LogInformation(item.Name);
    }            
}

这是可行的解决方案。 我以为我已经尝试过了，但是也许我已经放弃了Ajax帖子的内容类型。

var data = ko.toJSON(self.offers);

$('#overlay').css('display', 'block');

$.ajax({
    type: 'post',
    url: '/Snack/ConfirmOrder',
    data: data,
    contentType: 'application/json; charset=utf-8',
    success: function (result) {
        //location.reload(); 
        $('#overlay').css('display', 'none');
    },
    error: function (result) {
        console.log(result);
        $('#overlay').css('display', 'none');
    }
});

再次感谢您的所有回复！