Paul Paul - 24 days ago 6
Ajax Question

Bind form.serialize() as custom object

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

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');
            }
        }
});
Comments