Question

我将内容动态加载到表中，如您所见，我有一个输入并且有两个复选框：

    $.ajax({
        type: "GET",
        url: "/User/GetCustomerContactInfo",
        data: { ids: items },
        traditional: true,
        dataType: 'json',
        success: function (values) {

          for (var i = 0; i < values.length; i++) {
                   value = values[i]

                  if (value != null) {

                   holderHTML += '<tr id="row' + value.CustomerNo + '">';
                   holderHTML += '<td><input id="NameOfCompany"  name="[' + i + '].NameOfCompany" value="' + value.NameOfCompany + '" /></td>';
                   holderHTML += '<td><input id="checkboxCustom1" type="checkbox" name="[' + i + '].RightsCode"  value="Åbne ordrer"/>
                                      <input id="checkboxCustom1" type="checkbox" name="[' + i + '].RightsCode"  value="Lukkede ordrer"/></td>
                   holderHTML += '</tr>';
                    }
                }

                $('#output').append(holderHTML);

        },

        error: function () {
            console.log('something went wrong - debug it!');
        }
    })

HTML输出将类似于：

<form id="CustomerNEmployeeForm">
 <table>

    <tbody id="output">
     <tr id="row10883">
     <td>
     <input type="text" id="NameOfCompany" name="[0].NameOfCompany" value="Center">
     </td>
     <td>
        <input id="checkboxCustom1" type="checkbox" name="[0].RightsCode" value="Åbne ordrer">
        <input id="checkboxCustom1" type="checkbox" name="[0].RightsCode" value="Fakturerede ordrer">
     </td>
     </tr>
   </tbody>

   </table>
  </form>

  <button class="btncreateusers" id="createusersJS" type="button" onclick="CreateCustomerNEmployees();">Create</button>

并且比我想要获取复选框的值并通过序列化表单传递给控制器，但是，当表单被序列化时，它将仅传递第一个复选框的值：

function CreateCustomerNEmployees() {

        var formdata = $("#CustomerNEmployeeForm").serializeArray();

        console.log(formdata);

        $.ajax({
            "url": '@Url.Action("CreateCustomers", "User")',
            "method": "POST",
            "data": formdata ,
            "dataType": "json",

            complete: function () {

            }

        });
    }

输出console.log（formdata）：

0: {name: "[0].NameOfCompany", value: "Center"}
1: {name: "[0].RightsCode", value: "Åbne ordrer"}
2: {name: "[0].RightsCode", value: "Lukkede ordrer"}

型号：

public class CreateCustomers
{
    public string NameOfCompany { get; set; }
    public string RightsCode { get; set; }
}

控制器：

[HttpPost]

    public JsonResult CreateCustomers(List<CreateCustomers> model)
    {

   if (model == null)
        {
            model = new List<CreateCustomers>();
        }

     var resultsOne = new List<Users>();
     var resultsTwo = new List<Rettigheder>();


  foreach (var item in model)
        {

       var UsersInsert = new Users
            {
                CompanyName = item.NameOfCompany,
                //other property
            };

        var RettighederInsert = new Rettigheder
            {
                 //other property
                Rettighedskode = item.RightsCode
            };

            resultsOne.Add(UsersInsert);
            db.Users.Add(UsersInsert);

            resultsTwo.Add(RettighederInsert);
            db.Rettigheder.Add(RettighederInsert);
        }

            db.SaveChanges();
            return Json(model, JsonRequestBehavior.AllowGet);
    }

调试输出： https://i.imgur.com/DT6TYd4.jpg

Answer 1

CreateCustomers模型已将RightsCode指定为单个字符串。

public class CreateCustomers
{
    public string NameOfCompany { get; set; }
    public string RightsCode { get; set; }
}

在这种情况下，MVC模型绑定仅绑定第一个匹配项。

如果要绑定所有RightsCode复选框，则需要将RightsCode更改为字符串数组。

public class CreateCustomers
{
    public string NameOfCompany { get; set; }
    public string[] RightsCode { get; set; }
}

无关但良好的做法- html标签id的值应该唯一。 Names可以重复，但是id的值不唯一会导致css / js选择器出现问题。

将多个复选框的值[S]传递给Controller MVC | AJAX

1 个答案: