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

Question

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

• 要从服务器端转换为客户端虚拟机，我使用 ko.mapping.fromJS(model);
• 为了将数据发回服务器，我在使用 jQuery 通过 ajax 发送时通过 ko.toJSON(model) 将其转换回。

我在服务器上收到的数据为空。此外，当我在控制台中登录 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 格式以将数据发送到服务器时，我似乎没有做对。以下是我的所有代码:

Controller 代码:

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 property到 "application/json":

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

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

});