Knockout绑定/映射失败，向控制器

Question

我正在尝试使用knockout来创建客户端模型，因此可以对所需的属性进行客户端验证，其中一些属性是嵌套的，或者是嵌套在其他模型的列表中。

在遵循一些指南和模式时，我尝试从主视图模型映射测试列表，并在表单提交时将其发送回控制器，验证将阻止表单在值为null时提交。

提交表单时，不仅无法使用当前设置进行验证，编辑后的值（在加载视图中正确填充，因此某些类型的绑定正确工作）返回为null控制器。

namespace KnockoutDemo.Models
{
    public class XmlParameter
    {
        public HttpPostedFileBase XmlValue;
        public string Name;
    }
}


public class TestStepViewModel
{
    public int TestStepId { get; set; }
    public string TestStepName { get; set; }

    public string Message { get; set; }

    public List<XmlParameter> XmlParameters { get; set; }
}

查看

@using System.Web.Mvc.Ajax
@using System.Activities.Expressions
@using System.Web.Script.Serialization

@model KnockoutDemo.Models.TestStepViewModel



@{ string data = new JavaScriptSerializer().Serialize(Model);}



@section scripts
{

    <script src="~/Scripts/knockout-3.4.0.js"></script>
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/teststepviewmodel.js"></script>
    <script type="text/javascript">
        var testStepViewModel = new TestStepViewModel(@Html.Raw(data));
        ko.applyBindings(testStepViewModel);
    </script>
}

<form>

    <div>

        <div class="form-group">
            <label class="control-label" for="TestStepName">Test Step Name:</label>
            <input class="form-control" name="TestStepName" id="TestStepName" data-bind="value: TestStepName"/>
        </div>

        <div class="form-group">
            <label class="control-label" for="TestStepName">Test Step Id:</label>
            <input class="form-control" name="TestStepId" id="TestStepId" data-bind="value: TestStepId" disabled="disabled"/>
        </div>

        <table class="table table-striped">
            <tr>
                <th>Product Code</th>
            </tr>
            <tbody data-bind="foreach: XmlParameters">
            <tr>
                <td class="form-group"><input name="Name" class="form-control input-sm" data-bind="attr: {'id': 'Name_' + $index()}, value: Name"/></td>
            </tr>
            </tbody>
        </table>

    </div>

    <p><button class="btn btn-primary" data-bind="click: save" type="submit" >Save</button></p>
</form>

teststepviewmodel.js + validation

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

    self.save = function () {
        $.ajax({
            url: "/Home/Save/",
            type: "POST",
            data: ko.toJSON(self),
            contentType: "application/json"

        });
    }
}


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


var mapping = {
    'XmlParameters': {
        key: function (xmlParameters) {
            return ko.utils.unwrapObservable(xmlParameters.Name);
        },
        create: function (options) {
            return new XmlParameter(options.data);
        }
    }
};



$("form").validate({
        submithandler: function () {
            testStepViewModel.save();
        },
        rules: {
            TestStepName: {
                required: true,
                maxlength: 30

            },
            Value: {
                required: true

            },
            XmlValue: {
                required: true
            }   
        },

    messages: {
        TestStepName: {
            required: "A Test Step must have a non-null value, please enter a name"
        },
        Value: {
            required: "The parameter can't be null/empty"
        }
    }
});

JsonResult Save（）控制器正确填充了Id和Test Step Name，但XmlParameters都为null。

控制器（就像我说的，这只是一个通过客户端验证返回淘汰模型的测试，所以我只是在加载时填充视图模型并在JsonResult上设置断点以查看模型的内容）< / p>

public ActionResult Index(TestStepViewModel ts)
        {
            TestStepViewModel testStepViewModel = new TestStepViewModel
            {
                TestStepName = "Editing A Test Step",
                TestStepId = 10,
                Message = "Hello, this is a message"
            };
            testStepViewModel.XmlParameters = new List<XmlParameter>();

            testStepViewModel.XmlParameters.Add(new XmlParameter
            {
                Name = "Xml P1"
            });

            testStepViewModel.XmlParameters.Add(new XmlParameter
            {
                Name = "Xml P2"
            });



            return View("Index", testStepViewModel);

        }

        public JsonResult Save(TestStepViewModel testStepViewModel)
        {
            return null;
        }