jquery ajax postを使用してコントローラに配列を渡すのに失敗しました

Question

私はこれに類似したモデルを使ってレンダリングされる入力フォームを持っています。私は、明確にするために例を単純化しようとしました。それは、私はjQueryのAJAXにコントローラのアクション

public MyController 
{ 
    public ActionResult ActionMethod(OrderDetailsModel model) 
    { 
    } 
} 

へ

$("#submit").click(function(e) { 
    e.preventDefault(); 

    var submitUrl = $("#submit").attr("href"); 
    var model = $("#orderForm").serialize(); 
    $.ajax({ 
     type: "POST", 
     url: submitUrl, 
     data: model, 
     success: function(result) { 
      alert("Success"); 
     }, 
     error: function(result) { 
      alert("Error"); 
     } 
    }); 
}); 

を使用してフォームを投稿しようとしています。この

<form id="orderForm"> 
    <div> 
     @Html.LabelFor(model => model.FirstName) 
    </div> 
    <div> 
     @Html.EditorFor(model => model.FirstName) 
    </div> 
    <div> 
     @Html.LabelFor(model => model.Surname) 
    </div> 
    <div> 
     @Html.EditorFor(model => model.Surname) 
    </div> 


    @for (int i = 0; i < 3; i++) 
    { 
     var addressDisplayDivId = $"addressDisplay{i}"; 

     <div id="@addressDisplayDivId"> 
      <div> 
       @Html.LabelFor(model => model.OrderAddresses[i].BuildingNameNumber) 
      </div> 
      <div> 
       @Html.EditorFor(model => model.OrderAddresses[i].BuildingNameNumber, new {@id = $"buildingNameNumber{i}"}) 
      </div> 
      <div> 
       @Html.LabelFor(model => model.OrderAddresses[i].Town) 
      </div> 
      <div> 
       @Html.EditorFor(model => model.OrderAddresses[i].Town, new {@id = $"town{i}"}) 
      </div> 
      <div> 
       @Html.LabelFor(model => model.OrderAddresses[i].Postcode) 
      </div> 
      <div> 
       @Html.EditorFor(model => model.OrderAddresses[i].Postcode, new {@id = $"postcode{i}"}) 
      </div> 
     </div> 
    } 

    <a href="/MyController/ActionMethod" id="submit">Submit</a> 
</form> 

にマークアップと同様のカミソリを使用してレンダリングされ

[Serializable] 
public class OrderDetailsModel 
{ 
    public string FirstName { get; set; } 
    public string Surname { get; set; } 

    public Address[] OrderAddresses { get; set; } 
} 

[Serializable] 
public class Address 
{ 
    public string BuildingNameNumber { get; set; } 
    public string Town { get; set; } 
    public string Postcode { get; set; } 
} 

問題はmですyアクションが呼び出されていません。アドレス[]を削除すると問題なく動作しますが、その複雑さをモデルに導入することで、アクションへの投稿が機能しないように思えます。

問題は、jqueryのシリアル化にあり、アクションにポストする前にAddress配列をどのように構築するかのようです。

誰もこれに対処する方法を提案できますか？

Answer 1

AjaxコールからSuccessレスポンスを受け取っていても、実際には隠れたエラーが発生していると推測することができます。

エラーが

コレクションが読み取り専用の

だった私はIListのにアドレスアレイを変更：

public Address[] OrderAddresses { get; set; } 

public IList<Address> OrderAddresses { get; set; } 

にプロブーム解決！