将表单发布序列化为控制器

Serialize form post to controller

本文关键字：控制器 序列化 表单      更新时间：2023-09-26

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);
});

控制器：

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);
    }
}

客户.cs类

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

员工.cs类

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

员工客户.cs类

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

和我的问题：

我想获取"testForm">输入数据并发布到控制器。当我发布到控制器时，数据。员工数据计数出现，但数据列表总是空，我错过了确切的地方？

为什么我无法从控制器中的表单中获取"EmployeeId"和"FirstName"列表值并设置为员工类属性？

我会先对此进行规范化：

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

然后，如果您查看控制台中正在 POST 的EmployeeData类型，您会发现它不是Employee的列表 - 它是具有随机名称/值对的对象列表：

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>

它将向控制器发布四件事：EmployeeID，FirstName，EmployeeId和FirstName。 这是因为整个窗体有四个名称/值对。 这些对象与 MVC 模型不对应。

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

相关文章：