MVC 코어에서 KnockoutJS의 모델 바인딩

Question

MVC4 용으로 작성된 Pluralsight 'EF, MVC, Knockout'과정의 부모 - 자녀를 따라갈 것입니다. 나는 MVC Core에 반대하여 일하고 있으며, 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입니다.

내 아약스 전화 : 아약스 포스트 백에

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에 크롬의 보고서를 확인

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는 'self'대 'ko.toJSON (self)'라는 몇 가지 낯설음을 보여 주지만 KO에 익숙하지 않아서 얼마나 이상한 지 잘 모르겠습니다.

나는 지역 창 ('((Microsoft.AspNetCore.Http.Internal.DefaultHttpRequest)this.Request).Form' threw an exception of type 'System.InvalidOperationException')에서 본 바인딩 및 오류 메시지를 모델링과 관련된 몇 가지 질문을 본 적이있다.

는

contentType: "application/json" 

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

에 변경하면 지방 주민에 오류를 제거하지만 동작을 변경하지 않았다. 컨트롤러의 모델은 여전히 ​​Null 값을 표시합니다.

또 다른 대답은 서명에서 '[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 Core에가는 몇 가지 문제가 있음을 발견했습니다.

내 컨트롤러 :

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);