提交表單作爲對象參數

Question

所以我在我的Index.cshtml視圖中刪除了一些表格（刪除了一些數據以縮短長度）， 我希望能夠將其提交到「/ Estimate/Index」動作，定義爲

public ActionResult CreateEstimate(Estimate Est); 

它通過序列化數據並提交創建對象就好了，我的問題是沒有插入子對象數據（並且我明白它不會導致它不知道如何），我是好奇是否有辦法告訴它如何以簡單/自動的方式正確創建對象。 我試過給NetUplift一個不同的名字， Ex。 name="NetUplift.Value"但這會導致內部服務器錯誤（代碼500）。

形式在Razor視圖 - Index.cshtml

<form id="form-create-estimate"> 
       <table id="table-create-estimate" class="table"> 
        <tbody> 
         <tr> 
          <td class="td-header">ID</td> 
          <td id="td-id"><input name="ID" type="text" value="" /></td> 
         </tr> 
         <tr> 
          <td class="td-header">Name</td> 
          <td id="td-name"><input name="Name" type="text" value="" /></td> 
         </tr> 
         <tr> 
          <td class="td-header">Job Difficulty</td> 
          <td id="td-jobdifficulty"><input name="JobDifficulty" type="text" value="" /></td> 
         </tr> 
         <tr> 
          <td class="td-header">Type</td> 
          <td id="td-type"><input name="Type" type="text" value="" /></td> 
         </tr> 
         <tr> 
          <td class="td-header Unit">Net Uplift</td> 
          <td id="td-netuplift"> 
           <input name="NetUplift" class="Unit" title="in PSF" type="number" value="" /> 
           @*<input name="NetUplift.DataType" type="hidden" value="System.Int32" /> 
           <input name="NetUplift.UnitOfMeasure" type="hidden" value="psf" />*@ 
          </td> 
         </tr> 
         <tr> 
          <td class="td-header Unit">Joist Spacing</td> 
          <td id="td-joistspacing"><input name="JoistSpacing" class="FeetInch" title="in Feet' Inch''" type="text" value="" /></td> 
         </tr> 
         </tr> 
         <tr> 
          <td class="td-header">Drawing Location</td> 
          <td id="td-drawinglocation"><input name="DrawingLocation" type="text" value="" /></td> 
         </tr> 
         <tr> 
          <td><input id="button-submit-estimate" type="button" value="Create" /></td> 
          <td><input id="button-cancel-estimate" type="button" value="Cancel" /></td> 
         </tr> 
        </tbody> 
       </table> 
      </form> 

阿賈克斯提交腳本

// Do an Ajax Post to Submit the newly created Estimate. 
function CreateEstimate() { 
    // Serialize the Form. 
    var Estimate = $("#form-create-estimate").serialize(); 

    // Send the Serialized Form to the Server to be processed and returned 
    // as an updated page to asynchronously update this page. 
    // I guess instead of returning this entire page we could make the action 
    // return just a table row with the Estimate's Data, then append it to the table 
    // of estimates. It'll be saved to the list of estimates too so there won't be 
    // a chance to the lists on the Client and list on the server to be different. 
    $.ajax({ 
     url: "/Estimate/CreateEstimate/", 
     datatype: "json", 
     data: Estimate, 
     contenttype: "application/json", 
     success: function (Data, Success) { 
      if (Data.Estimate !== undefined) { 
       // Create a Html Table Row from the Estimate. 
       // Append the Row to the Table. 
       // Hide the Dialog. 
      } else { 
       alert("No Error Occured; however, the Creation of the Estimate was unsuccessful. Please Try Again."); 
      } 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert("An Error Occured. \n" + thrownError + "\n" + xhr.status); 
     } 
    }); 
} 

估計類

public class Estimate 
{ 
     public Int32 ID { get; set; } 
     public String JobDifficulty { get; set; } 
     public String Type { get; set; } 
     public String Name { get; set; } 
     public Unit NetUplift { get; set; } 
     public Unit JoistSpacing { get; set; } 
     public String DrawingLocation { get; set; } 
} 

單元類

public class Unit 
{ 
    public String Value { get; set; } 
    public Type DataType { get; set; } 
    public String UnitOfMeasure { get; set; } 

    public Unit(Type DataType, String Value, String UnitOfMeasure) 
    { 
     this.Value = Value; 
     this.DataType = DataType; 
     this.UnitOfMeasure = UnitOfMeasure; 
    } 
} 

目前的動作CreateEstimate(Estimate Est)臨危提交除了子對象值的數據，例如Unit（Estimate.NetUplift）。我如何告訴它將NetUplift映射到Estimate.NetUplift.Value，並且兩個註釋輸入字段爲NetUplift.DataType/NetUplift.UnitOfMeasure？

有沒有辦法讓服務器知道它應該以這種方式映射，還是必須在將表單發送到服務器之前做到這一點？

Answer 1

你可以試試這個：

$.fn.serializeToObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 

    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

var estimate = $("#form-create-estimate").serializeToObject();