MVCコアからKnockoutJSのモデルバインド

Question

MVC4用に書かれたPluralsight 'Parent-Child with EF、MVC、Knockout'コースに従っています。私はMVCコアに対して取り組んでいます。私は、サーバー上のPOSTのモデルバインドの問題だと思っています。

マイコントローラー：

 public JsonResult Save(SalesOrderViewModel salesOrderViewModel) 
    { 
     if (ModelState.IsValid) 
     { 
      var salesOrder = new SalesOrder(); 
      salesOrder.CustomerName = salesOrderViewModel.CustomerName; 
      salesOrder.PONumber = salesOrderViewModel.PONumber; 
      _context.SalesOrder.Add(salesOrder); 
      _context.SaveChanges(); 

      return Json(JsonConvert.SerializeObject(salesOrderViewModel)); 
     } 
     else 
     { 
      return Json(JsonConvert.SerializeObject(ModelState)); 
     } 
    } 

//にModelStateは '有効' に来ているが、すべての値がnullです。

私のAJAX呼び出し：AJAXポストバックの

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

    console.log(self); 

    self.save = function() { 
     console.log(self); 
     console.log(ko.toJSON(self)); 
     debugger; 
     $.ajax({ 
      url: "/Sales/Save/", 
      type: "POST", 
      data: ko.toJSON(self), 
      headers: { 
       "contentType": "application/json" 
      }, 

      success: function (data) { 
       if (data.salesOrderViewModel) 
        ko.mapping.fromJS(data.salesOrderViewModel, {}, self); 
      }, 
      always: function (data) { 
       console.log(data); 
      } 
     }); 
    } 
}; 

にconsole.logは次のようになりますいるFormData上のChromeの報告書を確認する

postback data: {"SalesOrderId":0,"CustomerName":null,"PONumber":null} 

は示しています {"SalesOrderId":0,"CustomerName":"Steve","PONumber":"PO","MessageToClient":null,"__ko_mapping__":{"ignore":[],"include":["_destroy"],"copy":[],"observe":[],"mappedProperties":{"SalesOrderId":true,"CustomerName":true,"PONumber":true,"MessageToClient":true},"copiedProperties":{}}}

console.logsを前に-postはいくつかの奇妙なことを示しています： '自己'対 'ko.toJSON（自己）'しかし、私はKOに精通していないので、それがどれほど奇妙であるかは分かりません。

私は地元の人々ウィンドウ('((Microsoft.AspNetCore.Http.Internal.DefaultHttpRequest)this.Request).Form' threw an exception of type 'System.InvalidOperationException')で見た結合およびエラーメッセージをモデル化するために関連したカップルの質問を見てきました。

headers: { 
     "ContentType": "application/json" 
    }, 

に

contentType: "application/json" 

を変更

は、ローカルのエラーをなくすが、動作は変更されませんでした。コントローラのモデルはまだヌル値を示しています。

もう一つの答えは、署名に '[FromBody]'（ 'FromForm'）を追加することを提案しました。あなたができることを望んでいる！

Answer 1

ko.toJSON（自己）を使用すると、コントローラの動作に間違ったデータが送信されていると思います。これは、koモデル全体をJsonに変換しています。

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

console.log(self); 

self.save = function() { 
    console.log(self); 
    console.log(ko.toJSON(self)); 
    debugger; 
    $.ajax({ 
     url: "/Sales/Save/", 
     type: "POST", 
     data: ko.mapping.toJSON(self), 
     headers: { 
      "contentType": "application/json" 
     }, 

     success: function (data) { 
      if (data.salesOrderViewModel) 
       ko.mapping.fromJS(data.salesOrderViewModel, {}, self); 
     }, 
     always: function (data) { 
      console.log(data); 
     } 
    }); 
} 
}; 

また、あなたはそれが唯一の値が含まれていると仮定すると、関数に渡され、このデータを送ることができます：代わりにko.mapping.toJSON（自己）と

てみてくださいだけでマップされた値を送信してみてください投稿したいデータ：データ

Answer 2

私は自分のコースに従っています。そして、あなたのように、私はAsp.netコアに行くいくつかの問題があることに気づいた。

マイコントローラー：

public JsonResult Save([FromBody]SalesOrderViewModel salesOrderViewModel) 
     { 
      SalesModel salesOrder = new SalesModel(); 
      salesOrder.CustomerName = salesOrderViewModel.CustomerName; 
      salesOrder.PONumber = salesOrderViewModel.PONumber; 

      _context.SalesModels.Add(salesOrder); 
      _context.SaveChanges(); 

      salesOrderViewModel.MessageToClient = string.Format("{0}’s sales order has been added to the database.", salesOrder.CustomerName); 

      return Json(new { salesOrderViewModel }); 
     } 

マイノックアウトスクリプト：

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

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

は、ページ作成マイ：

@model SolutionName.ViewModels.SalesOrderViewModel 
@using Newtonsoft.Json 

@{ 
    ViewBag.Title = "Create a Sales Order"; 
} 

@{ 
    string data = JsonConvert.SerializeObject(Model); 
    } 

@section scripts{ 
    <script src="~/lib/knockout/dist/knockout.js"></script> 
    <script src="~/lib/knockout-mapping/build/output/knockout.mapping-latest.js"></script> 
    <script src="~/lib/Scripts/SalesOrderViewModel.js"></script> 
    <script type="text/javascript"> 
     var salesOrderViewModel = new SalesOrderViewModel(@Html.Raw(data)); 
     ko.applyBindings(salesOrderViewModel); 
    </script> 
} 

<h2>@ViewBag.Title</h2> 

<p data-bind="text: MessageToClient"></p> 

<div> 
    <div> 
     <label>Customer Name:</label> 
     <input data-bind="value: CustomerName" /> 
    </div> 
    <div> 
     <label>P.O. Number:</label> 
     <input data-bind="value: PONumber" /> 
    </div> 
</div> 

<p><button data-bind="click: save">Save</button></p> 

<p> 
    @Html.ActionLink("Back to List", "Index") 
</p> 

私は私のコントローラで "FromBody" を使用すると、中に保存されたデータデータベースは正常に動作します。しかし、機能しないのは、ボタンを押した後にビューが正しく更新されないということです。 私はasp.netのコアと、コードのこの部分が正常に動作しないことを理解：

ko.mapping.fromJS(data.salesOrderViewModel, {}, self);