无法 post 表单数据到控制器

Question

模型：我有一个包含地址和姓名集合的视图。我知道我遗漏了一些东西但无法弄清楚。我是 Knockout 的新手，试图通过使用 mvc 创建一些示例。我看到控制器中出现空值。这是 fiddle： https://jsfiddle.net/iamsrk/9kf41vd7/32/

     public class PersonModel
        {
            public virtual ICollection<NameModel> NameModel { get; set; } = new HashSet<NameModel>();
            public virtual ICollection<AddressModel> AddressModel { get; set; } = new HashSet<AddressModel>();
        }

        public class NameModel
        {
            public string FirstName { get; set; }
            public string MiddleName { get; set; }
            public string LastName { get; set; }
            public string Gender { get; set; }
            public string Suffix { get; set; }
        }
        public class AddressModel
        {
            public string FirstName { get; set; }
            public string MiddleName { get; set; }
            public string LastName { get; set; }
            public string ReportingDate { get; set; }
            public string Gender { get; set; }
            public string Suffix { get; set; }
        }

控制器操作：

public ActionResult GetPerson(PersonModel personModel)
        {
            return null;
        }

查看：

  <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h1 class="panel-title">
                        Names
                    </h1>
                </div>
                <div data-bind="with: nameModel" class="panel-body">
                    <table class="table table-hover table-responsive">
                        <thead>
                            <tr>
                                <th>First</th>
                                <th>Middle</th>
                                <th>Last</th>
                                <th>Suffix</th>
                                <th>Gender</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: names">
                            <tr>
                                <td>
                                    <input class="form-control" data-bind="value: firstName" />
                                </td>
                                <td>
                                    <input class="form-control" data-bind="value: middleName" />
                                </td>
                                <td>
                                    <input class="form-control" data-bind="value: lastName" />
                                </td>
                                <td>
                                    <input class="form-control" data-bind="value: suffix" />
                                </td>
                                <td>
                                    <input class="form-control" data-bind="value: gender" />
                                </td>
                                <td style="vertical-align: inherit;"><a href="#" data-bind="click:$parent.removeName.bind($data)">Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <button class="btn btn-success btn-sm" data-bind="click: addName.bind($data)">Add Name</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h1 class="panel-title">
                        Addresses
                    </h1>
                </div>
                <div data-bind="with: addressModel" class="panel-body">
                    <table class="table table-hover table-responsive">
                        <thead>
                            <tr>
                                <th>street</th>
                                <th>city</th>
                                <th>state</th>
                                <th>country</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach:names">
                            <tr>
                                <td>
                                    <input class="form-control" data-bind="value: street" />
                                </td>
                                <td>
                                    <input class="form-control" data-bind="value: city" />
                                </td>
                                <td>
                                    <input class="form-control" data-bind="value: state" />
                                </td>
                                <td>
                                    <input class="form-control" data-bind="value: country" />
                                </td>
                                <td style="vertical-align: inherit;"><a href="#" data-bind="click:$parent.removeAddress.bind($data)">Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <button class="btn btn-success btn-sm" data-bind="click: addAddress.bind($data)">Add Address</button>
                </div>
            </div>
        </div>
    </div>
    <button id="saveButton" type="button" class="btn btn-primary btn-company pull-right" data-bind="click: save">
        Save
        <span class="glyphicon glyphicon-download-alt"> </span>
    </button>

敲除脚本：

<script>
    var NameModel = function(names) {
        var self = this;
        self.addName = function() {
            self.names.push({
                firstName: "",
                middleName: "",
                lastName: "",
                suffix: "",
                gender: ""
            });
        };
        self.removeName = function(name) {
            self.names.remove(name);
        };
        if (names != null)
            self.names(names);
    };
    var AddressModel = function(addresses) {
        var self = this;
        self.names = ko.observableArray(addresses);

        self.addAddress = function() {
            self.names.push({
                street: "",
                city: "",
                state: "",
                country: ""
            });
        };
        self.removeAddress = function(address) {
            self.names.remove(address);
        };
        if (addresses != null)
            self.names(addresses);
    };
    var viewModel = {
        nameModel: new NameModel([
            {
                firstName: "",
                middleName: "",
                lastName: "",
                suffix: "",
                gender: ""
            }
        ]),
        addressModel: new AddressModel([
            {
                street: "",
                city: "",
                state: "",
                country: ""
            }
        ]),
        save: function () {
            var self = this;
            $.ajax({
                url: '@Url.Action("GetPerson", "Person")',
                type: 'POST',
                contentType: 'application/json',
                data: ko.toJSON({ PersonModel: self
        })
            });
        }
    };
    ko.applyBindings(viewModel);

</script>

Answer 1

这个

data: ko.toJSON({ PersonModel: self })

会发这个

{ PersonModel: { nameModel: { names: [...] }, addressModel: { addresses: [...] } }

这与您的 C# classes 不匹配。你想发送这个

{ nameModel: [...], addressModel: [...] }

因为在 JSON 中未命名根对象并且您的 C# class 没有 names 或 addresses 属性。尝试

data: ko.toJSON({ nameModel: self.nameModel.names,
                  addressModel: self.addressModel.addresses })

此外，POST 到一个名为 "GetPerson" 的控制器操作是一个非常糟糕的主意。您的地址模型有一个名为 names 的可观察数组，我认为这是一个复制粘贴错误。

无法 post 表单数据到控制器

Unable to post the form data to controller

javascript

asp.net-mvc

knockout.js

knockout-mvc