Question

I am trying to bind model received from Ajax call but that do not work. Maybe someone could help me?

I am calling ValidateFile Action using Ajax

 $.ajax({
                    url: '@Url.Action("ValidateFile", "Converter")',
                    data: ({ file: fileName, formData: serializedForm }),
                    type: 'POST',
                    success: function (response) {
                        if (response.result) {
                        } else {
                            RemoveFile(fileName);
                        }
                    }
                });

The Fiddler show such query

file=!!!SP+Design!!!.txt&formData%5BEmail%5D=tomas%40mydomain.com

I receive data in my Action with file parameter populated but formData.Email property is always Null

[HttpPost]
public JsonResult ValidateFile(string file, UploadOptionModel formData)
{
}

My UploadOptionModel model

namespace PC.Models
{
    public class UploadOptionModel
    {
        public string Email { get; set; }
    }
}

Form which I am trying to serialize

@model PC.Models.UploadOptionModel
@using (Html.BeginForm())
{
    @Html.EditorFor(p => p.Email)
}

JS Serialization function

function serializeForm() {
    var data = $("form").serializeArray();
    var formData = {};
    for (var i = 0; i < data.length; i++) {
        formData[data[i].name] = data[i].value;
    }

    return formData;
}

Answer 1

You need to JSON encode the data and set the content type to JSON for the model binder to work with JSON. So try this:

$.ajax({
    url: '@Url.Action("ValidateFile", "Converter")',
    data: JSON.stringify({ file: fileName, formData: serializedForm }),
    contentType: 'application/json',
    type: 'POST',
    success: function (response) {
        if (response.result) {
        } else {
            RemoveFile(fileName);
        }
    }
});