ajax - Bind form.serialize() as custom object -
i'm trying send ajax post mvc action result , pass custom object (contactinformationmodel) on parameter action result. expected type of parameter apparently not correct because parameter null. thought possible maybe it's not?
my action result is:
[httppost] public actionresult updatecontactinformation(contactinformationmodel model) { ... } my jquery:
//serialize 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 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 class referenced in view exact same referencing in controller. also, js runs fine itself. issue?
paul,
the issue data object. need directly post serialized form object data.
$.ajax({ url: "/api/[redacted]/updatecontactinformation", type: "post", data: formdata, cache: false, success: function (data) { if (data.success) { alert('success'); } else { alert('fail'); } } });
Comments
Post a Comment