淘汰賽POST發送空類

Question

使用本文http://www.mytecbits.com/microsoft/dot-net/knockout-js-and-bootstrap-with-asp-net-mvc-part-2拿到淘汰賽/ AJAX語法心中已經寫了一個PartialView產生以下HTML和JavaScript：

<div id="psuAccordion" class="list-group"> 


    <a class="list-group-item accordion-toggle" data-toggle="collapse" data-target="#sbarQuickClientAdd">Quick Client Add</a> 
    <div id="sbarQuickClientAdd" class="panel-body collapse in" style="height: auto;"> 

     <div class="control-group"> 
      <label class="control-label">Client Name: </label> 
      <div class="controls"> 
       <input type="text" class="input-medium" data-bind="value: ClientName" ,="" placeholder="Company"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Contact Name: </label> 
      <div class="controls"> 
       <input type="text" class="input-medium" data-bind="value: ContactName" ,="" placeholder="Contact"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Phone: </label> 
      <div class="controls"> 
       <input type="text" class="input-medium" data-bind="value: Phone" ,="" placeholder="Phone"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Email: </label> 
      <div class="controls"> 
       <input type="text" class="input-medium" data-bind="value: Email" ,="" placeholder="Email"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls" style="padding-top: 15px;"> 


       <button class="btn btn-danger btn-xs" data-bind="click: btnCxlQuickClientAdd"><span class="glyphicon glyphicon-remove"></span></button> 
       <button class="btn btn-success btn-xs pull-right" data-bind="click: btnCreQuickClientAdd"><span class="glyphicon glyphicon-save"></span></button> 
      </div> 
     </div> 
    </div> 
<script type="text/javascript"> 
    $(function() { 
     var avpQuickClientAdd = { 
      TemplateName: ko.observable(), 
      ClientName : ko.observable(), ContactName : ko.observable(), Phone : ko.observable(), Email : ko.observable(), 
      btnCxlQuickClientAdd: function() { 
       $(this).closest('.accordion-toggle').click(); 
      }, 
      btnCreQuickClientAdd: function() { 
       this.TemplateName("QuickClientAdd"); 

       $.ajax({ 
        url: '/QuickForm/Create', 
        type: 'post', 
        dataType: 'json', 
        data: ko.toJSON(this), 
        contentType: 'application/json', 
        success: function (result) { 
         // clear the form 

        }, 
        error: function (err) { 
          alert(err.responseText); 
        }, 
        complete: function() { 
        } 
       } 
      );} 
     } 

     ko.applyBindings(avpQuickClientAdd); 

    }); 
</script> 


</div> 

如果我輸入一些數據的form和點擊保存按鈕，我可以在鉻調試器的ko.toJSON正在使對象並填充它，但該控制器的方法見：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using AVP.DAL; 

namespace AVP.Controllers 
{ 
    public class QuickFormController : Controller 
    { 
     // 
     // GET: /QuickForm/ 
     [HttpPost] 
     public JsonResult Create(QuickFormClient qfc) 
     { 
      string clientName = qfc.ClientName; 
      return new JsonResult(); 
     } 

    } 
} 

接收一個空對象。返回新的JsonResult的控制器方法現在無關緊要。這顯然是測試發佈機制的存根方法。問題是數據沒有到達服務器。

這是參數類型定義：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

namespace AVP.DAL 
{ 
    public class QuickFormClient 
    { 
     public string TemplateName; 
     public string ClientName; 
     public string ContactName; 
     public string Phone; 
     public string Email; 
    } 
} 

成員是在如在KO視圖模型聲明的順序相同。

我還試圖這些語法變體具有不同程度的故障：

-1- data: JSON.stringify(ko.toJSON()) 
-2- data: "{ qfc: " + JSON.stringify(ko.toJSON()) + "}" 
-3- data: "{ qfc: " + ko.toJSON() + "}" 
-4- data: JSON.stringify({qfc: ko.toJSON()}) 

編輯：

後第一個答案給出我試圖JSON.stringify（ko.ToJS）和控制器方法仍然收到一個對象，其成員都是null。

http://pdvstheweb.blogspot.co.uk/2014/03/httpstackoverflowcomquestions22350097kn.html

編輯：

答案是漢斯的答案組合，並加入到{ get; set; }的QuickFormClient成員。

謝謝你們。

編輯：

它不具有多態性壽工作。

public class QuickForm 
{ 
    public string TemplateName { get; set; } 
} 

public class QuickFormClient : QuickForm 
{ 
    public string ClientName { get; set; } 
} 

[HttpPost] 
public JsonResult Create(QuickForm arg) 
{ 
    switch(arg.TemplateName) 
    { 
     case "QuickClient" : 
      QuickFormClient c = (QuickFormClient)arg; 
      break; 
    } 
} 

當控制器方法被調用時，TemplateName爲空。

我不知道有多少價值是通過具有它以這種方式工作，因爲它很容易寫控制方法不同形式的類型和淘汰賽的JavaScript必須是單獨的對象，合適的補充？我想也許有一些JavaScript魔術可以執行，以使Knockout viewmodel具有動態屬性？但是，即使這是可能的，是MVC的類型映射魔偶應該與多態性的工作？

Answer 1

正確的方法是data: JSON.stringify(ko.toJS(this))（假設this確實指向您的viewmodel，它似乎這樣做。

ko.toJS創建一個普通的JavaScript對象（沒有可觀察到的，包裝）

JSON.stringify僅僅是必要的，因爲你的Ajax調用說：contentType: 'application/json'。一般情況下，不需要將其作爲JSON發送，儘管在某些情況下（發送複雜的對象，尤其是包含列表/數組的對象）將會幫助MVC模型映射器理解您發送的內容。