カスタムオブジェクトとしてform.serialize（）をバインドします。

Question

私はMVCアクション結果にAJAXポストを送り、アクション結果のパラメータとしてカスタムオブジェクト（ContactInformationModel）を渡そうとしています。ただし、パラメータが常にnullであるため、パラメータの予想される型が正しくないようです。私はこれが可能だと思ったが、そうでないかもしれない？

私の行動の結果は次のとおりです。

[HttpPost] 
    public ActionResult UpdateContactInformation(ContactInformationModel model) 
    { 
     ... 
    } 

私のjQuery：

//Serialize the ContactInformationModel object 
    var formData = $('#frmSubmitContactInformation').serialize(); 

    // Submit ajax call 
    $.ajax({ 
      url: "/api/[Redacted]/UpdateContactInformation", 
      type: "POST", 
      data: { model: formData }, 
      cache: false, 
      success: function (data) { 
       if (data.Success) { 
        alert('success'); 
       } else { 
        alert('fail'); 
       } 
      } 
    }); 

私のマークアップ（ASP.NET MVCビュー）：

@model [Redacted].Output.ContactInformationModel 

<form id="frmSubmitContactInformation"> 
    Add contact information to your project <button type="button" class="strip-button js-contact-launch js-edit-toggle"><span class="icon icon-edit"></span></button> <button class="btn btn--small btn--green add-half-left-margin js-submit-btn-contactinfo js-contact-launch js-edit-toggle hidden" type="submit">@Translation.Text("done")</button> 
    @*Done Button*@ 
    <div class="js-contact-drawer hidden"> 
     <div class="reveal-output__form column column--no-vert-padding add-half-bottom-margin add-half-top-margin form-group"> 
      <div class="content-block"> 
       @* First/Last/Company Name *@ 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.FirstName) 
        @Html.TextBoxFor(x => x.FirstName, 
         new 
         { 
          @Value = Model == null ? "" : Model.FirstName, 
          @class = "form-control" 
         }) 
       </div> 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.LastName) 
        @Html.TextBoxFor(x => x.LastName, 
         new 
         { 
          @Value = Model == null ? "" : Model.LastName, 
          @class = "form-control" 
         }) 
       </div> 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.CompanyName) 
        @Html.TextBoxFor(x => x.CompanyName, 
         new 
         { 
          @Value = Model == null ? "" : Model.CompanyName, 
          @class = "form-control" 
         }) 
       </div> 
      </div> 
      <div class="content-block"> 
       @* Email/Phone *@ 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.EmailAddress) 
        @Html.ValidationMessageFor(x => x.EmailAddress) 
        @Html.TextBoxFor(x => x.EmailAddress, 
         new 
         { 
          @Value = Model == null ? "" : Model.EmailAddress, 
          @class = "form-control" 
         }) 
       </div> 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.PhoneNumber) 
        @Html.ValidationMessageFor(x => x.PhoneNumber) 
        @Html.TextBoxFor(x => x.PhoneNumber, 
         new 
         { 
          @Value = Model == null ? "" : Model.PhoneNumber, 
          @class = "form-control" 
         }) 
       </div> 
      </div> 
      <div class="content-block"> 
       @* Address 1/Address 2 *@ 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.Address1) 
        @Html.TextBoxFor(x => x.Address1, 
         new 
         { 
          @Value = Model == null ? "" : Model.Address1, 
          @class = "form-control" 
         }) 
       </div> 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.Address2) 
        @Html.TextBoxFor(x => x.Address2, 
         new 
         { 
          @Value = Model == null ? "" : Model.Address2, 
          @class = "form-control" 
         }) 
       </div> 
      </div> 
      <div class="content-block"> 
       @* City/State/Zip*@ 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.City) 
        @Html.TextBoxFor(x => x.City, 
         new 
         { 
          @Value = Model == null ? "" : Model.City, 
          @class = "form-control" 
         }) 
       </div> 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.State) 
        @Html.DropDownListFor(x => x.State, AddressHelper.GetUnitedStatesListItems(), Translation.Text("state"), new {@class = "custom-select"}) 
       </div> 
       <div class="content-block__third-column"> 
        @Html.LabelFor(x => x.PostalCode) 
        @Html.ValidationMessageFor(x => x.PostalCode) 
        @Html.TextBoxFor(x => x.PostalCode, 
         new 
         { 
          @Value = Model == null ? "" : Model.PostalCode, 
          @class = "form-control" 
         }) 
       </div> 
      </div> 
      <input type="hidden" name="ProjectId" value="@Model.ProjectId" /> 
     </div> 
    </div> 
</form> 

私はクラスがそのポジティブですビューで参照されるのは、コントローラで参照しているものとまったく同じです。また、JS自体が正常に動作します。何が問題なの？

Answer 1

ポール、

問題はあなたのデータオブジェクトです。シリアライズされたフォームオブジェクトをデータとして直接ポストする必要があります。

$.ajax({ 
     url: "/api/[Redacted]/UpdateContactInformation", 
     type: "POST", 
     data: formData, 
     cache: false, 
     success: function (data) { 
      if (data.Success) { 
       alert('success'); 
      } else { 
       alert('fail'); 
      } 
     } 
});