Serialize form post to controller

Question

Html:

<form id="testForm">
    <div>
        Customer 1
        <input type="hidden" name="EmployeeId" value="1" />
        <input type="checkbox" name="FirstName" value="10"> Test 10
        <input type="checkbox" name="FirstName" value="20"> Test 20
        <input type="checkbox" name="FirstName" value="30"> Test 30
        <input type="checkbox" name="FirstName" value="40"> Test 40
        <input type="checkbox" name="FirstName" value="50"> Test 50
        <input type="checkbox" name="FirstName" value="60"> Test 60
    </div>
    <div>
        Customer 2
        <input type="hidden" name="EmployeeId" value="2" />
        <input type="checkbox" name="FirstName" value="100"> Test 100
        <input type="checkbox" name="FirstName" value="200"> Test 200
        <input type="checkbox" name="FirstName" value="300"> Test 300
        <input type="checkbox" name="FirstName" value="400"> Test 400
        <input type="checkbox" name="FirstName" value="500"> Test 500
        <input type="checkbox" name="FirstName" value="600"> Test 600
    </div>
</form>

<button id="btn" type="button">Click</button>

JavaScript (jQuery):

$('#btn').click(function () {

    var objCustomer = {};
    objCustomer.CustomerID = 22;
    objCustomer.CompanyName = "Test Company";

    var resultData = JSON.stringify({
        EmployeeData: $('#testForm').serializeArray(), // I want to get testform data and set to "resultData"
        CustomerData: objCustomer
    });

    var options = {};
    options.url = "/Home/Post/";
    options.type = "POST";
    options.data = resultData;
    options.dataType = "json";
    options.contentType = "application/json";
    options.success = function (result) { if (result != null) { { alert("Success"); } } };
    options.error = function () { alert("Error"); };

    $.ajax(options);

});

Controller:

public JsonResult Post(EmployeeCustomer data)
{
    try
    {
        List<Employee> emp = data.EmployeeData;
        Customer cust = data.CustomerData;

        return Json(data, JsonRequestBehavior.AllowGet);
    }
    catch
    {
        return Json(false, JsonRequestBehavior.AllowGet);
    }
}

Customer.cs Class

public int CustomerId { get; set; }
public string CompanyName { get; set; }

Employee.cs Class

public int EmployeeId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }

EmployeeCustomer.cs Class

public List<Employee> EmployeeData { get; set; }
public Customer CustomerData { get; set; }

And My Question :

I want to get "testForm" input data and post to controller.When i post to controller , data.EmployeeData count appears however data list always null where i miss exactly ?

Why i can not get "EmployeeId" and "FirstName" list values from form in Controller and set to Employee class properties ?

Answer 1

I would normalize this a little bit first:

var resultData = {
    EmployeeData: $('#testForm').serializeArray(),
    CustomerData: objCustomer
};

options.data = JSON.stringify(resultData);

Then, if you look at what sort of EmployeeData is being POSTed in the console, you'll see that it's not a list of Employees - it's a list of objects with random name/value pairs:

EmployeeData: [
0: {name: "EmployeeId", value: "1"}
1: {name: "FirstName", value: "10"}
2: {name: "EmployeeId", value: "2"}
3: {name: "FirstName", value: "100"}]

MVC isn't going to know what this is, because it's an array of objects with the properties name and value, but not a list of Employees. It posts this data fine, but MVC won't work with it unless the names of the object's properties are identical to the model's. So the issue, I think, is with the naming conventions used in the context of your form.

EDIT: I think the issue is that you need to understand that a form is posting lots of name/value pairs. Take, for instance, the following form:

<div>
    Customer 1
    <input type="hidden" name="EmployeeId" value="1" />
    <select name="FirstName">
        <option value="100">Test 100</option>
        <option value="200">Test 200</option>
        <option value="300">Test 300</option>
        <option value="400">Test 400</option>
        <option value="500">Test 500</option>
        <option value="600">Test 600</option>
    </select>
</div>

<div>
    Customer 2
    <input type="hidden" name="EmployeeId" value="2" />
    <select name="FirstName">
        <option value="100">Test 100</option>
        <option value="200">Test 200</option>
        <option value="300">Test 300</option>
        <option value="400">Test 400</option>
        <option value="500">Test 500</option>
        <option value="600">Test 600</option>
    </select>
</div>

It's going to post four things to the controller: EmployeeID, FirstName, EmployeeId, and FirstName. That's because the entire form has four name/value pairs. These objects don't correspond to the MVC model.

Like @haim770 says - in your example, the problem is that every time you click a checkbox, a name/value pair is posted to the MVC controller, but it doesn't have anything to do with List<Employee>.