Bind form.serialize() as custom object - ajax

Question

I'm trying to send an AJAX post to an MVC action result and pass a custom object (ContactInformationModel) over as the parameter for the action result. However the expected type of the parameter is apparently not correct because the parameter is always null. I thought this was possible but maybe it's not?
My action result is:
[HttpPost]
public ActionResult UpdateContactInformation(ContactInformationModel model)
{
...
}
My 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');
}
}
});
My markup (ASP.NET MVC View):
#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>
I'm positive that the class referenced in the view is the exact same as I am referencing in the controller. Also, the JS runs fine itself. What could be the issue?

Answer 1

Paul,
The issue is your data object. You need to directly post your serialized form object as data.
$.ajax({
url: "/api/[Redacted]/UpdateContactInformation",
type: "POST",
data: formData,
cache: false,
success: function (data) {
if (data.Success) {
alert('success');
} else {
alert('fail');
}
}
});