Knockout js, mvc 5 项目 - 将客户端 ViewModel 绑定到控制器动作答案

【问题标题】：Knockout js, mvc 5 project - bind client ViewModel to the controller actionKnockout js, mvc 5 项目 - 将客户端 ViewModel 绑定到控制器动作
【发布时间】：2017-03-17 01:34:10
【问题描述】：

你能帮我解决这个问题吗？我已成功从服务器 ViewModel 获取数据。但是，当我尝试将客户端 ViewModel 从视图保存到控制器保存操作时。我得到了空的 ViewModel。在示例中，我使用的是 JavaScriptSerializer。但是，不建议在 ASP.NET Core MVC 项目中使用，因为有 Newtonsoft 扩展。你能帮我采用下面的代码来工作吗？

@{
ViewBag.Title = "Details";
}

@{
     var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
}

@section scripts
{
     <script src="~/lib/knockout/dist/knockout.js"></script>
     <script src="~/lib/knockout-mapping/knockout.mapping.js"></script>
     <script src="~/js/realtyvm.js"></script>
     <script type="text/javascript">
        $(function () {
        var realtyViewModel = new RealtyViewModel(@Html.Raw(data));
        ko.applyBindings(realtyViewModel);
        });
     </script>
}

/* Realty Client ViewModel */

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

    self.save = function () {
        $.ajax({
            url: "/App/Save/",
            type: "POST",
            data: ko.toJSON(self),
            contentType: "application/json",
            success: function (data) {
                if (data.realtyViewModel != null)
                    ko.mapping.fromJS(data.realtyViewModel, {}, self);
            }
        });
    }

}
})();

控制器动作的外观如下：

    public ActionResult Create()
    {
        RealtyViewModel realtyViewModel = new RealtyViewModel();
        return View(realtyViewModel);
    }

    public JsonResult Save(RealtyViewModel realtyViewModel)
    {
        Realty realty = new Realty();
        realty.Title = realtyViewModel.Title;
        realty.Description = realtyViewModel.Description;
        realty.RealtyType = realtyViewModel.RealtyType;

        _repository.InsertRealty(realty);
        _repository.Save();

        realtyViewModel.MessageToClient = string.Format("{0} realty has been added to the database.", realty.Title);

        return Json(new { realtyViewModel });
    }

更新，我打开了 XHR 请求，这里是详细信息：

请求负载

{Id: 0, Title: "Te", Description: "te", RealtyType: "te", MessageToClient: null}
Description:"te" Id:0 MessageToClient:null RealtyType:"te" Title:"Te"

回复：

{"realtyViewModel":{"id":0,"title":null,"description":null,"realtyType":null,"messageToClient":" realty has been added to the database."}}

【问题讨论】：

你能也显示你的控制器代码吗？
您好，我已更新问题并添加了控制器操作。
我看到你和我的代码之间的唯一区别是我使用contentType: 'application/json; charset=utf-8'，不知道这是否重要。
请检查发送的 XHR 请求，例如 Chrome 开发工具的网络选项卡，以确保您的 JSON 数据在正文中，并且所有标头都正确。
您好，我检查了 XHR 请求，请在更新后的帖子中找到详细信息。

标签： asp.net-mvc knockout.js knockout-mapping-plugin

【解决方案1】：

我已经解决了这个问题，方法是指定数据的来源，将 [FromBody] 添加到发布操作。

    public JsonResult Save([FromBody]RealtyViewModel realtyViewModel)
    {
        Realty realty = new Realty();
        realty.Title = realtyViewModel.Title;
        realty.Description = realtyViewModel.Description;
        realty.RealtyType = realtyViewModel.RealtyType;

        _repository.InsertRealty(realty);
        _repository.Save();

        return Json(new { realtyViewModel });
    }

【讨论】：