jquery post content of ajax form

Question

I have an ajax form as following:

@using (Ajax.BeginForm("Action", "Ctrler", null, new AjaxOptions { UpdateTargetId = "divSendML" }, new { id = "frmSendML" }))
{
    <div id="divSendML">

    @Html.EditorFor(x => x.SomeProperties)
    ...

    <div id="divPreview"></div>

    </div>
}

Then I call an jquery post to update the content of tag divPreiview, I want to post the content of this ajax form:

function PreViewGenerateHtml() {
    var form = $("#frmSendML");
    $.post("/Ctrler/Action",
            form.serializeArray(),
            function (data) {
                $("#divPreview").html(data);
            });
}

[HttpPost]
public ActionResult Action(ActionModel model)
{
}

On server side, why the mapped model doesn't have value for SomeProperties.

Keep in mind that private properties won't be mapped – Bardo Oct 01 '12 at 06:50 — Bardo, Oct 01 '12 at 06:50

score 0 · Answer 1 · answered Oct 01 '12 at 12:28

It's not clear why you write this PreViewGenerateHtml javascript function. When you use Ajax.BeginForm and include the jquery unobtrusive script it will automatically AJAXify the generated form and when you click on the submit button it will send it to the server asynchronously.

If on the other hand you want to manually AJAXify the form you should use a normal Html.BeginForm instead of an Ajax.BeginForm and then pass form.serialize() instead of form.serializeArray() to the $.post method.

The target controller action will receive exactly the same POST data as if it was a normal HTML form. So your input field names must be correctly named if you expect the default model binder to bind your model. Here's an article illustrating the expected format for binding to collections.

If you have some doubts use a javascript debugging tool (such as FireBug or Chrome developer toolbar) to inspect the exact data payload that's being sent along with the request.

jquery post content of ajax form

1 Answers1