如何使用knockoutjs实用程序将JS对象转换为JSON以将json数据发送到asp.net mvc中的服务器？

Question

我正在使用MVC4并尝试使用knockoutjs库.如果我使用传统的提交点击而不使用Knockoutjs库,表单会将数据提交给控制器.我正在使用knockoutjs映射插件从服务器转换viewmodel以创建客户端viewmodel,然后尝试将其扩展到客户端.

• 要从服务器端转换为客户端vm,我正在使用 ko.mapping.fromJS(model);
• 要将数据发布回服务器,我将ko.toJSON(model)使用jQuery通过ajax发送时将其转换回来.

我在服务器上收到的数据为空.此外,当我登录ko.toJSON(model)控制台时,我得到以下内容:

{
    "FirstName": "foo",
    "LastName": "foo1",
    "Address": "United Kingdom",
    "Age": 22,
    "__ko_mapping__": {
        "ignore": [],
        "include": ["_destroy"],
        "copy": [],
        "observe": [],
        "mappedProperties": {
            "FirstName": true,
            "LastName": true,
            "Address": true,
            "Age": true
        },
        "copiedProperties": {}
    }
}

在将js对象转换回json格式以将数据发送到服务器时,我似乎做得不对.以下是我的所有代码:

控制器代码:

public class PersonController : Controller
    {
        PersonViewModel viewModel = new PersonViewModel();
        //
        // GET: /Person/
        [HttpGet]
        public ActionResult Index()
        {

            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Index(PersonViewModel viewModel)
        {
            if (ModelState.IsValid)
            {

            }
            return View(viewModel);
        }
//
    // GET: /Person/LoadData/

    public ActionResult LoadData()
    {
        viewModel = new PersonViewModel() { FirstName = "foo", LastName = "foo1", Age = 22, Address = "United Kingdom" };
        return Json(viewModel, JsonRequestBehavior.AllowGet);
    }
}

服务器上的ViewModel:

 public class PersonViewModel
    {
        [Required]
        public string FirstName { get; set; }
        [Required]        
        public string LastName { get; set; }
        [Required]
        public string Address { get; set; }
        [Required]
        public int Age { get; set; }
    }

客户端的ViewModel - JavaScript:

var Person = function () {
    var self = this;


    self.SetupKOBindings = function () {
        var source = null;
        this.GetViewModelFromServer = function () {
            $.ajax(
                {
                    url: "/Person/LoadData",
                    type: "GET",
                    async: false
                }).
            success(function (data) {
                source = data;
            });
        }();
        return ko.mapping.fromJS(source);
    };

    self.ViewModel = function () {
        this.model = self.SetupKOBindings();

        this.model.Save = function () {
            console.log(ko.toJSON(model));
            $.ajax(
               {
                   url: "/Person/Index",
                   type: "POST",
                   data: ko.toJSON(model),
                   async: true
               }).
           success(function (data) {

           });
        }

        return this.model;
    };

    self.ApplyKOBindings = function (vm) {
        ko.applyBindings(vm);
    };

    return this;
};

$(function () {
    var PersonPage = Person();
    var viewModel = PersonPage.ViewModel();
    PersonPage.ApplyKOBindings(viewModel);
});

服务器上的.cshtml中的HTML:

<form action="" method="post">
        <div>
            First Name:
            @Html.TextBoxFor(model => model.FirstName, new { data_bind = "value: FirstName,valueUpdate:['afterkeydown','propertychange','input']" })<br />
        </div>
        <div>
            Last Name:
                    @Html.TextBoxFor(model => model.LastName, new { data_bind = "value: LastName,valueUpdate:['afterkeydown','propertychange','input']" })<br />
        </div>
        <div>
            Address:
                    @Html.TextBoxFor(model => model.Address, new { data_bind = "value: Address" })<br />
        </div>
        <div>
            Age:
                    @Html.TextBoxFor(model => model.Age, new { data_bind = "value: Age" })<br />
        </div>
        <input type="submit" value="Save" data-bind="click: Save"/>

    </form>

Answer 1

如果您使用映射插件,则应使用ko.mapping.toJSON(model)而不是ko.toJSON(model)因为这会删除" ko_mapping "属性.

但是你的主要问题是,因为你发送JSON,你需要在你的请求中告诉你发送JSON,否则ASP.NET MVC无法解析服务器端的请求.为此,您需要将contentType属性设置为"application/json":

所以以下$.ajax调用应该有效:

$.ajax({
    url: "/Person/Index",
    type: "POST",
    data: ko.mapping.toJSON(model),
    async: true,
    contentType: "application/json"
}).success(function (data) {

});