knockout.js 视图模型未绑定在 asp.net mvc 控制器中以进行发布

Question

我正在使用一个简单的示例将淘汰赛的视图模型发布到控制器。但它没有发生。控制器上的 dog 方法为空。

我做错了什么？

我的模特

public class Dog
{
    public string name { get; set; }
    public int age { get; set; }
}

我的控制器，其中 Dog 对象为空

[HttpPost]
public ActionResult Save(Dog dog)
{
    return Json(new { Status = string.Format("Success, saved {0} with age: {1}", dog.name, dog.age) });
}

查看

<form method="POST" data-bind="submit: save">
    <div>Name:</div>
    <div><input type="text" data-bind="value: name" /></div>

    <div>Age:</div>
    <div><input type="text" data-bind="value: age" /></div>

    <div><input type="submit" value="Save" /></div>
</form>


 var ViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);

    //self.isValid = ko.computed(function () {
    //    return self.name().length > 0;
    //});

    self.save = function () {
        $.ajax({
            url: "Home/Save",
            type: "post",
            contentType: "application/json",
            data: ko.mapping.toJSON(self),
            success: function (response) {
                alert(response.Status);
            }
        });
    };
};

Answer 1

尝试添加[FromBody]属性

[HttpPost]
public ActionResult Save([FromBody]Dog dog)
{
  return Json(new { Status = string.Format("Success, saved {0} with age: {1}", dog.name, dog.age) });
}

并对 HTML 和 JavaScript 执行以下操作

<div>Name:</div>
<div><input type="text" data-bind="value: name" /></div>

<div>Age:</div>
<div><input type="text" data-bind="value: age" /></div>

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

<script>
  var ViewModel = function () {
    var self = this;
    self.name = ko.observable();
    self.age = ko.observable();

    self.save = function () {
      var jsonData = {'name': self.name(), 'age': self.age()};
      $.ajax({
          url: "http://localhost:8000/home/saves",
          type: "post",
          contentType: "application/json",
          data: jsonData,
          success: function (response) {
              alert(response.Status);
          }
      });
    };
  };

  ko.applyBindings(new ViewModel());
</script>