将form.serialize（）绑定为自定义对象

Question

我尝试将AJAX帖子发送到MVC操作结果并将自定义对象（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 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>

我很肯定视图中引用的类与我在控制器中引用的类完全相同。此外，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');
            }
        }
});