javascript - 序列化表单发布到 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 类

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

Employee.cs 类

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

EmployeeCustomer.cs 类

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

还有我的问题:

我想获取 "testForm" 输入数据并发布到 Controller 。当我发布到 Controller 时，data.EmployeeData 计数出现，但数据列表始终为 null 我错过的地方到底是什么？

为什么我无法从 Controller 中的表单获取“EmployeeId”和“FirstName”列表值并将其设置为 Employee 类属性？

Answer 1

我会先规范一下:

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

options.data = JSON.stringify(resultData);

然后，如果你看看什么样的EmployeeData正在控制台中发布，您会看到它不是 Employee 的列表s - 这是具有随机名称/值对的对象列表:

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

MVC 不会知道这是什么，因为它是一个具有属性 name 的对象数组。和 value , 但不是 Employees 的列表.它可以很好地发布此数据，但除非对象属性的名称与模型的名称相同，否则 MVC 不会使用它。 所以我认为问题出在表单上下文中使用的命名约定。

编辑: 我认为问题是您需要了解表单正在发布大量名称/值对。例如，采用以下形式:

<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>

它将向 Controller 发送四项内容:EmployeeID、FirstName、EmployeeId 和 FirstName。那是因为整个表单有四个名称/值对。这些对象不符合 MVC 模型。

就像@haim770 所说的那样 - 在您的示例中，问题是每次单击复选框时，都会将名称/值对发布到 MVC Controller ，但它与 List<Employee> 没有任何关系| .